시맨틱 태그는 브라우저 , 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할은 한다.
HTML 태그는 non-semantic , semantic 요소로 구분 할 수 있다.
non-semantic 요소 : div, span 등 이 있으며 이들 태그는 contents에 대한 어떤 설명도 하지 않는다.
semantic 요소: form, table, img 등이 있으며 contents의 의미를 명확히 설명한다.
<header>
: 문서나 섹션의 머릿말을 의미하고, 한 문서에 여러개 사용가능하다.
<main>
: 해당 페이지의 본문을 의미하여 페이지 마다 하나만 존재해야 한다.
<footer>
: 문서나 섹션의 꼬릿말을 의미하고, 한 문서에 여러개 사용할 수 있다. 보통 작성자의 정보 등이 들어간다.
<aside>
: 본문과 직접적인 연관성이 없는 분리된 내용을 의미한다. 주로 사이드바에 사용된다.
<nav>
: 네비게이션을 의미한다.
<section>
, <article>
: 같은 성경의 내용 묶음을 의미한다. <main>
과 달리 조금 더 자유로운 의미로 사용되어 <section>
안에 <article>
을 작성할 수 있고 반대로도 가능 하다.
출처
https://velog.io/@ground4ekd/semantic-web
https://poiemaweb.com/html5-semantic-web
important
: 9999999999(무한대) 점 - 가장 우선으로 선언.
inline 선언
: 1000점.
ID 선택자
: 100점.
Class 선택자
: 10점. (가상클래스 선택자(:)도 포함된다.)
부정 선택자(not())
: 10점. (부정 선택자 내에는 어떤 선택자가 있어도 부정 하기 때문에 점수계산에 포함 하지않는다.)
태그 선택자
, 가상요소선택자(::)
: 1점.
전체 선택자(*)
:0점.
상속
: 점수를 별도로 계산하지 않음.
inline 선언과 !important 는 사용을 권장하지 않음.
index.html
<body>
<div id="hello" class="hello">Hello world!</div>
</body>
style.css
.hello{ /* 10점 */
color: red;
}
#hello{ /* 100점 (우선 적용된다.)*/
color: blue;
}
style.css
/* 점수가 같은경우 */
.hello{ /* 10점 */
color: red;
}
.hello{ /* 10점 - 더 나중에 해석된 선언이 우선 적용 한다. */
color: green;
}