게으른 나에게

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 12 반응형 웹과 미디어 쿼리" 본문

My Study/서적 공부

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 12 반응형 웹과 미디어 쿼리"

handbefore 2024. 7. 28. 00:58

12-1 반응형 웹 알아보기

반응형 웹 디자인

스마트폰, 태블릿, 스마트tv 등 브라우저 환경이 다양하게 바뀔 때 기존 웹 사이트 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트 구현.

 

모바일 기기를 위한 뷰포트

뷰포트: 스마트폰 화면에서 실제 내용이 표시되는 영역.

뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시 가능.

 

뷰포트 지정하기

<meta>태그를 이용해 <head></head>태그 사이에 작성.

<meta name="viewport" content="속성1=값1, 속성2=값2, ...">

 

content 안에서 사용하는 뷰포트의 속성

종류 설명 사용 가능한 값 기본값
width 뷰포트 너비 device-width 또는 크기 브라우저 기본값
height 뷰포트 높이 device-height 또는 크기 브라우저 기본값
user-scalable 확대.축소 가능 여부 yes 또는 no
(yes는 1로, device-width와
device-height 값은 10으로 간주)		 yes
initial-scale 초기 확대.축소 값 1 ~ 10 1

 

뷰포트 단위

vw(viewport width): 1vw는 뷰포트 너비의 1%와 같음.

vh(viewport height): 1vh는 뷰포트 높이의 1%와 같음.

vmin(viewport minimun): 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같음.

vmax(viewport maximun): 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같음.

 

 

12-2 미디어 쿼리 알아보기

미디어 쿼리

css 모듈로 사이트에 접속하는 장치에 따라 특정한 css스타일을 사용하는 방법. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라짐.

 

미디어 쿼리 구문

@media 속성을 사용해 특정 미디어에서 어떤 css를 적용할 것인지 지정해 줌.

<style></style> 사이에 사용하며 대소 문자를 구별하지 않음.

기본적으로 미디어 유형을 지정해야하고 필요할 경우에는 and 연산자로 조건 적용.

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

only: 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음.

not: not 다음에 지정하는 미디어 유형을 제외.

and: 조건을 여러개 연결해서 추가.

 

미디어 유형의 종류

미디어 쿼리는 미디어별로 적용할 css를 따로 작성하므로 @media 속성 다음에 미디어 유형을 알려줘야 함.

 

@media 속성의 미디어 유형

종류 설명
all 모든 미디어 유형에서 사용할 css 정의
print 인쇄 장치에서 사용할 사용할 css 정의
screen 컴퓨터 스크린에서 사용할 css 정의. 스마트폰의 스크린도 포함.
tv 음성과 영상이 동시에 출력되는 tv에서 사용할 css 정의
aural 음성 합성장치(주로 화면을 읽어 소리로 출력해주는 장치)에서 사용할 css 정의
braille 점자 표시 장치에서 사용할 css 정의
handheld 패드(pad)에서 손에 들고 다니는 장치를 위한 사용할 css 정의
projection 프로젝터를 위한 css 정의
tty 디스플레이 기능이 제한된 장치에 맞는 css 정의. 이런 장치에서는 픽셀 단위 사용 불가능
embossed 점자 프린터에서 사용할 css 정의

 

미디어 쿼리의 속성

종류 설명
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 단말기의 최대 너비, 최대 높이
oreientation: portrait 단말기의 세로 모드
oreientation: landscape 단말기의 가로 모드

 

미디어 쿼리의 중단점

중단점: 미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 css를 적용할 분기점

대부분 기기의 화면 크기를 기준.

모바일 퍼스트: 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것.

처리속도나 화면 크기 등에서 다른 기기보다 모바일의 제약 조건이 더 많으므로 모바일의 레이아웃을 기본으로 하여 css를 만듦.

 

미디어 쿼리 적용하기

-외부 css 파일로 연결하는 방법

각 조건 별로 css 파일을 따로 저장한 뒤 <link>태그나 @import 문을 사용해서 연결

<link> 태그는 <head></head> 태그 사이에 넣음.

@import문은 css를 정의하는 <style></style> 태그 사이에 사용.

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

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

 

-웹 문서에 직접 정의하는 방법

<style>태그 안에서 media 속성을 사용하여 조건을 지정하고, 그 조건에 맞는 스타일 규칙 정의

@media 문을 사요해 각 조건별로 스타일을 지정해 놓고 스타일을 선택해서 적용

<style media="<조건>"> {
	<스타일 규칙>
}
</style>


<style>
	@media <조건> {
    	<스타일 규칙>
    }
  	</style>

 

 

12-3 그리드 레이아웃 알아보기

그리드 레이아웃

반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서 요소를 재배치 해야함. 

그리드 레이아웃: 재배치하기 위한 기준이 되는 레이아웃. 웹 사이트를 여러개 칼럼으로 나눈 후 메뉴나 본문, 이미지 등 웹 요소를 화면에 맞게 배치하는 것.

그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지.

 

그리드 레이아웃의 특징

1. 시각적으로 안정된 디자인 만들 수 있음.

2. 업데이트가 편한 웹 디자인을 구성할 수 있음.

3. 요소를 자유롭게 배치할 수 있음.

 

그리드 레이아웃 만드는 방법

-플렉서블 레이아웃(=플렉스 박스 레이아웃): 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치.

플렉스 박스 레이아웃은 수평방향이나 수직방향 중에서 한쪽을 주축으로 정하고 박스를 배치.

 

-css 그리드 레이아웃

수평과 수직 어느방향이든 배치 가능.

대부분 모던 브라우저에서 사용.

 

12-4 플렉스 박스 레이아웃 알아보기

 

플렉스 박스 레이아웃의 속성

종류 설명 속성값
display 플렉스 컨테이너 지정 flex, inline-flex
flex-direction 플렉스 항목에서 주축고 방향 지정 row, row-reverse, column, column-reverse
flex-wrap 컨테이너 너비보다 항목이 많을 경우 줄 바꿈 여부 지정 nowrap, wrap, wrap-reverse
flex-flow 배치 방향과 줄 바꿈 한번에 지정 flex-direction 속성값과 flex-wrap 속성값 사용
justify-content 주축에서 플렉스 항목 정렬 방법 지정 flex-start, flex-end, center, space-between, space-around
align-itesm 교차축에서 플렉스 항목 정렬 방법 지정 flex-start, flex-end, center, baseline, stretch
align-self 특정 플렉스 항목 정렬 방법 지정 flex-start, flex-end, center, baseline, stretch
align-content 여러 줄일 때 교차축 정렬 방법 지정 flex-start, flex-end, center, space-between, space-around, stretch
flex 플렉스 항목의 너비를 줄이거나 늘림. 1개에서 3개까지의 값, auto, initial

 

css 그리드 레이아웃의 속성과 함수

종류 설명 속성값
display 그리드 컨테이너를 지정 grid, inline-grid
grid-template-columns 칼럼을 지정 크깃값
grid-template-rows 줄 높이 지정 크깃값
grid-columns-gap 칼럼과 칼럼 사이의 간격 지정 크깃값
grid-row-gap 줄과 줄 사이의 간격 지정 크깃값
grid-gap 칼럼과 줄 사이의 간격을 한꺼번에 지정 크깃값
grid-columns-start 칼럼 시작의 라인 번호 지정 숫자
grid-columns-end 칼럼 마지막의 라인 번호 지정 숫자
grid-columns 칼럼 시작 번호와 끝 번호 사이에 슬래시(/)를 넣어 사용 숫자
grid-row-start 줄 시작 라인 번호를 지정 숫자
grid-row-end 줄 마지막의 라인 번호 지정 숫자
grid-row 줄 시작 번호와 줄 끝 번호 사이에 슬래기(/) 넣어 사용 숫자
grid-area 템플릿 이름 지정  
grid-template-areas grid-area를 사용해 템플릿 그리드 만듬  
minmax() 최솟값과 최댓값을 지정하는 함수 크깃값, auto
repeat() 같은 값을 여러 번 반복할 때 사용하는 함수 크깃값, auto-fill, auto-fit

'My Study > 서적 공부' 카테고리의 다른 글

[혼자 공부하는 컴퓨터구조+운영체제] "chapter4. CPU의 작동 원리"  (0) 2024.08.03
[혼자 공부하는 컴퓨터구조+운영체제] "chapter3. 명령어"  (0) 2024.07.30
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 11.트랜지션과 애니메이션"  (0) 2024.07.27
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 10.CSS 고급선택자"  (0) 2024.07.27
[혼자 공부하는 컴퓨터구조+운영체제] "chapter2. 데이터"  (0) 2024.07.27
'My Study/서적 공부' Related Articles more