[HTML+CSS][ํ๋ ์ค ๋ฐ์ค ๋ ์ด์์] 01 - ํ๋ ์ค ๋ฐ์ค ๋ ์ด์์๊ณผ ๊ธฐ๋ณธ ์์ฑ๋ค
[HTML+CSS][๋ฏธ๋์ด ์ฟผ๋ฆฌ] 03 - ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํด ์น ๋ฌธ์ ๋ง๋ค๊ธฐ [HTML+CSS][๋ฏธ๋์ด ์ฟผ๋ฆฌ] 02 - ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ ์ฉํ๊ธฐ [HTML+CSS][๋ฏธ๋์ด ์ฟผ๋ฆฌ] 01 - ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ดํดํ๊ธฐ [HTML+CSS][๋ฐ์ํ ์น] 03 - ๊ฐ๋ณ..
onelight-stay.tistory.com
ํ๋ ์ค ๋ฐ์ค ํญ๋ชฉ์ ๋ฐฐ์นํ๊ธฐ ์ํ ์์ฑ๋ค์ ๋ํด์ ์์๋ณด๋๋ก ํ์.
justify-content ์์ฑ - ์ฃผ์ถ ๊ธฐ์ค์ ๋ฐฐ์น ๋ฐฉ๋ฒ ์ง์
๋ฐ์ํ ์น ๋์์ธ์ ์ํด ๊ฐ๋ณ ๊ทธ๋ฆฌ๋ ๋ ์ด์์ ์ฌ์ฉ ์
๊ธ์ ํฌ๊ธฐ๋ ์ ๋์ ์ผ๋ก ๋ฐ๋๋ ๊ฒ์ด๋ค.
align-items ์์ฑ, align-self ์์ฑ - ๊ต์ฐจ์ถ ๊ธฐ์ค์ ๋ฐฐ์น ๋ฐฉ๋ฒ ์ง์
๊ต์ฐจ์ถ์ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์น ๋ฐฉ๋ฒ์ ์กฐ์ ํ๋ ๊ฒ์ด๋ค.
align-self ์์ฑ์ ์ด์ฉํ๋ฉด ํ๋ ์ค ํญ๋ชฉ์ ๊ฐ๋ณ์ ์ผ๋ก ๋ฐฐ์นํ ์ ์๋ค.
align-self๋ ํ๋ ์ค ํญ๋ชฉ์ ๋ถ๋ชจ ์์ฑ ๊ฐ์ ๋ฐ๋ auto ๊ฐ์ ์ ์ธํ๋ฉด
align-items์์์ ์์ฑ๊ฐ๊ณผ ๊ฐ๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๊ต์ฐจ์ถ์ ๋ฐฐ์น ๋ฐฉ๋ฒ ์ง์ ํ๊ธฐ</title>
<style>
#container {
width: 500px;
height: 100px;
margin: 0 auto 20px;
display: flex;
align-items: center; /* ๊ต์ฐจ์ถ ๊ธฐ์ค์ ๋ฐฐ์น๋ฐฉ๋ฒ ์ค์ */
border: 2px solid black;
}
#container div {
width: 100px;
border: 2px black solid;
background: lightgray;
}
#box1 { /* box1์ ๋ฐฐ์น๋ง ๋ฐ๋ก ์ค์ */
align-self: flex-start;
}
p {
font-weight: bold;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="box1"><p>1</p></div>
<div id="box2"><p>2</p></div>
<div id="box3"><p>3</p></div>
</div>
</body>
</html>
align-content ์์ฑ - ์ฌ๋ฌ ์ค์ผ ๋์ ๋ฐฐ์น ๋ฐฉ๋ฒ ์ง์
ํ๋ ์ค ํญ๋ชฉ์ด ์ฌ๋ฌ ์ค์ ๊ฑธ์ณ ํ์๋ ๋
align-content ์์ฑ์ ์ฌ์ฉํ๋ฉด ๊ต์ฐจ์ถ ๋ฐฉํฅ์ ๋ฐฐ์ฐจ ๋ฐฉ๋ฒ์
์ง์ ํ ์ ์๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content</title>
<style>
.box {
width: 500px;
height: 150px;
margin: 0 auto 20px;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: 2px solid black;
}
#container1 {
-ms-align-content: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
}
#container2 {
-ms-align-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
}
#container3 {
-ms-align-content: center;
-webkit-align-content: center;
align-content: center;
}
#container4 {
-ms-align-content: space-between;
-webkit-align-content: space-between;
align-content: space-between;
}
#container5 {
-ms-align-content: space-around;
-webkit-align-content: space-around;
align-content: space-around;
}
.box div {
width: 200px;
border: black solid 2px;
background: lightgray;
}
h1 {text-align: center;}
p {
font-weight: bold;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h1>align-content : flex-start (๊ธฐ๋ณธ๊ฐ)</h1>
<div id="container1" class="box">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h1>align-content : flex-end</h1>
<div id="container2" class="box">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h1>align-content : center</h1>
<div id="container3" class="box">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h1>align-content : space-between</h1>
<div id="container4" class="box">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h1>align-content : space-around</h1>
<div id="container5" class="box">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
</body>
</html>
ํ๋ ์ค ๋ฐ์ค ํญ๋ชฉ ๋ฐฐ์น๋ฅผ ์ข ๋ ๋ค์ํ๊ฒ ํ ์ ์๋ ์์ฑ๋ค์ด๋ผ์ ๊ทธ๋ฐ์ง
์๋ ๋ง๊ณ ์ธ์์ผ ํ ๊ฒ๋ค์ด ์ฐ๋๋ฏธ์ธ ๊ฒ ๊ฐ๋ค.
์ฐจ๊ทผ์ฐจ๊ทผ ์ธ์์ ํ์ํ ๋ ๊ผญ ์จ๋จน์ด์ผ๊ฒ ๋ค.
< ์ฐธ๊ณ >
Do it! HTML5+CSS3 ์น ํ์ค์ ์ ์
โป ํด๋น ๊ธ์ ์ต๋ ๋ชฉ์ ์ผ๋ก ์์ฑ๋ ๊ธ์ ๋๋ค โป
๋๊ธ