mordern CSS responsive web

강정우·2022년 12월 20일
0

HTML, CSS

목록 보기
18/27
post-thumbnail

상속과 CSS 우선순위

상속

  • 상속 property 관련 공식 정보
  • 상속 가능 : text-align, line-height, color, font, visibility, opacity
  • 상속 불가 : width, height, margin, padding border, display, box-sizing, background, vertical-alignm position, z-index, overflow, float

inherit (강제 상속 설정)

cascading

  • 다양한 CSS property 적용과 상속으로 인해, 특정 요소에 어떤 property 값이 적용될지를 결정해야함
    이를 위해 각 property 설정 형태에 따른 우선순위를 정해놓고, 이에 기반해서 특정 요소에 적용될 property 값을 정함.
!important > inline style >id > class > tag

!import, inline style은 현엽에서 사용을 제한하기도 함!

CSS media query와 responsive layout

적응형 웹 VS 반응형 웹

  • 적응형 웹 : 사용자의 환경에 따라 다른 페이지를 보여줌
  • 반응형 웹 : 동일한 웹페이지지만 화면 사이즈에 따라 다르게 보여줌

view port개념

  • viewport는 화면상의 표시 영역을 의미하며, 휴대폰에서는 virtual viewport를 대부분 980px로 설정하여 마치 모니터 가로너비가 980px인 웹을 표시하도록 만들었다.
    이때 사용자가 보기편한 폰트는 12~16px이지만 다양한 크기를 가지 휴대폰의 virtual viewport를 980px로 해놓는다면, 웹페이지에 따라서는 폰트가 매우 작게 표시될 수 있다.

meta viewport

다음과 같이 viewport에 원하는 너비를 넣는다면 해당 너비에 맞춰 웹브라우저가 웹페이지를 표시한다.

<meata name="viewport" content="width=320" />

만약 없다면 980px로 보여준다. 다만 이런경우는 거의 없긴 하다.

다양한 디스플레이에 맞는 웹페이지

<meata name="viewport" content="width=device-width" />
  • 위와같이 설정하면 웹브라우저가 각 기기로부터 알맞는 너비값을 가져와 viewport를 설정하고, 이에 따라 웹페이지가 다양한 디바이스에 알맞게 보여지도록 알아서 설정된다.

계산법

  • PPI(pixels per inch), pixel dentisy, 또는 화소 밀도란, 특정 고간에 얼마나 많은 화소가 있는지 나타낸다.
  • 동일한 사이즈의 이미지 작성을 위해, 두배의 픽셀 사이즈에서 작업을 해야했다.
    • 40px에 보여질 사이즈의 이미지를 만들기 위해서는 80px이미지를 작업해야했다.
    • 이는 px 단위가 모호해지고 이럴경우 pixel density 200%라고 지정한다.
  • 따라서 일반적으로 divice-width는 디스플레이 해상도 너비/pixel density로 계산되고, 이를 웹브라우저가 인식하여, meta viewport 태그에 적용하는 것이다.

결론

즉, viewport는 반응형 웹페이지라면 반드시 설정을 해줘야하는 부분이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
property 설명 주 사용 예
width viewport 너비 (px단위) width=device-width
height viewport 높이 (px단위) height=device-height
initial-scale viewport 최기 배율 initial-scale=1.0
user-scale 사용자 웹페이지 확대 축소 가능 user-scale=no
maximun-scale, minimum-scale viewport 최대 배율 0~10 (default = 5.0) maximun-scale=2.0, minimum-scale=1.0

레이아웃과 미디어 쿼리

레이아웃

  • HTML에서 semantic tag를 사용해 웹페이지 구성요소를 정의하고 CSS를 통해 배열함

미디어 쿼리

  • CSS 미디어 쿼리를 사용하여 반응형 레이아웃을 구현할 수 있다
  • 여기서 media는 장치를 의미한다.
  • 미디어 쿼리란, 서로 다른 미디어 타입에 대응하기 위한 기능이다.
@media media-type and (media-feature-rule) {
	CSS
}

media-type (미디어 유형)

  • 통상 all 또는 screen
  • all, print, screen, speech가 있음

media-feature-rule (미디어 조건)

  • min-width / max-width, orientation정도가 많이 쓰임
    property 설명
    width viewport 너비 (통상 min-width, max-width 많이 사용)
    height viewport 높이 (px단위)
    device-width, device-height 디바이스 물리적 너비, 높이
    orientation 디바이스 방향(가로 : landscape, 세로 : portrait)
    aspect-ratio viewport의 가로세로비

논리연산자

  • and, not, only를 붙여서 복잡한 조건을 만들 수 있다.
    • and : 복수의 미디어 조건이 모두 참일 때
    • not : 미디어 조건이 거짓일 때
    • only : and조건에서 구형브라우저가 잘못 처리하는 것을 막기위해 사용
      ex) only screen and (max-width:300px)
    • , : 여러 미디어 조건을 컴마를 통해 나열할 수 있고 or 조건처럼 동작한다.

참고 해상도 (표준 X)

  • 320px~480px : 스마트 폰
  • 481px~768px : 태블릿
  • 769px~1024px : 저해상도 노트북
  • 1025px~1200px : 데스크탑
  • 1201px~ : 고해상도 데스크탑 및 tv
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글