단단히

Semantic(시맨틱) 요소 본문

HTML,CSS/개념 정리

Semantic(시맨틱) 요소

이게아닌데 2022. 7. 27. 12:15

HTML 코드를 작성하다 보면 각 요소에 맞는 CSS를 넣기 위해서 묶어주게 되는데, 이때 div요소를 많이 사용하게 된다.

많이 사용해도 상관은 없지만 혼동이 발생될 수 있다.

가령 <div id="header">, <footer id="footer">와 같이 사용하면, div가 많이 사용돼서 나중에는 짝을 찾느라 많은 시간을 소요하게 된다. 그래서 추가된 요소, 시맨틱 요소( <header> , <footer>.. )이다. 

 

/*시맨틱 요소를 사용하지 않고 
div요소를 적용했을 때 코드이다.*/

<body>
 <div id="header">
 </div>
 <div id="main">
 </div>
 <div id="etc">
 </div>
 <div id="footer">
 </div> 
</body>
/*semantic 요소를 적용했을 때*/

<body>
 <header id="header">
 </header>
 <main id="main">
 </main>
 <aside id="aside">
 </aside>
 <footer id="footer">
 </footer> 
</body>

 

 

이처럼 시맨틱 요소를 사용하면 <!--  div#header -->와 같은 주석을 달지 않아도 된다. 혼동되는 것을 줄여준다.

이때 필요한 요소를 작업자가 임의 선정하여 적용하면 된다. 즉, div와 semantic요소를 적정하게 혼용하여 사용한다.

 

 

[semantic 요소를 적용한 코드]

 

<body>
 <div id="wrap">
 <header id="header">
 <h1>Welcome to PetStory.com</h1>
 </header>
 <main id="pets">
 <div id="cats">
 <h2>Cats</h2>
 Cats just like to sleep all day. So, ... </div>
 <div id="dogs">
 <h2>Dogs</h2>
 <p>Dogs are usually awake more than eats. We have ...</p>
 </div>
 </main>
 <aside id="etc">
 <p>PetStorz.com can serve all your pet needs</p>
 </aside>
 <footer id="footer">
 &copy; 2005. PetStorz.com<br>All trademarks and ... </footer>
 </div>
</body>

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

CSS 기초 사용법  (0) 2022.08.01
Form 요소  (0) 2022.07.29
Border 테두리 선  (0) 2022.07.25
Box Model [ contents / padding / border / margin ]  (0) 2022.07.23
HTML 기본 코드  (0) 2022.07.21
'HTML,CSS/개념 정리' Related Articles more
Comments