Responsive Web

입문자를 위한 반응형 웹 기초 강의-유노코딩

반응형 웹

• 주요 키워드 : 가변성

em과 rem

브라우저나 기기화면에 반응하는 단위는 아님

• em : 부모 요소의 글꼴 크기

  • 내, 외부 여백 크기를 정할때는 자기 자신의 글자크기를 기준으로 함

• rem : 루트 요소의 글꼴 크기(기본값 16px)

• px : 절대 길이 단위인 px은 가변성이 없음

vw, vh, vmin, vmax

뷰포트 크기를 기반으로 계산하여 크기를 결정하는 가변 단위

• vw : 뷰포트 너비의 100분의 1

• vh : 뷰포트 높이의 100분의 1

• vmin : 뷰포트 너비와 높이 중 작은 쪽의 100분의 1

• vmax : 뷰포트 너비와 높이 중 큰 쪽의 100분의 1

가변 레이아웃

• % : 상대적이고 비례적인 단위

  • 보통 부모요소와의 상대적 크기를 지정할 때 사용

  • 너비와 높이 여백(부모요소의 너비에 따라) 뿐 아니라 글자 크기에도 사용

CSS함수, calc()

계산식의 결과를 속성값으로 지정할 수 있음

• ex) width: calc(100% - 100px)

미디어 쿼리

미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 물리적 장치

• 미디어 타입

• 조건에 대한 물음(쿼리)

@media screen(미디어_타입) and (max-width: 768px(조건에_대한_물음)) {
    화면의 너비가 768px 이하일 경우
    여기에 정의된 스타일 선언문을 추가 적용
}

가변 이미지

• 이미지 요소에도 상대 단위를 사용 할수 있음(브라우저는 이미지의 비율을 유지함)

• max-width max-height : 최대값 지정 min- 최소값 지정

• picture : HTML의 picture요소는 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소

가변 동영상

• 이미지 요소와 유사하게 처리 가능

• padding-top을 이용하여 종횡비를 맞추면 해결 가능

  • 정확한 비율을 유지하는 여백을 만들어 그 안에서만 동영상이 보여지게 만드는 기법

모듈화 디자인

• 반응형 웹 개발의 대세 : 페이지 만들기 -> 컴포넌트 만들기

• 모듈화 : 개별 컴포넌트를 하나의 조립 부품(모듈)으로 보고 작업하는 것