HTML 4일차

4 분 소요

반응형 웹 사이트

반응형 웹

반응형 웹 디자인

다양한 기기로 웹 사이트에 접속 ⇒ 화면의 크기가 달라서 보기 어려움
화면 요소들을 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꿔 사이트 구현
장점
- 모든 스마트 기기에서 접속 가능
- 가로 모드에 맞추어 레이아웃 변경 가능
- 사이트 유지 / 관리 용이
단점
- 하위 버전의 브라우저 사용자 고려할 수 없음

뷰포트(viewport)

접속한 기기 화면에 맞추어 확대하거나 축소해서 표시

지정방법 : <head> 태그 안에 작성

속성	설명	사용 가능한 값	기본 값
width	뷰포트 너비	device-width or 크기	브라우저 기본 값
height	뷰포트 높이	device-height or 크기	브라우저 기본 값
user-scalable	확대/축소 가능 여부	yes or no	yes
initial-scale	초기 확대 / 축소 값	1 ~ 10	1
minimum-scale	최소 확대 / 축소 값	0 ~ 10	0.25
maximun-scale	최대 확대 / 축소 값	0 ~ 10	1.6

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

가변 그리드 레이아웃

고정 그리드 시스템
- 화면을 몇 개의 칼럼으로 나누어 요소들을 배치하는 것
- 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있음
- 주로 960픽셀 12칼럼 그리드 사용
가변 그리드 레이아웃
- 사이트의 레이아웃을 백분율로 지정
- 너비 값이 줄어들면 실제 콘텐츠 확인하기 불편해 간결한 디자인 사용하는 것이 좋음
가변 그리드 레이아웃 만들기
- 전체를 감싸는 요소 확인하고 각 요소의 너비 값 계산하기
- (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100
- 소수점 3~4자리 까지 표시
- 패딩, 마진 값도 계산해서 적용

가변 요소

가변 글꼴
- em : 대문자 M의 너비를 1em으로 지정한 것. 1em = 16px
  - 브라우저 창에 표시될 때는 해당 기기에 맞춘 픽셀 크기로 계산되어 표시
  - 부모 요소를 기준으로 하기 때문에 부모 요소의 크기에 따라 자식 요소의 글자 크기가 바뀜
- rem : 처음부터 기본 크기를 지정하기 때문에 중간에 기본값이 바뀌지 않음. r === root

가변 이미지

이미지를 감싸고 있는 부모 요소 크기를 따라갈 수 있도록 max-width: 100%
<img> 태그에 srcset 속성 지정 ⇒ 화면 너비나 픽셀 밀도에 따라 고해상도 이미지 파일 지정 가능

화면 해상도나 너비에 따라 다른 이미지 표현

      <picture>
          <source srcset="images/apple-large.png" media="(min-width:1024px)">
          <source srcset="images/apple-medium.png" media="(min-width:768px)">
          <source srcset="images/apple-small.png" media="(min-width:320px)">
          <img src="images/apple.png" alt="apple" style="width:100%">
      </picture>

미디어 쿼리

미디어 쿼리란?

CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 함

@media 속성으로 특정 미디어에 어떤 CSS를 적용할 것인지 지정

@media screen and (min-width:200px) and (max-width:360px) { }

연산자

연산자	설명
and	조건 추가
,(쉼표)	동일한 스타일 유형을 사용할 미디어의 유형과 조건 추가
only	미디어 쿼리를 지원하는 웹 브라우저에만 조건 인식
not	not 다음 지정하는 미디어 유형 제외

조건

웹 문서의 가로, 세로

가로, 세로 값	설명
width, height	웹 페이지의 가로, 세로
min-width, min-height	최소 너비 / 높이
max-width, max-height	최대 너비 / 높이(이하일 때 적용)

단말기 가로, 세로

단말기 해상도와 실제 브라우저 너비 다름

속성	설명
device-width, device-height	단말기 가로, 세로
min-device-width, min-device-height	단말기 최소 너비 / 높이
max-device-width, max-device-height	단말기 최대 너비 / 높이

단말기 크기와 뷰포트 크기 통일하기 위해 뷰포트 지정할 때 width="device-width" 로 놓고 사용

화면 회전

orientation 속성으로 화면 방향 체크

속성	설명
orientation: portrait	단말기 세로 방향
orientation: landscape	단말기 가로 방향

화면 비율 - 브라우저 화면의 너비, 높이

속성	설명
aspect-ratio	화면 비율(width / height)
min-aspect-ratio	최소 화면 비율
max-aspect-ratio	최대 화면 비율

단말기 물리적 화면 비율

속성	설명
device-aspect-ratio	단말기 화면 비율(width / height)
min-device-aspect-ratio	단말기 최소 화면 비율
max-device-aspect-ratio	단말기 최대 화면 비율

색상당 비트 수

2의 제곱수 ⇒ color:1 이면 2가지 색상, color:3 이면 8가지

속성	설명
color	비트 수
min-color	최소 비트 수
max-color	최대 비트 수

미디어 쿼리 중단점
- 서로 다른 CSS를 적용할 화면 크기
- 모바일 퍼스트 : 모바일 기기의 CSS를 먼저 만든 후 다른 기기로 확장해 나감

미디어 쿼리 적용

외부 CSS 파일 연결
- <link> 태그
  - <link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
  - 속성 순서는 상관 없음
- @import 구문
  - @import url(css 파일 경로) 미디어 쿼리 조건
- CSS 파일이 많고 대규모 사이트를 개발할 때는 <link> 태그를 주로 사용 ⇒ 안정적이고 빠름
웹 문서에서 직접 정의
- <style media=”미디어 쿼리 조건”> 스타일 규칙 </style>
- <style @media 미디어 쿼리 조건 { 스타일 규칙 } </style>

플렉스 박스 레이아웃

플렉스 박스 레이아웃과 기본 속성

그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것. 화면 크기에 따라 레이아웃의 배치나 크기를 조절해야 할 때 편리하게 사용할 수 있음
display - 플렉스 컨테이너 지정
- display: flex - 박스 레벨 요소로 정의
- display: inline-flex - 인라인 레벨 요소로 정의
- 배치하려는 요소들을 감싸는 부모 요소를 만들고 그 부모 요소를 플렉스 컨테이너로 변환

flex-direction - 플렉스 방향 지정

속성	설명
row	주축을 가로로 교차축을 세로로 지정. 플렉스 항목은 왼쪽에서 오른쪽으로 배치
row-inverse	주축을 가로로 교차축을 세로로 지정. 플렉스 항목은 오른쪽에서 왼쪽으로 배치
column	주축을 세로로 교차축을 가로로 지정. 플렉스 항목은 위에서 아래로
column-inverse	주축을 세로로 교차축을 가로로 지정. 플렉스 항목은 아래에서 위로

flex-wrap - 플렉스 항목을 한 줄 또는 여러 줄로 배치

속성	설명
no-wrap	한 줄에 표시. 기본값
wrap	여러 줄에 표시
wrap-reverse	여러 줄에 표시하되 기존 방향과 반대

flex-flow - 플렉스 방향과 여러 줄의 배치 한번에 지정
- flex-flow : 플렉스방향 플렉스줄배치
order - 플렉스 항목의 배치 순서 변경
- order: 숫자

flex - 플렉스 항목 크기 조절

속성	설명
flex-grow	너비 얼마나 늘일지 숫자로 지정
flex-shrink	너비 얼마나 줄일지 숫자로 지정
flex-basis	플렉스 항목의 기본 크기 지정. auto 일 경우 플렉스 항목의 너비 값
initial	항목의 width/height 값에 의해 크기 결정. 공간이 부족하면 최소 크기까지 줄임
auto	항목의 width/height 값에 의해 크기 결정. 공간에 따라 늘이거나 줄임

플렉스 박스 항목 배치

justify-content - 주축 기준의 배치 방법

속성	값
flex-start	주축 시작점 기준으로 배치
flex-end	주축 끝점 기준으로 배치
center	주축 중앙 기준
space-between	처음과 마지막 양 끝에 배치한 후 중앙 항목 같은 간격으로 배치
space-around	모든 항목 같은 간격으로 배치

align-items / align-self - 교차축 기준 배치

속성	값
stretch	플렉스 항목 확장해 교차축 꽉 채움. 기본값
flex-start	교차축 시작점 기준 배치
flex-end	교차축 끝점 기준 배치
center	교차축 중앙 기준 배치
baseline	시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점에 배치. 그 글자의 기준선과 다른 항목의 기준선을 맞추어 배치

align-content - 여러 줄일 때의 배치 방법
- justify-content 와 같은 속성 값 사용

Twitter Facebook LinkedIn

Taeyoung