728x90
반응형 웹
다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 재배치하며 반응하는 웹문서
뷰포트
현재 화면에 보여지고 있는 영역. <head> 태그 사이에 <meta> 태그를 이용해 뷰포트를 지정할 수 있다.
<meta name="viewport" content="속성1=값1, 속성2=값2, ...">단위)
- vw: 뷰포트 너비 100분의 1
- vh: 뷰포트 높이 100분의 1
- vmin: 뷰포트 너비와 높이 중 작은 쪽의 100분의 1
- vmax : 뷰포트 너비와 높이 중 큰 쪽의 100분의 1
<style>
p {
margin: 0;
font-size: 10vw;
}
</style>
</head>
<body>
<p>죽여 마땅한 사람들 - 피터 스완슨</p>
</body>
728x90
미디어 쿼리
미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)
미디어 타입과 조건에 대한 쿼리로 구성된다.
<style>
.box {
width: 150px;
height: 150px;
background-color: teal;
}
@media screen and (max-width: 500px) {
.box {
background-color: orange;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
플렉스박스
행 또는 열을 주축으로 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식이다. 플렉스 컨테이너 생성은 display 속성을 이용한다.
display
플렉스 컨테이너 지정
- flex: 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치한다.
- inlne-flex : 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치한다.
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
ul {
display: flex;
padding: 0;
list-style-type: none;
height: 200px;
}
</style>
</head>
<body>
<h1>콜드플레이 내한 셋리</h1>
<ul>
<li>Higher Power</li>
<li>Adventure of a Lifetime</li>
<li>Paradise</li>
<li>The Scientist</li>
<li>Viva La Vida</li>
</ul>
</body>
flex-direction
플렉스 방향 지정
- row: 기본값. 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치
- column: 주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치
- row-reverse / column-reverse
flex-wrap
플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정
- no-wrap: 기본값. 한 줄에 표시
- wrap: 여러 줄에 표시
- wrap-reverse
flex-flow
배치 방향과 줄바꿈을 한꺼번에 지정
ul {
...
/* flex-direction: column;
flex-wrap: wrap; */
flex-flow: column wrap;
}justify-content
주축 정렬 방법 지정. 플렉스 항목 간의 정렬 방법 지정
- flex-start: 주축의 시작점
- flex-end: 주축의 끝점
- center: 중앙
- space-between: 첫번째 항목과 끝 항목을 양쪽끝에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치
- space-around: 모든 항목을 주축에 같은 간격으로 배치
align-items
교차축 정렬 방법 지정
- flex-start: 교차축의 시작점
- flex-end: 교차축의 끝점
- center: 중앙
- baselne: 교차축의 문자 기준선에 맞춰 배치
- strech: 항목을 늘려 교차축에 가득 차게 배치
align-self
특정 항목만 정렬 방법 지정
ul {
display: flex;
padding: 0;
list-style-type: none;
height: 200px;
justify-content: space-around;
align-items: flex-start;
}
li:nth-child(3) {
align-self: flex-end;
}
flex-grow
컨테이너 안에서 아이템이 남은 공간을 얼마나 확장해서 차지할지를 결정. 0이 기본값이다.
li {
background-color: yellow;
}
li:nth-child(2n) {
background-color: aqua;
}
li:nth-child(2) {
flex-grow: 1;
}
li:nth-child(2) {
flex-grow: 1;
}
li:nth-child(4) {
flex-grow: 4;
}
flex-shrink
아이템이 컨테이너보다 커질 때, 아이템이 얼마나 줄어들 수 있는지를 비율로 지정
li:nth-child(2) {
flex-shrink: 1;
}
flex-basis
기준(초기) 크기 지정
li:nth-child(2n-1) {
background-color: aqua;
flex-basis: 300px;
}
flex
flex-grow, flex-shrink, flex-basis를 한 줄로 줄여서 쓰는 단축 속성
728x90
'HTML, CSS' 카테고리의 다른 글
| [CSS] 트랜지션과 애니메이션 (0) | 2025.04.16 |
|---|---|
| [CSS] 연결 선택자, 속성 선택자, 가상 클래스, 가상 요소 (0) | 2025.04.15 |
| CSS 레이아웃 관련 속성 (0) | 2025.04.15 |
| CSS 배경, 텍스트 관련 속성 (0) | 2025.04.15 |
| CSS 박스 모델 (0) | 2025.04.14 |