14일차 - 시멘틱마크업

in Study-siotz on TIL


추후에 정리가 필요한 문서입니다!!!

14일차

1. 단위

1. 고정 단위

px : pixel, 고정단위중엔 가장 많이 쓰임 (1px = 0.75pt)

pt : point, 일반 문서에서 사용되는 단위 pt = px * 0.75

pc : picas(파이카) 1pc = 12pt

ppi에 따라서 모니터에서 출력되는 1px의 크기가 달라진다. 각각의 모니터마다 각각의 ppi를 갖고 있기 때문에 각각 표현되는 1px의 크기가 다르다.

2. 상대 단위

% : 백분율 단위의 상대 단위입니다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정합니다.

em

  • 배수 단위(1배, 2배..)로 상대 단위입니다. 주위해야할 점은 em이 사용된 요소의 폰트 크기를 기준으로 삼는다는 점입니다.(부모의 값이 아님. 부모의 값이 기준이 된 것은 상속되어서 그렇게 보이는 것임.)
<html>
  <head>
    <style>
      body {
        font-size: 14px;
      }
      div {
        /* padding을 먼저 선언하더라도 폰트사이즈를 갖고있기 때문에 
				아래와 같이 설정된다.
				폰트사이즈 선언을 완전히 지우면 body의  폰트사이즈를 사용한다.  */
        font-size: 1.2em; /* 14px * 1.2 = 16.8px */
        padding: 2em; /* 16.8px * 2 = 33.6px */
      }
    </style>
  </head>
  <body>
    <div>Font size: 1.2em → 14px * 1.2 = 16.8px</div>
  </body>
</html>

rem

  • 최상위 요소(html)의 사이즈를 기준으로 삼습니다.
  • html의 기본 font-size는 16px입니다.

참고 링크

[반응형웹] em과 rem의 적절한 사용 방법

ex

  • ex 단위의 정의는 “현재 폰트의 x-높이값 또는 em의 절반 값”이라고 할 수 있습니다. x-높이값은 소문자 x의 높이값이기도 합니다.
  • 이 단위는 타이포그래픽에서 세밀한 조정을 할 때 많이 사용합니다. 예를 들어, 위첨자 태그인 sup 에게 position을 relative로 하고 bottom 값을 1ex라고 하면 위로 올릴 수 있습니다. 아래첨자 역시 비슷한 방법으로 아래로 내릴 수 있습니다.

ch : ch 단위, 또는 글꼴 단위는 제로 문자인 0의 너비값의 “고급 척도”로 정의됩니다. 기본 컨셉은 monospace 폰트의 N 의 너비값을 부여 받았다는 것이며, width: 40ch;는 40개의 문자열을 포함하고 있다는 뜻입니다.

3. 뷰포트 단위

vh, vw

반응형 웹디자인을 위해 상대적인 단위를 쓰는 경우가 많은데, 퍼센트 값에 의존하는 경향이 있습니다. 하지만, 가까운 부모 요소를 기준으로한 상대 값이 아닌 브라우저의 크기를 기준으로 한 상대 값이 필요한 경우도 많겠죠. 바로 그럴때 사용할 수 있는 단위입니다.

  • 1vw : viewport 너비의 1/100
  • 1vh : viewport 높이의 1/100

예를 들어 viewport 너비가 1000px, 높이가 600px인 경우,

  • 1vw : viewport 너비 1000px의 1%인 10px
  • 1vh : viewport 높이 600px의 1%인 6px

vmin, vmax

vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vmin과 vmax는 너비 혹은 높이의 최대값 혹은 최소값을 이용할 수 있습니다.

  • vmin : viewport 너비 또는 높이 중 작은 쪽의 1/100
  • vmax : viewport 너비 또는 높이 중 큰 쪽의 1/100

예를 들어 viewport 너비가 1000px, 높이가 600px인 경우,

  • vmin : viewport 높이 600px의 1%인 6px
  • vmax : viewport 너비 1000px의 1%인 10px

2. 미디어쿼리

1. 반응형 웹(RWD) vs 적응형 웹(AWD)

2. 반응형 웹

Viewport meta tag

모바일 브라우저에서 viewport가 중요한 이유는 모바일 브라우저가 웹 페이지를 브라우징 하는 특징에 있습니다. 현재 스마트폰 브라우저는 모바일 환경에서도 데스크탑 환경처럼 웹 페이지 전체를 자연스럽게 브라우징 할 수 있도록 풀브라우징을 지원합니다. 즉, (풀브라우징이란)데스크톱 화면 너비(기기마다 다르지만 일반적으로 약 980px)에서 웹페이지를 렌더링한 다음 모바일 화면에서 그려주는데, 이때 평균 980px인 웹 페이지를 축소시켜 작은 모바일 화면 안에 한번에 담길 수 있도록 꼬깃꼬깃 집어넣는다는 뜻입니다. 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려하니 전체적인 페이지의 배율이 조정됩니다. 결과적으로 모바일 화면에 맞도록 전체적인 페이지가 축소되어 보이지만 페이지의 컨텐츠는 배율축소가 발생해 가독성이 떨어지게 되죠. 따라서 viewport를 이용하여 디바이스의 특성과 디바이스의 화면 크기 등을 고려하여 각종 디바이스 사용자에게 최적화된 웹페이지를 제공해야합니다. 본래 meta tag는 브라우저 혹은 검색엔진최적화(SEO)를 위해 검색엔진에게 메타데이터를 전달하기 위해 사용되는데, viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공합니다.

@Media : 미디어쿼리

@media을 사용하여 미디어 별로 style을 지정하는 것을 미디어쿼리라고 합니다. 디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있습니다.

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Media Type

allauralbraillehandheldprintprojectionscreenttytvembossed

위와 같은 타입들이 있지만 보통은 기본값인 all을 사용하며, all로 지정시 미디어타입은 생략할 수 있습니다.

expressions

표현식이 참일 때 미디어 쿼리 속 CSS 코드가 실행됩니다. 표현식으로 사용되는 속성들은 아래와 같습니다.

width

width : 고정된 브라우저(뷰포트) 너비 값 지정.

@media (width: 700px) {
  /* 뷰포트가 700px 인 디바이스에서만 실행 */
}

min-width : 최소 뷰포트 너비 값.

@media (min-width: 1024px) {
  /* 뷰포트가 최소 1024px 인 디바이스에서만 실행 */
  /* 1024px 이상 디바이스에서만 실행 */
}

max-width : 최대 뷰포트 너비 값.

@media (max-width: 767px) {
  /* 뷰포트가 최대 767px 인 디바이스에서만 실행 */
  /* 767px 이하 디바이스에서만 실행 */
}

height

height : 뷰포트 높이.

min-height : 최소 뷰포트 높이.

max-height : 최대 뷰포트 높이.

NOTE: 잘 지정되지 않음.

device-width & device-height

디바이스의 물리적 너비와 높이를 기준으로 합니다. 단, 이 방법은 그다지 권장되지 않습니다.

뷰포트 기준과 디바이스의 물리적 너비라는 기준의 차이점은 미세하지만 매우 중요합니다. min-width는 브라우저 창 크기를 기반으로 하는 반면, min-device-width는 화면 크기를 기반으로 합니다.

불행히도, 레거시 Android 브라우저를 비롯한 일부 브라우저는 기기 너비를 제대로 보고하지 못하며, 예상 뷰포트 너비가 아니라 기기 픽셀 단위로 화면 크기를 보고합니다. 때문에 min-device-width를 사용할 경우에는, 창 크기 조정을 허용하는 데스크톱 또는 기타 기기에서 콘텐츠를 조정할 수 없습니다. 왜냐하면 해당 쿼리는 브라우저 창 크기가 아닌 실제 기기 크기를 기반으로 하기 때문입니다.

데스크탑일 경우 모니터 자체의 크기가 정해진 크기여야만 보이기 때문에..

orientation

portrait : 높이가 너비보다 크거나 같을 때. (세로 모드)

landscape : 너비가 높이보다 큰 브라우저. (가로 모드)

device-aspect-ratio

디바이스의 물리적 width/height 비율을 조건으로 삼습니다. 출력 디바이스의 aspect 비를 지정 가능합니다. 이 값은 슬래쉬（”/”）로 구분된 두개의 정수식으로 표현되며 (너비) / (높이)와 같이 지정할 수 있습니다.

@media screen and (device-aspect-ratio: 16/9) {
  /* 와이드 스크린 */
}

3. SASS

Syntactically Awesome Style Sheet