HTML 구조

HTML

HTML 은 크게 두 부분으로 나누어 생각할 수 있다.

모든 시각적으로 표시 되는 컨텐츠는 <body></body> 태그 안에 위치한다.
이 태그 안에는 텍스트,이미지,링크,비디오,폼,스크립트 등 다양한 요소가 포함될 수 있다.

문서의 메타데이터 와 관련된 정보를 포함하는 요소이다.
이 태그 안에 포함된 내용은 브라우저에 직접적으로 표시되지 않지만
문서의 제목,스타일,스크립트,메타 정보 등을 설정하는데 사용된다.

자주 사용되는 태그들

<div>
구역을 나눌때 사용한다.
<p>
문단을 정의한다.
<ul>
비순서 목록
항목이 순서 없이 나열되며 일반적으로 각 항목은 ●(점) 으로 표시된다.
<ol>
순서 목록
항목이 특정한 순서대로 나열되며 일반적으로 숫자나 알파벳으로 표시된다.
<li>
목록의 각 항목을 나타내며 사용자가 정보를 구조적으로 이해할 수 있게 도와준다.
css를 통해 목록 항목의 스타일을 조정할 수 있다.

<h1>
페이지의 제목을 나타내는 태그
<h2>
페이지의 소제목
<h3>~<h6>
각자의 역할이 있지만 비중이 적다.
<hr>
내욕의 섹션을 나누거나 주제를 변경할때 사용된다.
여러 문단 사이에 구분선을 넣어 내용을 더 쉽게 이해하도록 도와준다.
<span>
css를 사용하여 <span> 태그로 감싼 텍스트의
색상,글꼴,크기,배경색 등을 변경할 수 있다.
<a>
하이퍼링크 를 생성하는데 사용된다.
다른 웹 페이지,파일,이메일 주소, 또는 같은페이지 내의 특정 위치로 연결되는 링크를 만들 수 있다.
<img>
이미지를 웹 페이지에 삽입하는데 사용된다.
<input>
사용자로부터 데이터를 입력받기위한 다양한 유형의 입력 필드를 생성한다.
type 속서을 통해 여러 종류의 입력 필드를 생성할 수 있다.
<button>
클릭 가능한 버튼을 생성한다.
태그 내부에 텍스트,이미지 등 을 포함할 수 있다.
<textarea>
다중 행 텍스트 입력 필드를 생성한다.
rows 와 cols 속성을 사용하여 텍스트 영역의 크기를 조정할 수 있다.
rows : 텍스트 영역의 행 수를 지정한다.
cols : 텍스트 영역의 열 수를 지정한다.

한우종 개발일지