Semantic Tag (시맨틱 태그)
HTMl을 공부하다가 <article>, <section> 등 <div>를 주로 사용하던 저에겐 생소한 태그였습니다. 이러한 태그들은 HTML5에서 처음 도입이 되었습니다.
Semantic은 의미의, 의미론의라고 번역됩니다. 즉, 의미있는 태그가 되겠네요.
<header>
<nav></nav>
</header>
<main>
<article>
<section></section>
</article>
</main>
<aside></aside>
<footer></footer>위의 태그들이 Semantic Tag들 입니다. 개발자모드(F12)에서 자주 보이는 태그들을 나열했고, 이 외에 다른 태그들도 많이 있으니 여기를 참고해주시면 감사하겠습니다.
<header>머릿말<footer>꼬릿말<main>본문<nav>목록<aside>측면<article>- 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
<section>- 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용
이전에는 전부 <div>태그에 id나 class에 의미를 담아 표현했습니다. 그렇기에 <div> 그 자체에는 의미가 없어 non-semantic이라고 불려집니다.
Semantic Tag들을 사용하면 아래와 같은 장점이 있습니다.
- 개발자에게 코드의 가독성을 높여줍니다.
- 검색엔진이 페이지의 키워드를 잘가져갑니다.
Media query(미디어 쿼리)
다양한 종류의 디바이스들의 등장으로, 각기 다른 해상도와 화면크기를 해당 디바이스 조건에 맞게 웹사이트를 보여줘야합니다.
css3 모듈 중 하나인 Media query는 디바이스 사이즈에 따라 화면을 다르게 표현하는 방식입니다.
@media only all and(조건문){
css code
}@media는 미디어 쿼리의 시작을 의미합니다.
only는 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지하는 키워드입니다. 생략이 가능합니다.
all 모든 디바이스를 대상으로 합니다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all이 됩니다. 아래는 다른 미디어 타입입니다.
- screen 컴퓨터 화면을 대상으로 합니다.
- print 인쇄 미리보기, 또는 실제 인쇄매체를 대상으로 합니다.
- orientation 디바이스의 방향을 나타냅니다.
- portrait(세로로 길게), landscape(가로로 길게)
and And 연산자 역할을 수행합니다.
,(쉼표) Or 연산자 역할을 수행합니다.
반응형 미디어쿼리 예시
/* All Device */
모든 해상도를 위한 공통 코드를 작성한다.
모든 해상도에서 이 코드가 실행됩니다.
/* Mobile Device */
@media all and (max-width:767px) {
사용자 해상도가 767px 이하일 때
}
또는 미디어 쿼리를 지원하지 않는 모바일 기기를 위해
미디어 쿼리 구문을 사용하지 않는 경우도 있습니다.
/* Tablet & Desktop Device */
@media all and (min-width:768px) {
사용자 해상도가 768px 이상일 때
}
/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때
}
/* Desktop Device */
@media all and (min-width:1025px) {
사용자 해상도가 1025px 이상일 때
}위의 예시처럼만 해줘도 대부분의 디바이스에서는 호환이 될 것 같네요!
참고> http://ui-lab.co.kr/media-query/
