[๐ฑ๋ชฉ์ฐจ๐ฑ]
- ๊ฐ์ ํด๋์ค ์ ํ์
- hover
- active
01. display ์์ฑ์ด๋?
display ์์ฑ์ ํ๋ฉด์ ์ด๋ป๊ฒ ๋ณด์ฌ์ง์ง ๊ฒฐ์ ํ๋ ์์ฑ์ผ๋ก html ํ๊ทธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก block๊ณผ inline์์ ๋ ์ค ํ๋๋ฅผ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ๊ฐ์ง๋๋ค. display ์์ฑ๊ฐ์ ์ด 4๊ฐ์ง ์ ๋๋ค. ์์๋ ์๋ก ์์ ๋์น๊ตฌ์ ํจ๊ป ์ด์ 5๊ฐ์ง์ ๋๋ค. ์๋ฅผ๋ค์ด ์ดํด๋ณด๊ฒ ์ต๋๋ค.
01-1. inline
<span>/<a>/<img>ํ๊ทธ์ ๊ฐ์ด ๋ด์ฉ๋ฌผ(content)๋งํผ๋ง ๊ณต๊ฐ์ด ํ ๋น๋ฉ๋๋ค. content๋งํผ๋ง ๊ณต๊ฐ์ ํ ๋นํ๊ธฐ ๋๋ฌธ์ width, height,padding,margin์ ์ฌ์ฉํ์ฌ ์ง์ ํ ์ ์์ต๋๋ค. ์ ๊ฐ ๋ฐฑ๋ ์ฒ๋ ์ฝ์งํด์ ์๋๋ค. ์๋ฉ๋๋ค.!! ์ค๋ฐ๊ฟ ์์ด ๋ฐ๋ก ์์ ๋ฐฐ์น๋ฉ๋๋ค.
inline ์์๊ฐ ์๋ ์์์ display:inline; ์ ์ถ๊ฐํ๋ฉด ์์๋ฅผ inline์ผ๋ก ๋ฐ๊ฟ ์ ์์ต๋๋ค. ์๋ฅผ๋ค๋ฉด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>display ์์ฑ</title>
<style>
.d-inline1 {
display: inline;
background-color: blue;
}
/* div ๋ block ์์ */
/* inline์ธ ์์ข
ํ๋ฌ span ํ๊ทธ ์ฒ๋ผ ๋ฐ๋๋ค. */
.d-inline2 {
display: inline;
background-color: red;
}
</style>
</head>
<body>
<h2>inline</h2>
<ol>
<li>span, a, img ํ๊ทธ์ ๊ฐ์ด ๋ด์ฉ๋ฌผ๋งํผ(content)๋ง ๊ณต๊ฐ ํ ๋น๋จ</li>
<li>
content ๋งํผ ๊ณต๊ฐ์ ํ ๋นํ๊ธฐ ๋๋ฌธ์ width, height, padding, margin ์ฌ์ฉ
๋ถ๊ฐ
</li>
<li>์ค๋ฐ๊ฟ ์์ด ๋ฐ๋ก ์์ ๋ฐฐ์น</li>
</ol>
<div class="d-inline1">d-inline1 ํด๋์ค๋ฅผ ๊ฐ๊ณ ์๋ div์
๋๋ค.</div>
<div class="d-inline2">d-inline2</div>
<hr />
</body>
</html>inline
- span, a, img ํ๊ทธ์ ๊ฐ์ด ๋ด์ฉ๋ฌผ๋งํผ(content)๋ง ๊ณต๊ฐ ํ ๋น๋จ
- content ๋งํผ ๊ณต๊ฐ์ ํ ๋นํ๊ธฐ ๋๋ฌธ์ width, height, padding, margin ์ฌ์ฉ ๋ถ๊ฐ
- ์ค๋ฐ๊ฟ ์์ด ๋ฐ๋ก ์์ ๋ฐฐ์น
๋ธ๋ฝ์์์ธ <div>ํ๊ทธ๋ฅผ inline์ผ๋ก ๋ง๋ค์ด ๋๋ํ ๋ฐฐ์น ํ๊ฒ ํ์ต๋๋ค.
01-2. Block
<div>/ <p>/ <ul>/ <ol> ํ๊ทธ์ ๊ฐ์ด ํ ์ค์ ๋ค ์ฐจ์งํฉ๋๋ค. inline ์์์ ๋ฌ๋ฆฌ width , height, paddina, margin์ด ์ฌ์ฉ๊ฐ๋ฅํ๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>display ์์ฑ</title>
<style>
.d-block1 {
display: block;
background-color: blue;
width: 500px;
/* width๋ฅผ ์ค์ฌ๋ ๋ฌด์กฐ๊ฑด ๊ฐํ์ฒ๋ฆฌ๋ ๋จ */
}
.d-block2 {
display: block;
background-color: red;
width: 400px;
}
</style>
</head>
<body>
<h2>block</h2>
<ol>
<li>div, p, ul, ol ํ๊ทธ์ ๊ฐ์ด ํ ์ค์ ๋ค ์ฐจ์งํจ</li>
<li>inline ์์์ ๋ฌ๋ฆฌ width, height, padding, margin ์ฌ์ฉ ๊ฐ๋ฅ</li>
</ol>
<div class="d-block1">d-block1 ํด๋์ค๋ฅผ ๊ฐ๊ณ ์๋ div์
๋๋ค.</div>
<div class="d-block2">d-block2</div>
<hr />
</body>
</html>
block
- div, p, ul, ol ํ๊ทธ์ ๊ฐ์ด ํ ์ค์ ๋ค ์ฐจ์งํจ
- inline ์์์ ๋ฌ๋ฆฌ width, height, padding, margin ์ฌ์ฉ ๊ฐ๋ฅ
block์ width๋ฅผ ์ค์ฌ๋ ๋ฌด์กฐ๊ฑด ๊ฐํ์ฒ๋ฆฌ๊ฐ ๋๋ค๋ ํน์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
01-3. inline - Block
block ์์์ฒ๋ผ ํฌ๊ธฐ ์ง์ ์ ํ๋ inline ์ฒ๋ผ ๋ค๋ฅธ ๋ด์ฉ๋ค๊ณผ ๊ฐ์ ์ค์ ๊ณต์ ํ๊ณ ์ถ์ ๊ฒฝ์ฐ ์ฌ์ฉํฉ๋๋ค. ์ฆ, ํฌ๊ธฐ์ง์ ์ ํ๊ณ ์ถ๊ณ ๊ฐํ์ฒ๋ฆฌ๋ ํ๊ธฐ ์ซ์๋ ์ฌ์ฉํฉ๋๋ค. block๊ณผ inline ์์์ ์ฅ์ ์ ๊ฐ์ง๋๋ค. ์์๋ก ๋ณด์๋ฉด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>display ์์ฑ</title>
<style>
/* inlineํน์ฑ์ ๊ฐ์ง์ฑ๋ก block ํํ๊ฐ ๋จ -> ๊ฐํ์ฒ๋ฆฌ x */
.d-inline-block1 {
display: inline-block;
background-color: blue;
}
.d-inline-block2 {
display: inline-block;
background-color: red;
width: 200px;
height: 300px;
/* margin: 20px; */
/* CSS ๋จ์ถ ํ๋กํผํฐ */
/* margin-top: 20px; */
/* margin-bottom: 20px; */
/* margin-right: 40px; */
/* margin-left: 40px; */
/* margin: 20px 40px 20px 40px; */
margin: 20px 40px;
}
</style>
</head>
<body>
<h2>inline-block</h2>
<ol>
<li>block ์์์ฒ๋ผ ํฌ๊ธฐ ์ง์ ์ ํ๋</li>
<li>inline ์์์ฒ๋ผ ๋ค๋ฅธ ๋ด์ฉ๋ค๊ณผ ๊ฐ์ ์ค์ ๊ณต์ ํ๊ณ ์ถ์ ๊ฒฝ์ฐ</li>
<li>block๊ณผ inline ์์์ ์ฅ์ ์ ๊ฐ์ง</li>
</ol>
<div class="d-inline-block1">
d-inline-block1 ํด๋์ค๋ฅผ ๊ฐ๊ณ ์๋ div์
๋๋ค.
</div>
<div class="d-inline-block2">d-inline-block2</div>
</body>
</html>inline-block
- block ์์์ฒ๋ผ ํฌ๊ธฐ ์ง์ ์ ํ๋
- inline ์์์ฒ๋ผ ๋ค๋ฅธ ๋ด์ฉ๋ค๊ณผ ๊ฐ์ ์ค์ ๊ณต์ ํ๊ณ ์ถ์ ๊ฒฝ์ฐ
- block๊ณผ inline ์์์ ์ฅ์ ์ ๊ฐ์ง
01-4. none vs hidden
none์ ์์๋ฅผ ํ๋ฉด์ ํ์ํ์ง ์์ต๋๋ค. ์ฌ๊ธฐ์ ์ฃผ์ํ ์ ์ display : none;์ ์์๊ฐ ์ฐจ์งํ๋ ๊ณต๊ฐ๋ ์ฌ๋ผ์ง๋๋ค. ์ด ์ ์ด visibility :hidden;๊ณผ์ ์ฐจ์ด ์ ๋๋ค. hidden๋ ๋ณด์ด์ง ์์ง๋ง none๊ณผ ๋ค๋ฅด๊ฒ ๊ณต๊ฐ์ ์ฐจ์งํฉ๋๋ค.
02. flex
display: flex; ๋ CSS3 ๋ฑ์ฅ๋ถํฐ ๋ํ๋ ๋ฐฉ์์ผ๋ก ํ๋ฉด ๋ ์ด์์์ ๊ตฌ์ฑํ ๋, ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ ์ค ํ๋์ ๋๋ค. ๋ถ๋ชจ์์์ flex๋ฅผ ์ ์ธํ๋ฉด, ์์ ์์๋ค์ ๋ ์ด์์์ ๋ณ๊ฒฝ์ํต๋๋ค. ์ฐ์ flex๋ ์ผ๋ฐ์ ์ผ๋ก Flex container์ ์ฌ๋ฌ๊ฐ์ Flex item, 2๊ฐ์ ๊ฐ๋ ์ผ๋ก ๋๋ฉ๋๋ค.
<div class="container">
<div class="item1 items">1</div>
<div class="item2 items">2</div>
<div class="item3 items">3</div>
<div class="item4 items">4</div>
<div class="item5 items">5</div>
</div>๋ถ๋ชจ ์์์ "flex" ๋ฅผ ์ ์ธํ๋ฉด, item(์์)์ด ๊ฐ๋ก(row)๋ฐฉํฅ์ผ๋ก ๋ฐฐ์น๋ฉ๋๋ค. ๋ถ๋ชจ์์๊ฐ flex container๊ฐ ๋๊ณ , ์์๋ค์ด ์๋์ผ๋ก flex item์ด ๋ฉ๋๋ค. ์ด ๋์ ๋๋๋ ์ด์ ๋ ์๋ก ์ ์ฉํ ์ ์๋ CSS ์์ฑ์ด ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ๋๋ค.
- flex-container -> flex-direction/ justify-content / align-items
- flex-item -> flex/ align-self / order
์ ๊ฐ์ ์์ฑ์ ์ ์ฉํ ์ ์์ต๋๋ค. flex์ ๊ฐ๋ ์ ์ดํดํ๊ธฐ ์ํด์๋ axis์ ๋ํด์ ์ดํดํ๊ณ ์์ด์ผ ํฉ๋๋ค.
02-1 main/cross axis (์ฃผ์ถ , ๊ต์ฐจ์ถ)
์ฃผ์ถ (main axis)๋ ์ฌ๋ฌ ๊ฐ์ flex-item์ด ์์๋๋ก ๋ฐฐ์น๋๋ ๋ฐฉํฅ์ผ๋ก ๊ต์ฐจ์ถ(cross axis)๋ ์ฃผ์ถ๊ณผ ์์ง์ ์ด๋ฃจ๋ ๋ฐฉํฅ์ ๋๋ค. ๊ธฐ๋ณธ์ ์ธ ์ฃผ์ถ์ ๊ฐ์ flex-container์ flex-direction ์์ฑ์ ์ํด ๊ฒฐ์ ๋๋ฉฐ, default๊ฐ์ row(๊ฐ๋ก)์ ๋๋ค. ํ๋ฉด์์ ๋ณด๋ฉด flex-item๋ค์ด ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ ๋ฐฉํฅ์ผ๋ก ๋ฐฐ์น๋๋ ๊ฒ์ด๊ฒ ์ฃ ? justify-content ์์ฑ์ ์ฃผ์ถ์ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌํ๋ฉฐ, align-items๋ ๊ต์ฐจ์ถ์ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌํฉ๋๋ค. ํ๋ํ๋ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
02-2 flex-direction (์ฃผ์ถ ๋ฐฉํฅ์ค์ )
flex์ ๋ฐฉํฅ์ ์ค์ ํฉ๋๋ค.
- row(default) : ์ํ ์ ๋ ฌ (์ข -> ์ฐ)
- row-reverse : ์ํ ์ ๋ ฌ(์ฐ -> ์ข)
- column : ์์ง ์ ๋ ฌ(์ -> ์๋)
- column-reverse : ์์ง ์ ๋ ฌ(์๋ -> ์)
02-3 justify-content (์ฃผ์ถ ์์ดํ ์ ์ด๋ป๊ฒ ๋ฐฐ์นํ ๊ฒ์ธ์ง)
justify-content๋ ์ฃผ์ถ์ ์์ดํ ๋ค์ ์ด๋ป๊ฒ ๋ฐฐ์นํ ๊ฒ์ธ์ง ์ ํฉ๋๋ค. ์ข ๋ฅ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- flex-start(default) : ์์ดํ ์ ์ฃผ์ถ์ ๋ํด์ start ์ง์ ์ ๊ธฐ์ค์ผ๋ก ๋์ดํฉ๋๋ค.
- flex-end : ์์ดํ ์ ์ฃผ์ถ์ ๋ํด์ end ์ง์ ์ ๊ธฐ์ค์ผ๋ก ๋์ดํฉ๋๋ค.
- space-between : ์ฒ์๊ณผ ๋ง์ง๋ง ์์ดํ ์ ์ ๋์ ๋ถ์ด๊ณ , ๋๋จธ์ง ์์ญ์ ๊ณตํํ๊ฒ ๋๋๋๋ค.
- space-around : ์์ดํ ๋ค์ ๋ชจ๋ ์ฌ๋ฐฑ์ ๊ณตํํ๊ฒ ๊ฐ๋๋กํฉ๋๋ค. (์ ๋ ์์ญ์ ๋จ์๊ฐ 1 ์ด๋ผ๋ฉด, ๋๋จธ์ง ์์ญ์ ๋จ์๋ 2)
- space-evenly : start๋ถํฐ ์ฒซ ์์ดํ ์ ๊ฐ๊ฒฉ, ์์ดํ ๋ผ๋ฆฌ์ ๊ฐ๊ฒฉ, ๋ง์ง๋ง ์์ดํ ๋ถํฐ end ๊น์ง์ ๋ชจ๋ ๊ฐ๊ฒฉ์ด ์ผ์ ํฉ๋๋ค.
์๋ฅผ๋ค์ด flex-direction์ด row ๋ก default ์ํ๋ก ์กด์ฌํ ๋ justify-content ์ ์ฉ ์์๋ฅผ ๋ณด์ฌ๋๋ฆฌ์๋ฉด
๋ค์๊ณผ ๊ฐ์ด ํ์ธํ ์ ์์ต๋๋ค.
02-4 align-items (๊ต์ฐจ์ถ์ ๋ํด์ ์์ดํ ์ ์ด๋ป๊ฒ ๋ฐฐ์นํ ๊ฒ์ธ์ง?)
align-items๋ ์ฃผ์ถ์ด ์๋ ๊ต์ฐจ์ถ์ ๋ํด์ ์์ดํ ์ ์ด๋ป๊ฒ ๋ฐฐ์นํ ๊ฒ์ธ์ง ์ ํฉ๋๋ค. ์ข ๋ฅ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- stretch (default) : container์ ๊ต์ฐจ์ถ์ ์ฑ์ฐ๊ธฐ ์ํด์ ๋๋ฆฝ๋๋ค. flex-items๋ค์ด width, height๊ฐ ์ง์ ๋์ด์๋ค๋ฉด ๋ณํ์ง ์์ต๋๋ค.
- flex-start : ๊ต์ฐจ์ถ์ ๋ํ์ฌ ์์์ ์ผ๋ก ์ ๋ ฌํฉ๋๋ค.
- flex-end : ๊ต์ฐจ์ถ์ ๋ํ์ฌ ๋์ ์ผ๋ก ์ ๋ ฌํฉ๋๋ค.
- center : ๊ต์ฐจ์ถ์ ๋ํ์ฌ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌํฉ๋๋ค.
- baseline : ์์ดํ ์ ํ ์คํธ์ ๋ฒ ์ด์ค ๋ผ์ธ์ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌํฉ๋๋ค.
flex-direction์ด col ์ผ๋ ์ฃผ์ถ์ ์ธ๋ก์ ๋๋ค. ๊ทธ๋ฌ๋ฉด ๊ต์ฐจ์ถ์? ๊ฐ๋ก์ธ row๊ฐ ๋๊ฒ ์ฃ ์ฌ๊ธฐ์ align-items:stretch;๋ผ๋ฉด ๊ต์ฐจ์ถ ๊ฐ๋ก ๋ํด์ ๊ฐ ์์ดํ ๋ค์ด ๊ฐ๋ก๋ก ๋์ด๋ ๊ฒ์ ๋๋ค.
์์ ๊ทธ๋ฆผ์ flex-direction:col;์ผ๋ align-items๋ฅผ ์ ์ฉํ ์์์ ๋๋ค. flex-direction์ด row์ผ๋๋ ์ด๋ป๊ฒ ๋ ๊น์ ?
row์ ๊ต์ฐจ์ถ์ธ col ์ฆ, ์ธ๋ก๋ก stretch๊ฐ ๋ฉ๋๋ค.
์์ ๊ทธ๋ฆผ์ flex-start ๊ฐ ์ ์ฉ๋ ํ๋ฉด์ ๋๋ค. ์์์ ๋ถํฐ ์์ํ๊ณ ์์ผ๋ฏ๋ก ์์ ๊ต์ฐจ์ถ์ col์ธ๊ฒ์ ์ ์ ์๊ณ ์ฃผ์ถ์ row์์ ์ ์ ์์ผ๋ฏ๋ก flex-direction์ด row์ธ๊ฒ์ ์ ์ ์์ต๋๋ค.
๊ต์ฐจ์ถ(col)์ ๋์ธ ์๋๋ถํฐ ์์ดํ ๋ค์ด ์ ๋ ฌ๋๋๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
๋ง์ฐฌ๊ฐ์ง๋ก ๊ต์ฐจ์ถ ์ธ๋ก์ ์ค์๋ถํฐ item์ด ์ฃผ์ถ๋ฐฉํฅ์ผ๋ก ์ ๋ ฌ๋ฉ๋๋ค.
baseline์ ๊ธ์์ ๋ฐ๋ผ ์์น๋๋ฏ๋ก ์์ ์ฃผ์ถ์ ๊ฐ๋ก ์ด๋ฏ๋ก ๊ต์ฐจ์ถ ์๋์ ์์ ๋ฐ๋ผ ๊ธ์จ์ ์๋๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ๋ ฌ๋ฉ๋๋ค.
๋ค์์ item๋ค์ด ์ผ์ชฝ๋ถํฐ ์ ๋ ฌ๋์ด์์ต๋๋ค. ์ด ๊ฒฝ์ฐ ๊ต์ฐจ์ถ์ ๊ฐ๋ก์ธ ์ฆ, row์์ ์ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก flex-direction์ col ์ธ๋ก์ ๋๋ค. ์ฆ, ์ ๊ทธ๋ฆผ์ ์ฃผ์ถ์ col ์ ๋๋ค. col์ ๊ธฐ์ค์ผ๋ก ๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๋ง์ฐฌ๊ฐ์ง๋ก ๊ต์ฐจ์ถ์ end ์ง์ ์ธ ์ค๋ฅธ์ชฝ๋ถํฐ ๋ฐฐ์น๋์ด์์ต๋๋ค.
๊ต์ฐจ์ถ๊ธฐ์ค ์ผ์ชฝ๊ณผ ์ค๋ฅธ์ชฝ ๊ฐ์ด๋ฐ์ item์ด ์ ๋ ฌ๋ฉ๋๋ค.
02-5 flex-wrap
items์ ์ฌ๋ฌ ์ค ๋ฌถ์ (๊ฐํ) ์ ์ค์ ํฉ๋๋ค. ์ข ๋ฅ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- nowrap (default)-> ๋ชจ๋ Items๋ฅผ ์ฌ๋ฌ ์ค๋ก ๋ฌถ์ง ์๊ณ ํ์ค๋ก ํ์ํฉ๋๋ค.
- wrap -> items๋ฅผ ์ฌ๋ฌ์ค๋ก ๋ฌถ์ต๋๋ค.
- wrap-reverse -> items๋ฅผ wrap์ reverse๋ก ์ฌ๋ฌ์ค๋ก ๋ฌถ์ต๋๋ค.
์ฃผ์ถ์ด ์ธ๋ก์ธ ์ํฉ์์ (flex-direction : col) ์๋ฅผ ๋ค๊ฒ ์ต๋๋ค.
์๋ flex-wrap์ ์ ์ฉ์ํค์ง ์์๋ defaultํ ๊ธฐ๋ณธ๊ฐ์ ๋๋ค. ์ฌ๊ธฐ์ wrap์ ์ ์ฉํ๋ค๋ฉด
๋ค์๊ณผ๊ฐ์ด container์์ ๋ถ์กฑํ items์ ๊ณต๊ฐ์ ์ฃผ์ถ์ ๊ธฐ์ค์ผ๋ก ๋ฌถ์ด ์ ๋ ฌํฉ๋๋ค. ์ฌ๊ธฐ์ reverse๋ฅผ ์์ผ์ค๋ค๋ฉด
์ด๋ ๊ฒ ๊ฑฐ๊พธ๋ก ๋ฌถ์ฌ ์ ๋ ฌ๋ฉ๋๋ค.
02-6 align-content
align-content๋ ์ฌ๋ฌ ํ์ ๋ํ ์ ๋ ฌ๋ก wrap ์ํ์์ ์์ดํ ์ด ๋ ์ค ์ด์์ผ๋ ์์ง์ถ ๋ฐฉํฅ์ ์ค์ ํ๋ค๋ ์กฐ๊ฑด์ด ์์ต๋๋ค. items๊ฐ ํ์ค์ผ ๊ฒฝ์ฐ์ align-items ์์ฑ์ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค. ์ข ๋ฅ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- stretch
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
item๋ค์ด wrap์ํ์์ ์์๋ฅผ ๋ค๊ฒ ์ต๋๋ค.
๊ต์ฐจ์ถ์ด row์ด๋ฏ๋ก ์ผ์ชฝ๋ถํฐ ์ ๋ ฌ๋ฉ๋๋ค.
๋ง์ฐฌ๊ฐ์ง๋ก ๊ต์ฐจ์ถ row์ end์ธ ์ค๋ฅธ์ชฝ๋ถํฐ ์ ๋ ฌ๋ฉ๋๋ค.
๊ต์ฐจ์ถ row์ ๋ํด ์ผ์ชฝ๊ณผ ์ค๋ฅธ์ชฝ์ items๋ค์ ๋ถ์ธ ํ ์ ๋ ฌํฉ๋๋ค.
+์ค์ต. ๋ค์ํ ํค๋ ๋ง๋ค๊ธฐ
solution)
๋ธ๋ญ์์๋ผ width๋ฅผ ์ง์ ํด์ค์ผ ์๋๋๊ฑด๊ฐ..?
