안녕하세요 JJU_DEVELOPER입니다.
이번시간에는 CSS 반응형 웹과 미디어 쿼리에 대한 설명입니다~!
목차
12-1 반응형 웹 알아보기
12-2 미디어 쿼리 알아보기
12-3 그리드 레이아웃 알아보기
12-4 플렉스 박스 레이아웃 알아보기
12-5 CSS 그리드 레이아웃 알아보기
반응형 웹 디자인
• 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법
• 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적
->화면 크기에 ‘반응’해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인입니다!!!
12-1 반응형 웹 알아보기
보통은 사이트는 똑같고, 디바이스의 사이즈에 따라서 다르게 보이는 것을 반응형이라고 합니다!
네이버는 사이트가 다르긴 해도 예시를 볼까요?
반응형 웹사이트를 위해서는 뷰포트의 개념을 이해하셔야 합니다.
뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 비율을 1로 지정하는 것이
일반적인 사용방법입니다!
모바일 기기를 위한 뷰포트(viewport)
• 뷰포트 : 실제 내용이 표시되는 영역을 뜻합니다.
• PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한 대로 표시되지 않습니다.
-> 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>viewport units</title>
<style>
h1{
font-size:5vw;
text-align:center;
}
</style>
</head>
<body>
<h1>안녕하세요? JJU입니다.</h1>
</body>
</html>
이렇게 화면의 크기에 맞게 폰트의 크기가 달라집니다.
위의 코드를 리마크 하게 되면, 화면이 작아져도 화면에 맞게 폰트가 조정되지
않는 모습을 볼 수 있습니다!!
12-2 미디어 쿼리 알아보기
미디어 쿼리(media queries) : 접속하는 장치(미디어)에 따라 특정한 CSS 스타일을 사용하는 방법입니다.
한마디로, CSS 모듈인 거죠.
미디어 쿼리를 사용하면, 기기의 사이즈에 따라서 레이아웃이 달라지게 됩니다.
미디어 쿼리 구문
• @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정
• <style> 태그와 </style> 태그 사이에 사용
조건이 맞으면, 해당 스타일을 적용하게 됩니다.
미디어 쿼리 중단점 breakpoint
• 중단점(breakpoint) : 서로 다른 CSS를 적용할 화면 크기
• 대부분 기기의 화면 크기 기준.
• 모든 기기를 반영할 수 없기 때문에 스마트폰과 태블릿, 데스크톱 정도로 구분
• 모바일 퍼스트(mobile first) : 모바일 기기 레이아웃을 기본으로 작성 태블릿 & PC 레이아웃 작성
미디어 쿼리 적용하기
1. 외부 CSS 파일 연결
방법 1) <link> 태그 사용하기
-> <link rel=:stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
방법 2) @import 구문 사용하기
@import url("css 파일 경로") 미디어 쿼리조건
2. 웹 문서에서 직접 정의하기
방법 1) <style> 태그 안에서 media 속성 사용하기
방법 2) @media문 사용하기.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
＃화면의 크기에 따라 문서 배경 이미지가 달라지는 미디어 쿼리문
각기 다른 두 사진을 준비하여, 사이즈가 다를 때 다른 사진이 나오게끔 할 수 있습니다!
사이즈 조정 할 때마다 바뀌는 사진이 너무 신기합니다~!
이렇게 반응형으로 디바이스를 만들면 신기하고 재밌습니다!
12-3 그리드 레이아웃 알아보기
그리드 레이아웃이란?.?
• 반응형 웹 디자인에서 웹 문서 요소를 배치하는 기준
• 웹 사이트 화면을 여러 개의 칼럼(column)으로 나눈 후 웹 요소를 배치
• 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있음
줄로 되어있는 레이아웃으로 하기 때문에 일관성 있게 유지가 가능합니다.
그리드 레이아웃의 특징
• 시각적으로 안정된 디자인
• 업데이트가 편한 웹 디자인 구성
• 요소를 자유롭게 배치
그리드 레이아웃을 만드는 방법
1) 플렉스 박스 레이아웃(플렉시블 박스 레이아웃)
• 수평 방향이나 수직 방향 중 하나를 주축으로 정하고 박스를 배치
• 여유 공간이 생길 경우 너비나 높이를 적절하게 늘리거나 줄일 수 있음
div로 묶을 수 도 있고 하나씩 배치할 수 도 있습니다.
2) CSS 그리드 레이아웃
• 최근에 등장한 CSS 표준
• 수평 방향이나 수직 방향 어디로든 배치 가능
• 마치 레고 블록을 끼워 맞추듯 요소를 배치할 수 있음
정렬을 잘 맞춰서 더 직관적으로 맞출 수 있습니다~!
12-4 플렉스 박스 레이아웃 알아보기
플렉스 박스 레이아웃(flex box layout)
• 그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것.
• 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있음
display 속성
-> 배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정
flex-direction 속성
-> 플렉스 항목의 배치를 위해 주축과 방향 지정.
row: 주축이 가로 / 왼쪽에서 오른쪽으로
row-reverse: 주축 가로/ 오른쪽에서 왼쪽으로
column: 주출 세로, 위에서 아래로 배치
column-reverse: 주축은 세로이나 아래에서 위로 배치
warp 감싸기
nowarp을 하게 되면 사이즈가 작아져도 밑으로 박스가 떨어지지 않습니다.
반대로 warp을 하게 된다면, 사이즈가 작아지면 밑으로 박스가 하나씩 떨어지게 됩니다!
12-5 CSS 그리드 레이아웃 알아보기
CSS 그리드 레이아웃
• 플렉스 박스 레이아웃은 주축/교차축 개념이 있지만,
CSS 그리드 레이아웃은 양쪽 방향 모두 사용합니다.
(플렉스 그리드 레이아웃은 1차원, CSS 그리드 레이아웃은 2차원이라고도 합니다.)
• 줄(row)과 칼럼(column)으로 화면을 구성하고, 줄 사이의 여백, 칼럼 사이의 여백을 조절합니다.
CSS 그리드 레이아웃 항목을 배치하는 속성
display 속성
->배치 요소들을 감싸는 부모 요소를 그리드 컨테이너로 지정
grid-template-columns, grid-template-rows 속성
-> 칼럼/줄의 크기와 개수 지정
• grid-template-columns : 그리드 컨테이너 안의 칼럼 개수와 너비값
• grid-template-rows: 그리드 컨테이너 안의 줄 개수와 너빗값
자동으로 칼럼 개수를 조절하는 auto-fill, auto-fit
칼럼 너비와 함께 auto-fit이나 auto-fill을 지정하면 화면 너비에 따라
칼럼 개수를 조절할 수 있음
• auto-fit : 남는 공간 없이 꽉 채우기
• auto-fill : 칼럼의 최소 너비까지만 표시하고 남는 공간은 그대로 둠
그리드 라인을 사용해 배치하기
• CSS 그리드 레이아웃에는 눈에 보이지 않는 그리드 라인이 포함되어 있음
• 그리드 라인을 사용해 그리드 항목을 배치할 수 있음
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grid Layout</title>
<style>
#wrapper{
width:700px;
display:grid;
grid-template-columns:repeat(3, 1fr);
/*똑같은 사이즈 3등분할꺼야*/
grid-template-rows:repeat(3, 100px);
/*row 3개 만들거야*/
}
.box{
padding:15px;
color:rgb(14, 12, 12);
font-weight:bold;
text-align:center;
}
.box1 {
background-color:lightpink;
grid-column:1/4;
}
.box2 {
background-color:lightcyan;
grid-row:2/4;
/* grid-column:1/2; */
grid-column-start:1;
}
.box3 {
background-color:lightgreen;
grid-column:2/4;
/* grid-row:2/3; */
grid-row-start:2;
}
.box4 {
background-color:lightskyblue;
grid-column-start:3;
grid-row-start:3;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box box1">아이패드1</div>
<div class="box box2">아이패드2</div>
<div class="box box3">아이패드3</div>
<div class="box box4">아이패드4</div>
</div>
</body>
</html>
|
이렇게 코드를 보면 레이아웃을 4등분을 해서 박스를 어디서 어디까지만 주겠다라고 직관적으로
표시할 수 있습니다~!
그럼 지금 까지 12장 CSS 반응형 웹과 미디어 쿼리 (화면에 사이즈에 따라 사진 자동변경 설정)에 대한 설명을 마치겠습니다.
기초 설명이기 때문에 이 정도 있다는 기초만 가지고,
다른 라이브러리에서 더 다양한 코드를 사용할 때 이해하시는 용도로 보시면 됩니다.
오늘도 수고하셨습니다.
감사합니다.
'주니어 기초 코딩공부 > CSS, HTML 기초' 카테고리의 다른 글
| CSS 이미지와 그라데이션 효과 맛보기 (0) | 2023.01.06 |
|---|---|
| CSS 고급 선택자- 마우스 클릭시 색변경, 링크 접속 시 변경 등 고급 선택자 알아보기!!! (1) | 2023.01.06 |
| CSS 텍스트를 표현하는 다양한 스타일 (글꼴, 웹폰트,목록,표만들기) (0) | 2023.01.06 |
| CSS 기본 설명 (스타일, 기본 선택자, 캐스케이팅이란??) (0) | 2023.01.06 |
| HTML 정복하기!!! fieldset, legend, lable, option 예시 및 상세 설명 (0) | 2023.01.04 |