Do it! 프런트엔드 웹디자인 입문 요약-2

1. 미디어 쿼리

뷰포트

<meta> 태그

1픽셀 크기가 다른 것을 해소하기 위해 스마트폰 화면을 웹문서 너비에 맞추는 것이 아닌 문서의 콘텐츠를 스마트폰 너비에 맞춰 표시.

<meta name="viewport" content="width=device-width, initial-scale=1">

1. width=device-width : 문서 너비를 현재 기기 너비에 맞춤.
2. intial-scale=1 : 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정

<meta> 태그에서 뷰포트 설정시 사용하는 속성

• width : 뷰포트 너비. 기본값 device-width
• height : 뷰포트 높이. 기본값 device-height
• initial-scale : 초기 배율. 기본값 1 (1보다 작으면 축소, 크면 확대)
• user-scalable : 사용자가 확대/축소 가능 여부. 기본값 yes
• minimum-scale : 축소 가능 최소값(가로 기준). 기본값 0.25
• maxmum-scale : 확대 가능 최댓값. 기본값 5.0
• target-densityDpi : 고해상도 단말기 화면 해상도에 맞출 수 있도록 확대. 기본값 device-dpi

미디어 쿼리 구문

@media [only|not] 미디어 유형 [and 조건]* [and 조건]

@media screen and (max-width: 1260px)

• 미디어 유형: all, screen, print, tv, handheld, projection, aural, braille
• 조건: width, height, device-width, device-height, orientation(landscape, portrait), aspect-ratio, device-aspect-ratio, resolution, color, color-index
• 일반적으로 작은화면, 중간화면, 큰화면 정도로 구분 지음.
• 모바일 퍼스트: 모바일을 먼저 고려해 미디어 쿼리 작성. 모바일 기준에서 바꿀 부분만 태블릿/PC용으로 변경.
• 기기가 다양화 되었기 때문에 기기 중심으로 미디어 쿼리 중단점 나누는 것은 바람직 하지 않음.
• 중단점 정할 땐 콘텐츠 기준으로.
• css-tricks

미디어 쿼리 적용법

• 외부 CSS 파일로 정의

<link rel="stylesheet" media="미디어쿼리조건" href="css 파일 경로">

<style>
@import url(css 파일경로) 미디어 쿼리 조건
</style>

• 웹 문서에서 직접 정의
• 미디어 쿼리 확인: 개발자 도구 > 옵션(...) > Show media queries.
  • 파랑(최대너비기준), 초록(특정범위), 주황(최소너비기준)
  • 소스를 보고 싶은 영역 마우스 우클릭 Reveal in source code

반응형 내비게이션 만들기

 

2. 원페이지 사이트와 패럴랙스

패럴랙스

• 바닐라 자바스크립트
• JS ES6
• 리액트

3. 그리드

• 플렉스 박스
• CSS 그리드 레이아웃 모듈

4. 풀 스크린 랜딩 페이지

background-size: cover

• 슬라이드 쇼 효과
• 풀스크린 배경 동영상

5. 캐러셀

6. SVG 이미지

• 벡터이미지
• xml 기반 문서
• 애니메이션이나 CSS3 효과 적용 가능
• 로고, 아이콘, 데이터 시각화
• 직접 삽입 후 여러가지 효과 적용

7. 타이포

• 상대크기 em : 부모 요소 크기 기준 배수. 자식 요소 크기는 계속 곱해지는 문제점이 있음.
• em 개선 rem(Root Em): 루트 기준으로 배수. 배수가 중첩되지 않음. 지원하지 않는 브라우저는 px크기 병기
• 줄바꿈 유지하면서 글씨크기를 줄이는 기법.

웹폰트

• 가벼운 WOFF(Web Open Font Format) 파일 형식 추천
• WOFF 먼저 선언 후 TTF 파일을 선언해 호환성 해결
• 구글 웹폰트 등

8. 부트스트랩

 

출처: 고경희(2019), Do it! 프런트엔드 웹디자인 입문, 서울:이지스퍼블리싱(주)