so woon!

tag (div, span, main, nav, header, footer, section, article, aside) 본문

HTML/개념정리

tag (div, span, main, nav, header, footer, section, article, aside)

xowoony 2022. 8. 27. 20:40

 태그(div) 
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 닫는 태그 필요
- 단순히 구획을 나눌때 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 없음

 태그(span) 
- 중요도 : 🔴🔴🔴🔴🔴
- 종류 : 닫는 태그 필요
- 단순히 구획을 나눌때 사용한다.
- 한 줄을 다 차지하지 않는다.
- 시멘틱 : 없음

 태그(main) 
- 중요도 : 🔴🔴🔴⚪⚪
- 종류 : 닫는 태그 필요
- 문서의 주된 내용을 담는데 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음

 태그(nav) 
- 중요도 : 🔴🔴🔴⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- nav(Navigator) 태그는 서로 연관있는 링크를 모아놓을 때 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음

 태그(header) 
- 중요도 : 🔴🔴🔴⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 상단 정보(로그인 폼, 검색창, 로고, 메뉴 등)를 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음

 태그(footer) 
- 중요도 : 🔴🔴🔴⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 하단 정보(저작권, 사업자정보, 연락처 등)를 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음

 태그(section) 
- 중요도 : 🔴⚪⚪⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 사이트에서 분리하면 의미가 없어지는 내용을 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음

 태그(article) 
- 중요도 : 🔴⚪⚪⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 사이트에서 분리해도 의미가 있는 내용을 담는다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음

태그(aside) 
- 중요도 : 🔴⚪⚪⚪⚪
- 종류 : 닫는 태그 필요
- 구획을 나눌때 사용한다.
- 문서의 부수적인 내용을 담는데 사용한다.
- 기본적으로 문서의 한 줄을 다 차지한다.
- 시멘틱 : 있음

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>문서의 제목</title>
    </head>
    <body>
        <div>
            <a>Hello</a>
        </div>
        <div>
            <a>World</a>
        </div>
        <br>
        <span>                               
            <a>Hello</a>
        </span>
        <span>
            <a>World</a>
        </span>
    </body>
</html>
===============실행결과================

 
 
 
 
<div와 span의 차이점>
 
<div></div> 는 엔터기능이 있다. 다음줄로 넘어간다.
<span></span>은 엔터 기능이 없으며 띄어쓰기가 된다. (아무 의미 없는 텍스트에 주로 많이 쓴다.)

 

저작자표시 비영리 변경금지

'HTML > 개념정리' 카테고리의 다른 글

tag (ol, ul, li)  (0) 2022.08.27
tag (input)  (0) 2022.08.27
경로 (Path)  (0) 2022.08.27
tag (iframe)  (0) 2022.08.25
tag (img)  (0) 2022.08.25
'HTML/개념정리' Related Articles more
Comments