Nuke Olaf - Log Store
HTML - Semantic Elements 시멘틱 태그(의미요소)란? 본문
1. semantic : 의미의, 의미론적인
Semantic Elements 란, 어떤 의미를 담고있는 요소라고 생각할 수 있겠다.
HTML 에서 말하는 시멘틱 태그란, 그 자체로 의미를 가지고 있는 요소를 가리킨다.
즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해주는 요소를 의미한다.
div 요소나 span 요소등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있었다.
그러나 table 요소는 의미요소로서, 코드를 보지 않아도 해당 요소가 표를 만드는데 사용되는 요소라는 것을 바로 알 수 있다.
* <div> 태그 : Division 의 약자로, 레이아웃을 나누는데 주로 쓰인다.
다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며,
주로 CSS와 연동하여 쓰인다.
<html>
<body>
<div style="background-color:cyan">구역1</div>
<div style="width:100px; height:100px; background-color:#CF0">구역2</div>
</body>
</html>
* <span> 태그 : <div> 태그처럼 특별한 기능을 갖고 있지 않고, CSS 와 함께 쓰인다.
<div> 태그와 차이점은 display 속성이 block 이 아닌, inline 이라는 점이다.
CSS display 속성은 요소를 어떻게 보여줄지를 결정하는 속성이다.
<html>
<body>
<span style="background-color:red">span1</span>
<span style="background-color:blue">span2</span>
<span style="background-color:green">span3</span>
</body>
</html>
2. 시멘틱 태그를 사용하는 이유
시맨틱 HTML 작성의 이점은 모든 웹 페이지의 추진 목표, 즉 의사 소통의 욕구에서 비롯됩니다. 문서에 의미 태그를 추가하면 해당 문서에 대한 추가 정보를 제공하여 통신에 도움이됩니다. 특히 시맨틱 태그는 페이지와 내용의 의미를 브라우저에 명확하게 보여줍니다. 이 명확성은 검색 엔진과도 통신되므로 올바른 쿼리에 적합한 페이지가 제공됩니다.
시맨틱 HTML 태그는 페이지에서 보는 것 이상의 태그 컨텐츠에 대한 정보를 제공합니다. <code> 태그로 묶인 텍스트는 브라우저에서 즉시 일종의 코딩 언어로 인식됩니다. 브라우저는 해당 코드를 렌더링하는 대신 기사 나 온라인 자습서를 위해 해당 텍스트를 코드의 예로 사용한다는 것을 이해합니다.
시맨틱 태그를 사용하면 컨텐츠를 스타일링 할 때 훨씬 더 많은 고리를 얻을 수 있습니다. 아마도 오늘날에는 코드 샘플을 기본 브라우저 스타일로 표시하는 것을 선호하지만 내일은 회색 배경색으로 호출 할 수 있습니다. 나중에도 샘플에 사용할 정확한 단일 간격 글꼴 모음 또는 글꼴 스택 을 정의 할 수 있습니다 . 시맨틱 마크 업 및 스마트하게 적용된 CSS를 사용하여 이러한 모든 작업을 쉽게 수행 할 수 있습니다.
https://www.lifewire.com/why-use-semantic-html-3468271
참고 사이트>>>
'Language > [PHP]' 카테고리의 다른 글
| PhpStorm 에서 Remote Host 의 파일을 다운로드 할 수 없다고 할때 (0) | 2020.01.29 |
|---|---|
| CSS - 그림위에 글자넣기 (0) | 2020.01.29 |
| HTML 이란 무엇인가? (0) | 2020.01.28 |
| PHP 와 MySQL 연동 확인하기 (0) | 2020.01.27 |
| PhpStorm 과 MySQL 연동하기 (0) | 2020.01.27 |
