지금까지 제작했던 웹페이지는 반응형으로 설계되지 않아, 특정 디스플레이에서만 제대로 보이는 한계가 있었다. 예를 들어, 16:9 비율의 FHD(1920x1080) 디스플레이를 기준으로 만든 웹페이지는 4:3이나 21:9 비율의 화면, 혹은 QHD, UHD, HD 등의 다른 해상도를 가진 디스플레이에서는 의도와 다르게 표시될 수 있다. 이러한 문제를 해결하기 위해서는 해상도나 화면 비율에 맞춰 크기를 자동으로 조절하는 반응형 웹 제작이 필수적이다!!
메타태그
문서에 대한 메타 데이터를 정의하는 태그로 보통 문자 인코딩, 페이지 설명, 키워드, 뷰포트 설정을위해 사용하는데 항상 문서의 head 부분에 들어간다는 특징이 있다.
charset
HTML문서의 문자 인코딩을 지정하는데 아마 기본적으로 인코딩 지정을 HTML문서나 브라우저에서 지정해주는 경우가 많아 적지않아도 한글 같은 비로마자 문자도 출력이 정상적으로 나올것이다. 그래도 미리 지정해두고 사용하는 편이 안전성 면에서 유리하므로 꼭 HTML 문서를 만들 때 포함시켜주자.
<head>
<meta charset="utf-8">
</head>참고로 인코더의 종류로는 UTF-8, EUC-KR, UTF-16 등이 있는데 UTF-8이 가장 널리 쓰인다
content
meta 정보의 내용을 지정하는데 name속성과 http-equiv와 연관된 값을 준다.
http-equiv
컨텐츠 속성의 정보 / 값에 대한 HTTP 헤더 제공, 웹 브라우저 서버에 명령을 내리는 속성이다. .name 속성 대신해 사용할 수 있다고는 하는데 아직까지 내가 해본 실습에서는 해당 속성을 사용해본 적은 없다...
<head>
<meta charset="utf-8">
<meta name="description" content = "반응형 웹 설명">
<meta name="keywords" content="HTML,CSS,JavScript">
<meta name = "author" content ="me">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
</head>
뷰포트
뷰포트는 사용자가 웹페이지를 볼 수 있는 영역으로 device마다 다른 표시영역으로 인해 사용자에게 불편함을 야기하는 경우가 있는데 이를 해결하기 위해 각각 기기에 맞는 크기로 브라우저가 인식하도록 제어하는 태그가 바로 뷰포트다.
<meta name="viewport" content="속성">
적용가능한 속성
| 속성 | 내용 |
| width | 기기장치의 가로 폭을 인식한다 |
| height | 기기장치의 세로 높이 인식 |
| initial-scale | 처음 인식되는 크기 값, 초기 확대 비율 |
| user-scalable | 사용자가 웹 크기 바꿀 수 있는지 여부 |
| minimum-scale | 최소 축소 비율 |
| maximum-scale | 최대 축소 비율 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
미디어 쿼리 (@media)
반응형 웹 디자인을 위한 CSS기술로 특정 조건을 만족할 때만 특정 CSS규칙을 적용할 수 있도록 도와준다!!
사이즈조건
@media screen and (사이즈조건){ 적용할 CSS선택자와 스타일 구문}
min-width, max-width, width 등을 이용해 기존에 CSS 코드를 적는 것과 동일하게 사용하면 된다.
문서 방향 설정
@media.screen and (orientation : landscape){}문서 방향을 landscape로 할 지 portrait으로 할지 정해주는 구문이다. 기본적으로 문서의 방향은 landscape로 되어있으니 portrait로 문서작성을 하지 않는이상 건드릴 필요는 없을것이다.
미디어 유형
@media.screen and (사이즈조건){}
//이 코드에서 "screen" 이 부분을 바꿔 제어하는 것이다!!
all : 기본값, 모든 미디어 유형 장치에 사용하고자 할 때
print : 인쇄 버튼을 눌렀을 때 나오는 미리보기 창을 스타일 적용하고자 할 때
screen : 컴퓨터 화면, 태블릿, 스마트폰 등에 사용
speech : 스크린 리더기가 페이지를 소리 내어 읽을 때 사용
유동형 사이즈
사이즈 조건을 적고자 할 때 사용하는 단위로 기존 CSS에서도 사용가능하지만 반응형 웹에서 이런 단위들은 아래와 같은 맥락으로 사용되는 편이다.
| 단위 | 내용 |
| px | 절대적 단위이지만 디스플레이마다 픽셀의 밀도가 다르기 때문에 해상도에 따라 작아보이거나 커보일 수 있는 특징이있다. |
| % | "부모 요소가 갖고 있는 크기"를 100% 기준으로 계산하며 주로 레이아웃 관련에서 사용된다 |
| em | "부모 요소의 글자 크기"의 배수 (주로 폰트크기 관련) |
| rem | "최상위 요소의 글자 크기"의 배수 (최상위 요소는 HTML이다) |
| vw,vh | 각각 뷰포트 너비값과 높이값을 1~100 %로 나눈값이다 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
</head>
<style>
.wrap{
width: 1200px;
max-width: 100%;
height: 300px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width : 1024px) {.wrap div{width: 25%;}}
@media screen and (max-width : 1023px) {.wrap div{width: 50%;}}
@media screen and (max-width: 540px) {.wrap div{width: 100%;}}
.box1 {background-color: red;}
.box2 {background-color: yellow;}
.box3 {background-color: green;}
.box4 {background-color: blue;}
</style>
<body>
<div class="wrap">
<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>
</div>
</body>
</html>스크린의 크기에 따라 div의 크기를 조절해 반응형 웹페이지를 만들었다.
1024px 이상이면 한 줄에, 541~1023px이라면 한 줄에 하나씩 540px 아래라면 한 줄에 하나씩 배치
'웹프로그래밍 > CSS 3' 카테고리의 다른 글
| CSS - 그라디언트, 키프레임으로 스피너만들기 (0) | 2024.08.07 |
|---|---|
| CSS - Background와 Transition (0) | 2024.08.06 |
| CSS - 레이아웃 속성과 flex (0) | 2024.08.05 |
| CSS - 폰트 설정 (0) | 2024.07.31 |
| CSS - 박스 모델 (0) | 2024.07.30 |