HTML5 - 구조적 마크업 이해! HTML5의 그룹 컨텐츠 요소

공부 환경

-혼자 간단하게 웹 페이지를 만들어 보고 싶어서 시작 -퇴근 후 짬짬히 -느리지만 꾸준하게 할 예정

 

---

웹 초창기

하나의 HTML 파일에 웹 페이지의 모든 것이 정의되었던 혼돈의 시기를 지나 😓..

결국에는 컨텐츠의 구조와 표현을 구분하게 되었다.

 

2020/06/04 - [Web] - HTML5 - 구조적 마크업 이해! HTML5의 섹션 요소

 

이어서 HTML5의 구조를 정의하는 구조적 요소에 대해 알아보자

---

 

HTML5의 그룹 컨텐츠 요소

-그룹으로 내용 분리

 

<p>

컨텐츠 문단 의미

기존에 하나만 사용하여 문단 분리로 많이 사용되었으나 문단과 시작 끝에 P요소를 정확히 작성하자!

-> 컨텐츠 문단을 의미하는 요소기 때문에 단순하게 행 한 줄 추가(표현적 마크업 형태로)를 표현하기 위해 쓰면 좋지 않겠죠?!😉

 

<blockquote>

인용. 다른 소스로부터 가저온 인용 섹션. 참조한 URL 주소가 있다면 cite 속성으로 표시

 

<blockquote cite="https://one-day-one-writing.tistory.com/12">
HTML이란?
모두가 한 번쯤은 들어봐서 대충 알듯이 Hyper Text Markup Language.
웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어로 연산 기능 없이 단순히 컨텐츠를 표현만 해주는 언어이다.
웹 컨텐츠 중에서도 컨텐츠 구조를 지정하는 언어!
</blockquote>​

 

 

<pre>

입력받은 그대로 웹 브라우저에 출력

소스코드	웹 브라우저 출력 형태
<pre>     pre 내에서 작성 된 부분은...            띄어 쓰기 상관 없이!           그대로! 똑같이           출             력                됩                  니                   다.                      ^^ </pre>	pre 내에서 작성 된 부분은...            띄어 쓰기 상관 없이!           그대로! 똑같이           출             력                됩                  니                   다.                      ^^

 

 

HTML5 <pre> 실제 출력 형태

 

 

<hr>

문단 레벨에서 주제 분리

시각적으로 분리를 위한 선이 나타나나 표현적 마크업으로 사용하면 안 됨.😔

마침 요소 없이 단일 요소로 사용

 

목록

텍스트 컨텐츠를 설명하기 위해 자주 사용되는 구조

• 순서 있는 목록 <ol> : order list
  - 순서가 바뀌면 의미가 바뀌는 목록 정의
  - <li> 요소가 목록 아이템을 순서대로 정의
• 순서 없는 목록 <ul> : unolder list
  - <li> 요소가 목록 아이템을 정의. 목록 아이템을 말머리 기호로 나타냄
• 정의 목록 <dl> : definition list
  - 정의 용어 <dt> : definition term 
  - 정의 설명 <dd> : definition description
  - 사전식 정의로 정의 정의 용어(제목)와 정의 설명(내용)의 쌍으로 이루어짐
  - 하나의 용어에 여러 설명이 올 수 있음
  
  
  

순서 있는 목록 ex)

<ol>
    <li>물을 끓인다.</li>
    <li>스프를 넣는다.</li>
    <li>면을 넣어 익힌다.</li>
    <li>계란을 푼다.</li>
    ...
</ol>

 

순서 없는 목록 ex)

<ul>
    <li>책 읽기</li>
    <li>운동하기</li>
    <li>청소하기</li>
    <li>HTML5 공부하기</li>
    ...
</ul>

 

정의 목록 ex)

<dl>
    <dt>저자
    <dd>초코
    <dd>뭉치
    <dt>편집자
    <dd>뽀삐    
    ...
</dl>

 

 

 

내용은 모두 개인 공부 기록 용이기에 부족한 부분이나 내용상 오류가 있을 수도 있습니다.
참고용으로 보시기 바랍니다.
혹 잘못된 내용이 있을 시 댓글 남겨주시면 수정하도록 하겠습니다.