Semantic tag

heumheum2·2020년 5월 17일
0
post-thumbnail

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>태그에 idclass에 의미를 담아 표현했습니다. 그렇기에 <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/


profile
커피가 본체인 개발자 ☕️

0개의 댓글