* <body> 영역의 요소

: 문단 관련 요소

<h1> ~ <h6>

- 대제목, 중제목, 소제목....정보계층을 기계적으로 구조화하는 역할.

  순차적으로 계층 구조를 지키는 것이 바람직.

- 다른 블록요소를 포함할 수 없으며, 인라인 요소와 텍스트만 포함.

- 디자인상 생략된 헤딩 요소를 특성에 맞게 마크업할 때 정보접근성이 좋아 CSS를

이용해 숨길 수 있다.

- 레이아웃을 위한 헤딩 사용은 지양.

<p>

- 텍스트를 단락으로 정의할 때 - 문단 작성

- <a> <img> 등 인라인 요소와 텍스트만 포함 가능, 다른 블록요소 포함不可

<br> 

- 단락에서 강제 줄바꿈시 사용 , 'line break'의 의미

- 빈 엘리먼트 : <br />

- 키보드 Enter만 사용하면 공백(space)만 추가될 뿐, 줄바꿈 효과없음.

- br 요소 남발 금물.

: 정렬하기 위해 강제로 br 요소를 사용해 문장나누기 X

  <span> 요소를 사용하면 br 요소 사용과 같은 효과를 줄 수 있음.

  ex. <p> 웹 접근성 향상을 위한 <span style="padding-left:20px;">

      </span>국가표준 기술 가이드 라인</p> 

<address>

- 문서 아래쪽 연락처 및 제작자 저작권 정보 표시

- 다른 블록요소 포함 不可, 인라인 요소와 텍스트만 포함 가능.

  기울임형태로 렌더링.

tip. address 요소안에 p요소 사용가능?

    - transitional : 인라인 요소, p요소 가능

    - strict : 인라인만 가능

    worst case: 일반 주소 콘텐츠에 사용한 경우 

<hr>

- 수평선으로 표현되어 구분선 역할.

- 빈 엘리먼트 : <hr />

- 논리적 의미의 구문 X, 콘텐츠 전후의 내용 구분.

<blockquote>

- 인용된 문단 표시, 인용 출처를 표시하기 위한 전용 속성 cite를 갖는다.

- 블록단위의 인용문, 블록요소만 포함 : 좌우여백으로 일반 단락과 구별되어 출력

- strict dtd 일 경우, <blockquote>에 텍스트요소나 인라인 요소를 직접

포함 불가, 다른 블록레벨 요소를 포함하여 작성해야 함.

<blockquote cite="출처" title="coforward가 생각하는 웹이란“><p><em class=

"coforward">co<span>Forward</span></em>는 웹사이트가 운영자와~</p>

</blockquote>

<q>

- 인용된 짧은 문장. 인라인 요소와 텍스트 포함.

- <blockquote>와 동일한 용도의 인라인 레벨 요소. cite 속성 ○.

<p> 텍스트<q cite="출처“> 인라인 인용구</q>텍스트</p>

<pre>

: 정형화된 텍스트

- 공란과 줄 바꿈 등이 병합되지 않고, 소스에서 입력된 그대로 표시.

- 프로그램의 코드를 표시하는 용도로 자주 사용.

- 블록 레벨 요소이나, 블록요쇼, Form관련 요소, script 관련 요소를 콘텐츠 요소로

  포함 불가.


  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기