Front/Html / / 2020. 11. 5. 09:46

[HTML ]3-5. 제목, 문단, 연락처, 인용문 목록 작성하기

728x90


제목(heading 요소) - http://html5.clearboth.org/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements 

h1, h2, h3, h4, h5, h6 의 여섯단계가 있고 h1요소가 가장 상위제목을 나타낸다. 일반브라우저에서는 중요도가 높은 제목일수록 크게 표시되는데 스타일시트를 활용해 임의의 크기를 지정할 수 있다. 블록 레벨 요소이며 인라인요소를 포함할 수 있지만 블록 레벨 요소를 포함할 수 없다.

예제) <h1>문서의 가장 상위의 제목 표시</h1>

--------------------------------------------------------------------------------------------



문단(p 요소) - http://html5.clearboth.org/grouping-content.html#the-p-element

문단(Paragraph)은 '단락'으로 텍스트를 문단으로 표현하기 위해 사용한다. 블록 레벨 요소이며 블록레벨요소를 포함할 수 없다. 
예제) <p>문단을 표현합니다. <br />줄바꾸기는 br요소를 사용합니다.</p>


--------------------------------------------------------------------------------------------



작성자 정보(address 요소) - http://html5.clearboth.org/sections.html#the-address-element

주소, 연락처, 이메일, 
address요소에는 그 문서에 관한 연락처를 기술. 담당자이름, 홈페이지 링크, 주소, 전화번호, 그 외 연락을 위해 필요한 정보를 배치. 브라우저에서 이탤릭체로 표현되지만 스타일시트를 활용 원하는 글꼴형태를 만들 수 있다. 블록레벨요소로 블록레벨요소를 포함할 수 없다.  (단, p요소는 포함할 수 있다)
예제) <address>다음의 주소로 이 사이트의 문의를 해 주세요<br/> 연락처 : webazit@naver.com</address>


--------------------------------------------------------------------------------------------



구분선(hr 요소) - http://html5.clearboth.org/grouping-content.html#the-hr-element

문서 안에 구분선(horizontal rule)을 그을 때 사용.  

선을 긋는다기 보다는 이전 내용과 다른 내용이 있음을 구분해줌. 
예제) <hr />


--------------------------------------------------------------------------------------------



인용문(blockquote 요소) - http://html5.clearboth.org/grouping-content.html#the-blockquote-element
안에 p 블록요소가 들어갈 수 있음. 
인용문(block-level quotation)으로 정의하기 위해 사용. blockquote요소는 블록 레벨 요소이지만 직접 인라인 요소와 텍스트를 포함하지 말고 p요소 등 다른 블록 레벨 요소를 포함해야 한다. cite속성으로 인용한 곳의 URI를 기술하거나 title속성을 활용해서 인용한 곳의 타이틀을 명시할 수 있다. 
예제) 

 


 <p>인용문을 사용할 때 별도의 블록 레벨 요소를 활용한다.</p> 
</blockquote> 
  
인라인에서 인용이 필요할 때는 q요소를 활용한다. 
예제) 나폴레옹이 말하기를 <q cite="www.w3c.org"> 이 산이 아닌갑다</q>했단다.

 - p태그를 사용시 문단이 나눠진다.
 - title을 요약된 내용을 넣어주는 것도 좋다.
 - footer태그를 사용하여 출처를 나타내며, 그 안에 cite를 써서 출처 제목을 나타내기도 함.
 그 안에 a태그를 넣어서 링크를 걸어주는 것이 좋다.


--------------------------------------------------------------------------------------------



정형화 된 텍스트(pre 요소) - http://html5.clearboth.org/grouping-content.html#the-pre-element

pre요소(prefomatted text)는 공백문자나 줄바꾸기를 입력되어 있는 그대로 표시할 때 사용. pre요소는 블록 레벨 요소이며 인라인 요소와 텍스트를 포함하지만 블록 레벨 요소를 포함할 수 없다. 또 img, big, small, sub, sup, ins, del, label, input, select, textarea, button, noscript요소 등의 텍스트를 장식하기 위한 요소, 폼과 스크립트 관련 요소를 포함할 수 없다.

- &nbsp; 를 쓰지 않으면 공백이 많아도 반영되지 않은데 
예전에는 이미지나, 요즘은 코드를 보여주기 위해서 씀. 
-  css로 들여쓰기 간격도 조절할 수 있음. 
- pre를 쓰면 폰트가 바뀜. 

300x250
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유