반응형 웹 디자인 : 화면 크기에 ‘반응’해 화면 요소들을 자동으로 바꾸어 사이트를 구현
뷰포트
뷰포트 : 웹 페이지가 브라우저 화면상에서 실제로 표시되는 영역
속성
- width (뷰포트 너비) : device-width 또는 숫자값을 사용해 지정
- height (뷰포트 높이) : device-width 또는 숫자값을 사용해 지정
- user-scalable (사용자의 확대/축소 가능 여부) : yes(기본값) 또는 no
- initial-scale (초기 확대/축소 값) : 1~10
단위 (viewport를 기준으로 한 상대적 사이즈)
- vw(viewport width) : viewport 너비의 1/100 (1vw는 뷰포트 너비의 1%와 같다.)
- vw(viewport width) : viewport 높이의 1/100
- vmin(viewport minimum) : viewport 너비 또는 높이 중 작은 쪽의 1/100
- vmax(viewport maximum) : viewport 너비 또는 높이 중 큰 쪽의 1/100
<meta name="viewport" content="속성1=값1", "속성2=값2", ...>//뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정
<meta name="viewport" content="width=device-width, initial-scale=1">*기기에 맞는 뷰포트 크기값
yesviz.com/devices.php
미디어 쿼리
미디어 쿼리(media queries) : 접속하는 장치(미디어)에 따라 특정한 CSS 스타일을 사용하는 방법.<style>에 적어줌
속성
- only : 미디어 쿼리를 지원하지 않는 브라우저에서는 실행하지 않는다.
- not : not다음에 지정하는 미디어 유형을 제외한다.(not tv => TV제외하고 적용)
- and : 조건을 여러개 연결해서 추가할 수 있다.
미디어 유형 종류 : all, print, screen, tv, aural, braille, handheld, projection, tty, embossed
조건
- width, height : 웹페이지의 가로너비, 세로높이(정확히 이 크기일때만 적용됨)
- min-width, min-height / max-width, max-height 웹페이지의 최소/ 최대 가로너비, 세로높이
- device-width / device-height : 단말기의 가로너비, 세로높이
- orientation : portrait =>단말기의 세로모드
- orientation : landscape =>단말기의 가로모드
@media [only | not] 미디어 유형 [and 조건]*[and 조건] { }/* 너비가 768픽셀 이하인 스마트폰 */
@media only screen and (max-width: 768px) {
[class*="c"] {
width: 100%;
}
}
/* 너비가 600픽셀 이상인 태블릿을 위한 설정 */
@media only screen and (min-width: 600px) {
.c_m_1 {width: 8.33%;}
.c_m_2 {width: 16.66%;}
.c_m_3 {width: 25%;}
...생략...
/* 스마트폰을 가로로 돌릴 경우 */
@media screen and (min-device-width: 375px) and (min-device-height: 812px) {
...생략...
}
일반적인 사용 예(Break Point)
- 스마트폰: 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성.
만일 스마트폰의 방향까지 고려해서 제작한다면 min-width의 세로와 가로를 각각 portrait 320px, landscape 480px로 지정.
- 태블릿: 세로 크기가 768px 이상이면 태블릿으로 지정. 가로 크기는 데스크톱과 똑같이 1024px 이상으로 지정.
- 데스크톱: 화면 크기가 1024px 이상이면 데스크톱으로 설정
그리드 레이아웃
여러 개의 칼럼(column)으로 나눈 후 웹 요소를 배치(표 처럼!)
플렉스 박스 레이아웃(flex box layout)
플렉스 박스 레이아웃(flex box layout) : 수평 방향이나 수직 방향 중 하나를 주축으로 정하고 박스를 배치(1차원)
플렉스 컨테이너 : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소(겉 상자) =>display:flex;
플렉스 항목 : 컨테이너 속 작은 상자
주축 : 플렉스 항목을 배치하는 기본 방향(왼->오)
교차축 : 주축과 교차하는 방향(위->아래)
속성
flex-direction : 플렉스 항목의 배치를 위해 주축과 방향 지정. (다른 속성들을 적용할 때 기준이 됨)
- row(기본값) : 주축을 가로로 지정, 왼->오 배치
- row-reverse : 주축을 가로로 지정, 오->왼 배치
- colum : 주축을 세로로 지정, 위->아래 배치
- colum-reverse : 주축을 세로로 지정, 아래->위 배치
flex-wrap : 플렉스 항목을 한 줄 또는 여러 줄로 배치
- nowrap(기본값) : 항목을 한 줄에 표시
- wrap : 항목을 여러줄에 표시(넘치면 아래줄로 넘어감)
- wrap-reverse : 항목을 여러줄에 표시(넘치면 윗줄로 올라감)
justify-content : 플렉스 항목을 주축(가로) 방향으로 배치할 때의 배치 기준
- flex-start : 주축의 시작점(왼쪽)에 붙어 배치
- flex-end : 주축의 끝점(오른쪽)에 붙어 배치
- center : 주축의 중앙에 맞춰 배치
- space-between : 양끝에 맞춰 배치하되, 항목들의 간격을 일정하게
- space-around : 항목들의 간격을 일정하게(양끝에도 간격생김)
align-items, align-self : 교차축(세로) 기준 (특정 항목만 지정하고 싶다면 align-self 사용)
- flex-start : 교차축의 시작점(위)에 붙어 배치
- flex-end : 교차축의 끝점(아래)에 붙어 배치
- center : 교차축의 중앙에 맞춰 배치
- baseline : 교차축의 문자 기준선(크기)에 맞춰 배치
- stretch : 플렉스 항목을 늘려 교차축에 가득 차게 배치
align-content : 플렉스 항목이 여러 줄로 표시될 때(flex-wrap : wrap인 경우) 교차 축 기준의 배치 방법 지정
- flex-start : 교차축의 시작점에 맞춰 배치
- flex-end : 교차축의 끝점에 붙어 배치
- center : 교차축의 중앙에 맞춰 배치
- space-between : 첫번째 항목과 끝 항목을 시작점과 끝점에 맞추고 나머지는 같은 간격으로 배치
- space-around : 모든 항목들을 같은 간격으로 배치
- stretch : 플렉스 항목을 늘려 교차축에 가득 차게 배치
<style>
.container {
display:flex; /* 플렉스 컨테이너 지정 */
/* 인라인 요소 플렉스 컨테이너를 지정하고 싶으면 inline flex로 적어준다. */
background-color:#eee;
border:1px solid #222;
margin-bottom:10px;
}
#opt1{
flex-flow: row wrap; /* 왼쪽에서 오른쪽, 여러 줄 */
}
.box {
padding:5px 45px;
margin:5px;
background-color:#222;
}
p {
color:#fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="opt1">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
CSS 그리드 레이아웃
CSS 그리드 레이아웃 : 주축/교차축 개념이 없음. 양쪽 방향 모두 사용(2차원)
속성
grid-template-columns, grid-template-rows : 칼럼/줄의 크기와 개수 지정
- grid-template-columns : 그리드 컨테이너 안의 칼럼 개수와 너빗값
- grid-template-rows: 그리드 컨테이너 안의 줄 개수와 너빗값
<style>
#wrapper{
display:grid;
grid-template-columns: 2fr 1fr 2fr; /* 각 칼럼이 (2:1:2)의 비율을 차지 */
grid-template-rows:100px;
}
...생략...
<body>
<div id="wrapper">
<div class="items">...생략...*Fraction(fr) 단위 : 남는 공간을 비율로 계산해 사용하겠다.
*repeat( ) : 똑같은 값을 반복해 적용할 때 사용
*auto-fill, auto-fit : 자동으로 컬럼 개수 조절(화면 너비에 따라)
grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); /* 칼럼 최소 너비만큼 채워서 표시 */
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); /* 화면을 꽉 채울만큼 칼럼 너비를 늘려서 표시 */
그리드 라인 배치
- grid-column-start : 칼럼 시작의 라인 번호를 지정(grid-column-start : 1)
- grid-column-end : 칼럼 마지막의 라인 번호를 지정(grid-column-end : 1)
- grid-column : 칼럼 시작 번호와 칼럼 끝 번호 지정(grid-column: 1/4 =>1번부터 4번줄까지 차지)
- grid-end-start : 줄 시작의 라인 번호를 지정(grid-end-start :2)
- grid-row-end : 줄 마지막의 라인 번호(grid-row-end: 4)
- grid-row : 줄 시작번호와 줄 끝 번호(grid-row: 2/4)
템플릿 영역 배치
- grid-area : 그리드 영역(아이템)의 이름을 지정할 때 사용
- grid-template-areas : 그리드 영역의 이름을 이용해 레이아웃 형태를 정의
#wrapper{
width:700px;
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-template-rows:repeat(3, 100px);
grid-template-areas:
"box1 box1 box1" /*차지할 공간만큼 반복해서 적어줌*/
"box2 box3 box3"
"box2 . box4"; /*빈 공간은 . 으로 표시*/
}
.box{
padding:15px;
color:#fff;
font-weight:bold;
text-align:center;
}
.box1 {
background-color:#3689ff;
grid-area:box1;
}
.box2 {
background-color:#00cf12;
grid-area:box2;
}
.box3 {
background-color:#ff9019;
grid-area:box3;
}
.box4 {
background-color:#ffd000;
grid-area:box4;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
</div>
</body>
</html>
'프론트' 카테고리의 다른 글
| JavaScript 객체, 배열, 내장 객체, 브라우저 객체 (0) | 2022.08.31 |
|---|---|
| JavaScript 변수, 함수, 입출력방법, 이벤트 (0) | 2022.08.30 |
| CSS 변형, 트랜지션, 애니메이션 (0) | 2022.08.25 |
| CSS 고급 선택자 (0) | 2022.08.24 |
| CSS 레이아웃, 박스 모델, 배경, position (0) | 2022.08.22 |