์ค๋์ ์ง๊ธ๊น์ง ๋ฐฐ์ด CSS ๋ ์ด์์, positioning์ ์ฌ์ฉํ์ฌ, ๋ค์๊ณผ ๊ฐ์ ๋ ํ์ด์ง๋ฅผ ์์ฑํ์์ต๋๋ค.
Header์ ๋ ์ด์์์ด ์กฐ๊ธ ์ด๋ ต๋ค๊ณ ๋๊ปด์ ๋ค์ ํ๋ฒ ์ ๋ฆฌํด๋ณด๊ณ ์ ํฉ๋๋ค.
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 60px;
position: absolute;
box-sizing: border-box;
width: 100%;
}
๋จผ์ , ํ์คํ ์ง๊ณ ๋์ด๊ฐ์ผํ ๊ฒ์ด ์๋ค.
width:100%๋ผ๋๊ฒ์ ๋ถ๋ชจ์์์ ํฌ๊ธฐ(border,margin,padding)์ ํฌํจํ ๊ฐ์ด ์๋๋ผ, content์ ํฌ๊ธฐ๋ง์ ์์๋ฐ๋๋ค.
์ด๊ฑธ ํผ๋ํ์ฌ ์๊ณ ์์๋ค...๐
์ ์ฌ์ง๊ณผ ๊ฐ์ด header๊ฐ ์ ๋ ๊ฒ body๋ฅผ ๋์น๋ ์ด์ ๋,
width:100%๋ก์จ, body์ content + css์ ์ ์ํ header์ padding (15px 60px)๊น์ง ํฉ์ณ์ง๊ธฐ ๋๋ฌธ์, body๋ฅผ ๋์ด๊ฐ๋ฒ๋ฆฌ๋๊ฒ์ด๋ค.
๐ก
๊ทธ๋์, box-sizing: border-box; ๋ฅผ ์ฌ์ฉํ๋๊ฒ์ด๋ค!
border-box๋ border+padding+content๋ฅผ ํฌํจํด์ ๊ณ์ฐํด์ค๋ค.
์ ์ํ ์ ์ margin์ ํฌํจํ์ง ์๋๋ค.
๊ทธ๋์, border-box๋ก ์ธํด body์ content + css์ ์ ์ํ header์ padding (15px 60px)๊น์ง ํฉ์ณ์ง ๊ฐ์ด body์ width(์ ํํ๋ content)๊ฐ ๋์ผํ๋ฏ๋ก, ์๋์ผ๋ก ๊ณ์ฐ๋์ด content๊ฐ ์ค์ด๋๋๊ฒ์ ํ์ธํ ์ ์๋ค.
object-fit
object-fit ์์ฑ์ <img>๋ <video> ์์์ ์ฝํ ์ธ ํฌ๊ธฐ๋ฅผ ์ด๋ค ๋ฐฉ์์ผ๋ก ์กฐ์ ํด ์์์ ๋ง์ถ ๊ฒ์ธ์ง ์ง์ ํฉ๋๋ค.
์ฐจ๋ก๋๋ก fill, contain, cover์ด๋ค.
fill์ ๊ทธ์ ํฌ๊ธฐ์ ์ต๋ํ ๋ง์ถฐ์ ๋ฃ๊ธฐ ๋๋ฌธ์ ์ข ํก๋น๊ฐ ๊นจ์ง๋ค.
๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ contain, cover์ ์ฐจ์ด์ ์ ์ ์ํด์ ์ฌ์ฉํด์ผํ๋๋ฐ,
๋๋ค ๋ชจ๋ ์ข ํก๋น๋ฅผ ๋ง์ถ์ด ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ์ง๋ง,
containe: ์ฝํ ์ธ ๊ฐ ์ฝํ ์ธ ๋ฐ์ค ํฌ๊ธฐ์ ๋ง๋๋ก ํ๋ฉด์๋ ๊ฐ๋ก์ธ๋ก๋น๋ฅผ ์ ์งํ๊ฒ ๋๋ฏ๋ก, ์๋ก์ ๊ฐ๋ก์ธ๋ก๋น๊ฐ ์ผ์นํ์ง ์์ผ๋ฉด, ๋น๊ณต๊ฐ์ด ์๊ธธ ์ ์๋ค!
cover : ์ปจํ ์ด๋์ ๊ฐ๋ฅํ๋งํผ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ผ๋ฉด์ ์ข ํก๋น๋ ์ ์ง์์ผ์ค๋ค. ์ฆ, ์๊ณก๋์๊ณ ๋น๊ณต๊ฐ๋ ์๋ค.
์ค๋์ ์์ ์ค, ๊ฐ์ฅ ์๋ฌธ์ด์๋ ์ ..!๐ซฃ
<section id="highlights">
<h2>highlights</h2>
<ul id="destinations">
<li class="destination">
<img src="/images/places/miami.jpg" alt="miami streets" />
<p>Miami <strong>USA</strong></p>
</li>
<li class="destination">
<img src="/images/places/munich.jpg" alt="munich streets" />
<p>munich <strong>Germany</strong></p>
</li>
<li class="destination">
<img src="/images/places/barcelona.jpg" alt="barcelona streets" />
<p>barcelona <strong>Spain</strong></p>
</li>
</ul>
</section>
๊ฐ์์์, ์ธ๋ฒ์งธ ์ด๋ฏธ์ง์ ํด์๋(ํฌ๊ธฐ)์ ์ฐจ์ด๋ก ์ธ๋ก๊ธธ์ด๊ฐ 1,2๋ฒ์งธ ์ฌ์ง๋ณด๋ค ํฌ๋ค๋ณด๋, ์ข ํก๋น๋ฅผ ๋ง์ถ๋ค๋ณด๋ ๋ค๋ฅธ ์์๋ณด๋ค ์ข ๋ ์๊ฒ ๋ค์ด๊ฐ๊ฒ ๋๋ค๊ณ ์ค๋ช ํ์ จ๋ค. (ํด์๋๊ฐ ๋ ๋์๋ฐ, ๊ณ ์ ๋ ๋์ด๋ฅผ ๋ถ์ฌํ๋ฉด, ์ด๋ฏธ์ง๊ฐ ๋ ์ค์ด๋ ๋ค.)
li ํ๊ทธ์ img, p ํ๊ทธ๊ฐ ๋ด๊ฒจ์๊ณ , imgํฌ๊ธฐ์ ์ํด li์ ํฌ๊ธฐ๊ฐ ๊ฒฐ์ ๋๋ค๊ณ ํ๋ค.(pํ๊ทธ๋ ๊ธ์์๊ฐ ๋ง์ง ์๊ธฐ๋๋ฌธ์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ค)
.destination img {
width: 100%;
height: 200px;
box-shadow: 2px 4px 8px rgb(68, 67, 67);
border-radius: 10px;
object-fit: cover;
}
๊ทธ๋์, ๋ค์๊ณผ ๊ฐ์ ์ฐจ์ด๋ฅผ 1:1:1๋ก ๋ง์ถ๊ธฐ ์ํด์ ๋ค์๊ณผ ๊ฐ์ด, imgํ๊ทธ์ width:100%๋ฅผ ์ง์ ํ๋ฉด ๋๋ค๊ณ ๊ฐ์์์ ์ค๋ช ์ ํ์ จ์ง๋ง,,?
์ฌ์ ํ ๋ง์ง๋ง์์๋ ํฌ๊ธฐ๊ฐ ์๋ค...
๊ฐ์์์ ๋์น์ ์ด ์๋๊ฑด๊ฐ ๋ค์ ๋๋ ค๋ณด๊ณ , ์กฐ์๋ค์๊ฒ ๋ฌผ์ด๋ดค์ง๋ง ๊ฒฐ๊ณผ๋ ๋๊ฐ์๋ค...
์ ๊ทธ๋ด์ง ์๊ฐํด๋ณด์๋ค๐ค
๋ด๊ฐ ์๊ฐํด๋ณธ ์ด์ ๋ ์ด๋ ๋ค.
imgํฌ๊ธฐ์ ์ํด li์ ํฌ๊ธฐ๊ฐ ๊ฒฐ์ ๋๋๊ฒ์ธ๋ฐ, img์ width:100%์ ๋ฃ์ผ๋ฉด
img๋ li์ contentํฌ๊ธฐ๋ฅผ ์์๋ฐ๊ธฐ ๋๋ฌธ์ ์ฐ๋ฆฌ๊ฐ ์ํ๋ 1:1:1์ ๋น์จ์ด ๋ ์๊ฐ ์๋ค๊ณ ์๊ฐํ๋ค.
๊ทธ๋์, ๋ด๊ฐ ํด๊ฒฐํ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ๋ค.
๐ก
li์ ํฌ๊ธฐ๋ฅผ ๋๋ฑํ๊ฒ 3๋ฑ๋ถํ๊ณ , img์ width:100%์ ์ฌ์ฉํด์ img๋ฅผ 3๋ฑ๋ถํ๋๊ฒ..!
li๋ฅผ 3๋ฑ๋ถ ํ๊ธฐ ์ํด์, width๋ฅผ 100%๋ฅผ ๋ฃ๋๊ฒ์ด๋ค.
ul์ display:flex๊ฐ ์ง์ ๋์ด ์๊ธฐ ๋๋ฌธ์, ul์ ์ฝํ ์ธ ๊ฐ๋ก ์์ญ์ liํ๊ทธ๋ค์ด ๋์ผํ๊ฒ ๋ค์ด๊ฐ ๊ฒ์ด๋ค.
๊ทผ๋ฐ ๊ฐ์์์ ulํ๊ทธ์ ๋๋น๋ฅผ 90%๋ผ๊ณ ์ง์ ํด์๋๋ฐ, ์ด๋ ๊ฒ ํ๋ฉด ul์ ๋๋น๊ฐ ์ปค์ก์๋ li์ ์์๋ค์ ํฌ๊ธฐ๊ฐ ๋ฏธ๊ด์ ์ปค์ ธ์...
max-width๋ฅผ ์ง์ ํด์ ์ ๋นํ ์์์ ํฌ๊ธฐ๋ก ๋ง๋ค์ด์ฃผ์๋ค.
(์ฐธ๊ณ ๋ก, ul์ ๋ถ๋ชจ์์๋ section์ด๋ค.)
#destinations { ///ul
max-width: 1100px;
display: flex;
width: 90%;
margin: auto;
justify-content: center;
margin-bottom: 40px;
}
.destination { ///li
width: 100%;
margin: 0 20px;
text-transform: uppercase;
}
CSS์ ๋ ์ด์์์
ํญ์ ๋๋ผ๋๊ฒ์ด์ง๋ง... ์ด๋ ต๋ค ..ใ ใ ใ
๋ฅ์ํด์ง๋ ๊ทธ๋ ๊น์ง ํ์ดํ !