p 태그 (문단)
- p 태그는 텍스트 문단을 구성하는 블럭 태그 쌍태그이며 혼합형으로 사용 align 속성으로 텍스트 정렬 지정 가능. 단, p 태그는 블럭 태그임에도 자식으로 다른 블럭 태그를 가질 수 없는 예외 규칙 적용
font 태그 (텍스트 서식)
-
font 태그는 텍스트의 시각적 서식을 지정하는 인라인 태그
-
size는 텍스트 크기로 1~7 사이의 숫자로 지정 face는 글꼴(서체) 지정이며, 서버 폰트가 아닌 클라이언트(브라우저) 컴퓨터의 폰트를 사용하므로 모든 컴퓨터에 설치되어 있을 가능성이 높은 폰트 사용 권장 color는 텍스트 색상으로 색상명 또는 RGB 값으로 지정
hr 태그 (수평바)
- hr 태그는 문단과 콘텐츠를 구분하는 수평선을 출력하는 단독 태그
size는 선의 두께, width는 선의 너비, align은 선의 수평 정렬, color는 선의 색상, noshade는 선의 그림자 유무(플래그형), title은 마우스 호버 시 나타나는 툴팁 텍스트
HTML 속성값의 형태
- 숫자형(단위 없음)은 픽셀(절대값), 글꼴 크기, 글자 개수 숫자형(단위 있음)은 % 백분율(상대값)로 부모 태그의 영역 기준 열거형은 정해진 속성값 중 하나를 선택 색상은 색상명 또는 RGB로 지정 플래그형은 boolean으로 값 없이 속성명만 작성 문자열은 자유롭게 입력 URL은 background 등의 속성에 경로 지정
목록 태그 (List)
- ol + li는 순서가 있는 목록(Ordered List) ul + li는 순서가 없는 목록(Unordered List) dl + dt + dd는 용어 정의 목록으로, dl은 Definition List(정의 목록), dt는 Definition Term(용어), dd는 Definition Description(용어 설명)
a 태그 (링크)
-
a 태그는 앵커(anchor)라는 의미로 하이퍼링크를 구성하는 인라인 태그
-
href는 이동할 URL 경로를 지정하는 Hypertext Reference target은 링크를 열 위치 지정이며 _blank(새 탭), _self(현재 탭, 기본값), _top, _parent, 프레임명 중 하나를 사용
-
브라우저가 해석 가능한 파일은 열기로 반응하고, 해석 불가능한 파일은 다운로드로 반응
인라인 태그 vs 블럭 태그
-
모든 HTML 태그는 인라인 태그 또는 블럭 태그 중 하나에 속함
-
인라인 태그는 자신의 내용물과 인접한 태그를 같은 라인에 출력 영역의 너비와 높이가 항상 내용물의 크기와 동일하며 콘텐츠 출력 역할
-
블럭 태그는 앞뒤 태그와 다른 라인에 출력 영역의 너비가 항상 100%이고 높이는 내용물의 높이와 같으며 레이아웃 구조 역할
-
태그 중첩 규칙은 다음과 같음 블럭 태그는 자식으로 블럭 태그와 인라인 태그 모두 가질 수 있음 인라인 태그는 자식으로 인라인 태그만 가질 수 있고 블럭 태그는 가질 수 없음 p 태그는 블럭 태그지만 예외적으로 자식으로 블럭 태그를 가질 수 없음
img 태그 (이미지)
-
img 태그는 이미지를 출력하는 단독 태그이며 인라인 태그
-
src는 이미지 경로 URL로 필수 속성 alt는 대체 텍스트로 이미지를 설명하는 메타데이터이며 필수 속성 접근성(장애인용)과 이미지 검색에 활용 align은 left 또는 right로 이미지 정렬 지정
table 태그 (표)
-
표를 구성하는 태그는 세 가지 계층 구조로 구성
-
table은 가장 큰 컨테이너로 테이블 전체를 감쌈 tr은 Table Row로 테이블의 행 구성 td는 Table Data로 테이블의 셀을 구성하며 실제 데이터를 담음
-
table 태그는 표를 만드는 용도 외에도 레이아웃 구성에 활용되었으나, 현재는 CSS를 이용한 레이아웃 권장
