[HTML] 태그 적재적소에 사용하기

wool·2022년 5월 2일
0

HTML

목록 보기
5/5

Intro.


html 미션 과제를 진행하다보니 계속 div로만 묶게 되어서 어떤 요소가 어떤 성질을 가지고 있는지 코드만 봐서는 바로 알아차리기가 힘들었다.

지금 당장에 짜는 코드는 매우 짧아서 어디에 어떤 요소가 있는지 알지만 다른 사람들과 협업시에는 주렁주렁 주석을 달아야지만 내용을 알 수 있는 지경이 될 것 같아서 이왕 배운 태그, 제대로 적재적소에 활용하는 방법도 알면 더 효율적으로 작업 할 수 있지 않을까 생각되어 글을 적으며 정리 해 보려 한다.

article


내용이 각기 독립적이고 홀로 설 수 있는 내용에 사용한다.

블로그, 글, 뉴스기사 등

section


내용이 서로 관계가 있을 경우에 사용.

주로 문서를 다른 주제로 구분 지을 때 사용한다.

💡 여러 개의 section을 article로 묶을 수 있고 마찬가지로 여러 개의 article을 section으로 묶을 수 있다.

div


특별한 내용 없이 오로지 내용을 묶은 역할만 한다.


메뉴바 등의 다른 링크를 모으는 구역이기 때문에 레이아웃을 설정 할 때 제일 상위로 사용한다.

text태그


  • h 제목을 쓸 때 되도록이면 h태그를 사용하여 요소가 제목임을 알린다.
  • sapn 제목은 아니지만 내용으로 들어가는 짧은 단어나 문장 등에 사용한다.
  • p 문단까지는 아니지만 내용으로 들어가는 요소에 사용한다.
  • pre 긴 문장으로 띄어쓰기나 줄바꿈이 들어가는 경우에 사용한다.
💡 text태그에 대한 내용은 개인적인 의견으로 절대적인 것이 아님

ending.


이제 페이지를 3개밖에 만들어 보지 않았는데 태그를 정리하면서 앞으로 페이지 레이아웃 짤 때 시간을 단축하게 될 듯 하다.

profile
허위 정보 발견 시 댓글로 남겨주시면 감사하겠습니다.

0개의 댓글