|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
div.box {width:200px; height:200px; background-color:#8a8a8a; border:3px solid blue;}
div.box > div {background-color:aquamarine}
div.box > div:nth-child(2n) {background-color:aqua}
div.A {
display:flex; /*flex를 적용하면 플렉스 아이템이 가로 방향으로 배치 된다.*/
} /*이때 플렉스 아이템이 가지고 있던 성격들은 무시된다.*/
/*flex-direction - 플렉스 박스 레이아웃의 주축 방향을 결정*/
div.B {
display:inline-flex;
flex-direction:row; /*주축 방향을 왼쪽에서 오른쪽으로 지정 (기본값)*/
}
div.C {
display:inline-flex;
flex-direction:row-reverse; /*주출 방향을 오른쪽에서 왼쪽으로 지정*/
}
div.D {
display:inline-flex;
flex-direction:column; /*주축 방향을 위쪽에서 아래쪽으로 지정*/
}
div.E {
display:inline-flex;
flex-direction:column-reverse; /*주축 방향을 아래쪽에서 위쪽으로 지정*/
}
/*flex-wrap - 플렉스 아이템이 플렉서 컨테이너 영역을 벗어날 때 처리할 방식을 결정*/
div.F {
display:flex;
flex-direction:row;
flex-wrap:nowrap; /*컨테이너를 벗어나도 무시 (기본값)*/
}
div.G {
display:inline-flex;
flex-direction:row;
flex-wrap:wrap; /*컨테이너를 벗어나면 줄바꿈*/
}
div.H {
display:inline-flex;
flex-direction:row;
flex-wrap:wrap-reverse; /*컨테이너를 벗어나면 wrap의 역방향으로 줄바꿈*/
}
/*flex-flow - 위 2개소개하였던 flex-direction, flex-wrap 속성을 한번에 설정한다.*/
/*flex-flow:flex-direction flex-wrap*/
div.I {
display:inline-flex;
flex-flow:row wrap-reverse;
}
/*justify-content - 플렉스 아이템을 주축 방향으로 정렬할 때 사용*/
div.J {
display:inline-flex;
flex-flow:row wrap;
justify-content:flex-start; /*추축 방향의 시작을 기준으로 정렬*/
}
div.K {
display:inline-flex;
flex-flow:row wrap;
justify-content:flex-end; /*추축 방향의 끝을 기준으로 정렬*/
}
div.L {
display:inline-flex;
flex-flow:row wrap;
justify-content:center; /*추축 방향의 중앙에 정렬*/
}
div.M {
display:inline-flex;
flex-flow:row wrap;
justify-content:space-between; /*플렉스 아이템 사이의 간격이 균일하게 정렬*/
}
div.N {
display:inline-flex;
flex-flow:row wrap;
justify-content:space-around; /*플렉스 아이템의 둘레가 균일하도록 정렬*/
}
div.O {
display:inline-flex;
flex-flow:row wrap;
justify-content:space-evenly; /*플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬*/
}
/*align-items, align-content, align-self - 플렉스 아이템을 교차축 방향으로 정렬할 때 사용*/
/*속성값을 3가지 속성 모두 동일하다.*/
/*stretch - 교차축 방향으로 플렉스 아이템의 너비나 높이가 늘어남 (기본값)*/
/*flex-start - 교차축 방향의 시작을 기준으로 정렬*/
/*flex-end - 교차축 방향의 끝을 기준으로 정렬*/
/*center - 교차축 방향의 중앙을 기준으로 정렬*/
/*baseline - 플렉스 아이템의 베이스라인 가준으로 정렬*/
div.P-a {
display:inline-flex;
flex-wrap:wrap;
align-items:stretch;
}
div.P-b {
display:inline-flex;
flex-wrap:wrap;
align-items:flex-start;
}
div.P-c {
display:inline-flex;
flex-wrap:wrap;
align-items:flex-end;
}
div.P-d {
display:inline-flex;
flex-wrap:wrap;
align-items:center;
}
div.P-e {
display:inline-flex;
flex-wrap:wrap;
align-items:baseline;
}
/*----------------------------------------------------------------------*/
/*align-content속성은 flex-wrap속성 때문에 두 줄 이상이 됐을 때만 사용*/
div.Q-a {
display:inline-flex;
flex-wrap:wrap;
align-content:stretch;
}
div.Q-b {
display:inline-flex;
flex-wrap:wrap;
align-content:flex-start;
}
div.Q-c {
display:inline-flex;
flex-wrap:wrap;
align-content:flex-end;
}
div.Q-d {
display:inline-flex;
flex-wrap:wrap;
align-content:center;
}
div.Q-e {
display:inline-flex;
flex-wrap:wrap;
align-content:baseline;
}
/*----------------------------------------------------------------------*/
/*align-self속성은 플렉스 아이템을 각각 정렬하고 싶을 때 사용*/
div.R {
display:inline-flex;
flex-wrap:wrap;
}
div.R > div:nth-child(1) {
align-self:stretch;
}
div.R > div:nth-child(2) {
align-self:flex-start;
}
div.R > div:nth-child(3) {
align-self:flex-end;
}
div.R > div:nth-child(4) {
align-self:center;
}
div.R > div:nth-child(5) {
align-self:baseline;
}
div.R > div:nth-child(6) {
align-self:stretch;
}
div.R > div:nth-child(7) {
align-self:flex-start;
}
div.R > div:nth-child(8) {
align-self:flex-end;
}
div.R > div:nth-child(9) {
align-self:center;
}
div.R > div:nth-child(10) {
align-self:baseline;
}
</style>
</head>
<body>
<div class="box A">
<div>item<br>A01</div>
<div>item<br>A02</div>
<div>item<br>A03</div>
<div>item<br>A04</div>
</div> <br>
--------------------------------------------------<br> <br>
<div class="box B">
<div>item<br>B01</div>
<div>item<br>B02</div>
<div>item<br>B03</div>
<div>item<br>B04</div>
</div>
<div class="box C">
<div>item<br>C01</div>
<div>item<br>C02</div>
<div>item<br>C03</div>
<div>item<br>C04</div>
</div>
<div class="box D">
<div>item<br>D01</div>
<div>item<br>D02</div>
<div>item<br>D03</div>
<div>item<br>D04</div>
</div>
<div class="box E">
<div>item<br>E01</div>
<div>item<br>E02</div>
<div>item<br>E03</div>
<div>item<br>E04</div>
</div> <br> <br>
--------------------------------------------------<br> <br>
<div class="box F">
<div>item<br>E01</div>
<div>item<br>E02</div>
<div>item<br>E03</div>
<div>item<br>E04</div>
<div>item<br>E05</div>
<div>item<br>E06</div>
<div>item<br>E07</div>
<div>item<br>E08</div>
<div>item<br>E09</div>
<div>item<br>E10</div>
<div>item<br>E11</div>
</div> <br>
<div class="box G">
<div>item<br>G01</div>
<div>item<br>G02</div>
<div>item<br>G03</div>
<div>item<br>G04</div>
<div>item<br>G05</div>
<div>item<br>G06</div>
<div>item<br>G07</div>
<div>item<br>G08</div>
<div>item<br>G09</div>
<div>item<br>G10</div>
<div>item<br>G11</div>
</div>
<div class="box H">
<div>item<br>H01</div>
<div>item<br>H02</div>
<div>item<br>H03</div>
<div>item<br>H04</div>
<div>item<br>H05</div>
<div>item<br>H06</div>
<div>item<br>H07</div>
<div>item<br>H08</div>
<div>item<br>H09</div>
<div>item<br>H10</div>
<div>item<br>H11</div>
</div> <br> <br>
--------------------------------------------------<br> <br>
<div class="box I">
<div>item<br>I01</div>
<div>item<br>I02</div>
<div>item<br>I03</div>
<div>item<br>I04</div>
<div>item<br>I05</div>
<div>item<br>I06</div>
<div>item<br>I07</div>
<div>item<br>I08</div>
<div>item<br>I09</div>
<div>item<br>I10</div>
<div>item<br>I11</div>
</div> <br> <br>
--------------------------------------------------<br> <br>
<div class="box J">
<div>item<br>J01</div>
<div>item<br>J02</div>
<div>item<br>J03</div>
<div>item<br>J04</div>
</div>
<div class="box K">
<div>item<br>K01</div>
<div>item<br>K02</div>
<div>item<br>K03</div>
<div>item<br>K04</div>
</div>
<div class="box L">
<div>item<br>L01</div>
<div>item<br>L02</div>
<div>item<br>L03</div>
<div>item<br>L04</div>
</div> <br>
<div class="box M">
<div>item<br>M01</div>
<div>item<br>M02</div>
<div>item<br>M03</div>
<div>item<br>M04</div>
</div>
<div class="box N">
<div>item<br>N01</div>
<div>item<br>N02</div>
<div>item<br>N03</div>
<div>item<br>N04</div>
</div>
<div class="box O">
<div>item<br>O01</div>
<div>item<br>O02</div>
<div>item<br>O03</div>
<div>item<br>O04</div>
</div> <br> <br>
--------------------------------------------------<br> <br>
<div class="box P-a">
<div>item<br>P-a01</div>
<div>item<br>P-a02</div>
<div>item<br>P-a03</div>
<div>item<br>P-a04</div>
<div>item<br>P-a05</div>
<div>item<br>P-a06</div>
<div>item<br>P-a07</div>
<div>item<br>P-a08</div>
</div>
<div class="box P-b">
<div>item<br>P-b01</div>
<div>item<br>P-b02</div>
<div>item<br>P-b03</div>
<div>item<br>P-b04</div>
<div>item<br>P-b05</div>
<div>item<br>P-b06</div>
<div>item<br>P-b07</div>
<div>item<br>P-b08</div>
</div>
<div class="box P-c">
<div>item<br>P-c01</div>
<div>item<br>P-c02</div>
<div>item<br>P-c03</div>
<div>item<br>P-c04</div>
<div>item<br>P-c05</div>
<div>item<br>P-c06</div>
<div>item<br>P-c07</div>
<div>item<br>P-c08</div>
</div>
<div class="box P-d">
<div>item<br>P-d01</div>
<div>item<br>P-d02</div>
<div>item<br>P-d03</div>
<div>item<br>P-d04</div>
<div>item<br>P-d05</div>
<div>item<br>P-d06</div>
<div>item<br>P-d07</div>
<div>item<br>P-d08</div>
</div>
<div class="box P-e">
<div>item<br>P-e01</div>
<div>item<br>P-e02</div>
<div>item<br>P-e03</div>
<div>item<br>P-e04</div>
<div>item<br>P-e05</div>
<div>item<br>P-e06</div>
<div>item<br>P-e07</div>
<div>item<br>P-e08</div>
</div> <br> <br>
--------------------------------------------------<br> <br>
<div class="box Q-a">
<div>item<br>Q-a01</div>
<div>item<br>Q-a02</div>
<div>item<br>Q-a03</div>
<div>item<br>Q-a04</div>
<div>item<br>Q-a05</div>
<div>item<br>Q-a06</div>
<div>item<br>Q-a07</div>
<div>item<br>Q-a08</div>
</div>
<div class="box Q-b">
<div>item<br>Q-b01</div>
<div>item<br>Q-b02</div>
<div>item<br>Q-b03</div>
<div>item<br>Q-b04</div>
<div>item<br>Q-b05</div>
<div>item<br>Q-b06</div>
<div>item<br>Q-b07</div>
<div>item<br>Q-b08</div>
</div>
<div class="box Q-c">
<div>item<br>Q-c01</div>
<div>item<br>Q-c02</div>
<div>item<br>Q-c03</div>
<div>item<br>Q-c04</div>
<div>item<br>Q-c05</div>
<div>item<br>Q-c06</div>
<div>item<br>Q-c07</div>
<div>item<br>Q-c08</div>
</div>
<div class="box Q-d">
<div>item<br>Q-d01</div>
<div>item<br>Q-d02</div>
<div>item<br>Q-d03</div>
<div>item<br>Q-d04</div>
<div>item<br>Q-d05</div>
<div>item<br>Q-d06</div>
<div>item<br>Q-d07</div>
<div>item<br>Q-d08</div>
</div>
<div class="box Q-e">
<div>item<br>Q-e01</div>
<div>item<br>Q-e02</div>
<div>item<br>Q-e03</div>
<div>item<br>Q-e04</div>
<div>item<br>Q-e05</div>
<div>item<br>Q-e06</div>
<div>item<br>Q-e07</div>
<div>item<br>Q-e08</div>
</div> <br> <br>
--------------------------------------------------<br> <br>
<div class="box R">
<div>item<br>R-01</div>
<div>item<br>R-02</div>
<div>item<br>R-03</div>
<div>item<br>R-04</div>
<div>item<br>R-05</div>
<div>item<br>R-06</div>
<div>item<br>R-07</div>
<div>item<br>R-08</div>
<div>item<br>R-09</div>
<div>item<br>R-10</div>
</div> <br> <br>
</body>
</html>
|
item
A01 item
A02 item
A03 item
A04 -------------------------------------------------- item
B01 item
B02 item
B03 item
B04 item
C01 item
C02 item
C03 item
C04 item
D01 item
D02 item
D03 item
D04 item
E01 item
E02 item
E03 item
E04 -------------------------------------------------- item
E01 item
E02 item
E03 item
E04 item
E05 item
E06 item
E07 item
E08 item
E09 item
E10 item
E11 item
G01 item
G02 item
G03 item
G04 item
G05 item
G06 item
G07 item
G08 item
G09 item
G10 item
G11 item
H01 item
H02 item
H03 item
H04 item
H05 item
H06 item
H07 item
H08 item
H09 item
H10 item
H11 -------------------------------------------------- item
I01 item
I02 item
I03 item
I04 item
I05 item
I06 item
I07 item
I08 item
I09 item
I10 item
I11 -------------------------------------------------- item
J01 item
J02 item
J03 item
J04 item
K01 item
K02 item
K03 item
K04 item
L01 item
L02 item
L03 item
L04 item
M01 item
M02 item
M03 item
M04 item
N01 item
N02 item
N03 item
N04 item
O01 item
O02 item
O03 item
O04 -------------------------------------------------- item
P-a01 item
P-a02 item
P-a03 item
P-a04 item
P-a05 item
P-a06 item
P-a07 item
P-a08 item
P-b01 item
P-b02 item
P-b03 item
P-b04 item
P-b05 item
P-b06 item
P-b07 item
P-b08 item
P-c01 item
P-c02 item
P-c03 item
P-c04 item
P-c05 item
P-c06 item
P-c07 item
P-c08 item
P-d01 item
P-d02 item
P-d03 item
P-d04 item
P-d05 item
P-d06 item
P-d07 item
P-d08 item
P-e01 item
P-e02 item
P-e03 item
P-e04 item
P-e05 item
P-e06 item
P-e07 item
P-e08 -------------------------------------------------- item
Q-a01 item
Q-a02 item
Q-a03 item
Q-a04 item
Q-a05 item
Q-a06 item
Q-a07 item
Q-a08 item
Q-b01 item
Q-b02 item
Q-b03 item
Q-b04 item
Q-b05 item
Q-b06 item
Q-b07 item
Q-b08 item
Q-c01 item
Q-c02 item
Q-c03 item
Q-c04 item
Q-c05 item
Q-c06 item
Q-c07 item
Q-c08 item
Q-d01 item
Q-d02 item
Q-d03 item
Q-d04 item
Q-d05 item
Q-d06 item
Q-d07 item
Q-d08 item
Q-e01 item
Q-e02 item
Q-e03 item
Q-e04 item
Q-e05 item
Q-e06 item
Q-e07 item
Q-e08 -------------------------------------------------- item
R-01 item
R-02 item
R-03 item
R-04 item
R-05 item
R-06 item
R-07 item
R-08 item
R-09 item
R-10 |
'CSS' 카테고리의 다른 글
| HTML/CSS 학습 내용 종합 TEST (0) | 2023.06.12 |
|---|---|
| CSS display:grid - template, gap, align, justify, place, grid-template-areas, grid-area, grid-column, grid-row (0) | 2023.04.06 |
| CSS font-family (0) | 2023.04.06 |
| CSS transform - translate, scale, skew, rotate, transform-origin (0) | 2023.04.05 |
| CSS animation - name, duration, timing-function, delay, iteration-count, direction, fill-mode (0) | 2023.04.05 |