HTML Grouping content

sections 태그들보단 조금 더 작은 범위의 묶음인 Grouping content 태그들에 대해서 알아보자

 

 

<ol>,<ul>,<li>  태그

목록을 만들때 사용하는 태그

주의사항

• li요소는 ol(순서 order), ul요소(순서가없는 unorder) 와 반드시 함께 사용해야 된다. 
• 목록을 표현할때는 최소 3개이상이 될 때 사용을 권장한다.
• ul과 ol안에는 직계 자식은 무조건 li이어야된다. 절대 제목같은것<heading..>을 넣을려고 ul,ol 다음 자식요소로 집어넣으면 안된다.
• li의 자식요소들의 어떠한 요소들이 와도 상관이 없다.

직계자식이란? 

• 바로 자기자신의 바로 위의 부모요소를 의미한다.

<ol>
    <li>순서가 존재하는 목록</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
 </ol>

<ul>
    <li>순서가 존재하지 않는 목록</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- 실제 사용 예시 코드 -->
<!-- 네비게이션을 나타낼 때 자주 사용하는 Markup -->
<nav>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>

 

<dl>, <dt>, <dd> 태그

사전처럼 어떠한 것을 정의할 때 사용하는 목록

주의사항

• <dl>태그 안에는 직계자식으로 <dt> <dd> 만을 가지는 것을 권장 하지만 ul,ol은 권장이 아니라 직계자식으로 무조건 <li>
• 하지만 예외사항으로 <div>태그를 직계자식으로 사용할 수 있다. 스타일에 대한 필요성을 위해 dt dd 묶음을 만들고 div로 묶은 후 사용은 가능하다.

  <dl>
    <div>
      <dt>
      <dd>

      </dd>
      </dt>
    </div>
  </dl>

 

<div> 태그

레이아웃을 나눌 때 사용하는 태그

• <div>태그는 컨텐츠 형태를 변형시키기는 않지만 하위에 있는 여러 요소를 묶어 스타일을 변경할 때 사용
• 기본적으로 article,section과 같은 역할을 하지만 div태그는 아무런 의미가 존재하지 않는다.  
• 어떠한 의미를 가지고 있지 않기 때문에 자주 빈번하게 사용하는 것을 권장하지 않는다.
• inline단위태그 아니고 block단위 태그이기에 브라우저의 한 공간을 차지하게 된다. 

<figure>, <figcaption> 태그

캡션(자막, 설명)이 있는 이미지를 접할 때 사용하는 그룹 태그

• 굳이 따로 사용할 꺼면 사용하지 않아도 된다. 거의 한 몸처럼 사용하는 것을 권장한다.
• <img>태그도 함께 사용을 하는 태그이다. 
• <img> alt는 이미지를 설명하기 위해 사용하는 속성이며, 반드시 alt속성은 존재해야 된다.

<figure>
    <img src="" alt="">
    <figcaption></figcaption>
  </figure>

 

<p> 태그

주의사항

단락을 나타내는 태그이며, 하나의 완결된 문단을 의미

• <p>안에 내용이 완결이 되어야 되는 태그이기 때문에 <p> 안에 또 다른 <p>를 사용 할 필요가 없다. 같이 사용할 경우 자동으로 줄바꿈이 된다
•  block단위 태그이기 때문이다. 그래서 <br>줄바꿈 태그를 사용하는 것을 권장한다.
• HTML은 공백을 무시하는 성질이 존재하기 때문에 <p>태그 안에서 아무리 공백을 바꿔도 무시되서 브라우저에 나타난다.

<pre> 태그

HTML에 작성한 내용 그대로 브라우저에 나타난다. 주로 컴퓨터 코드를 표현할때 사용

 

<main> 태그

문서의 주요 콘텐츠를 나타낼 때 사용하는 태그

• 최근에 나온 태그이기 때문에 지원하지 않는 브라우저들이 존재한다. 특히 IE는 지원이 아예 되지 않는다. (사용을 하지 않는 개발자분들도 계신다.)
• <main> 안에 들어간 내용은 문서내에서 유일한 내용이어야 된다.
• 주로 홈페이지를 나눌때 header, main, footer영역으로 나누게 된다.
• main태그는 sections요소들이 아니라는 것에 유의하자

<hr> 태그

원래는 가로줄을 표현하기 위해 사용했으나 HTML5에 오면서 의미가 생긴 요소

• 이야기에서의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 구별을 위해 사용한다.
• <p>문단을 나타내기 때문에 도중에 <hr>를  사용할 수 없다 → 웹 표준에 어긋난 행동이다.

 

만약 HTML문서 내에서 <>같은 내용을 적고 싶으면 어떻게 해야될까?

"< >"와 같은 HTML태그 예약어를 텍스트처럼 사용하기 위해서 Entity라는 것을 사용해야된다.

만약 그냥 사용할 경우 사람은 쉽게 알아 볼 수 있으나 컴퓨터의 관점으로 보았을 때는 태그인지 정말 그냥 단어인지를 구분하기 힘들것이다. 

 

Entity란?

• HTML안에서 예약어(태그)로 사용되고 있는 문자를 텍스트로 대체하기 위한 용도로 사용
• 아래의 링크를 참고하여 개발을 하도록 하자

 

Entity종류

https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

HTML Standard