๐ช๐ผํํ์ด์ง ํด๋ก __header
์ ๊ธ์๊ฐ ์ ์ฉ์๋๋ ํ๋๋
๋ซ๋ ํ๊ทธ ์์น ์๋ชป๋จ.
์์ ํ
๊ทธ๋๋ ์ ๋ ฌ ์๋์ด ์๊ฐํด๋ณด๋ flex-direction์ ์์ฑ ์ ํจ.
๊ฒฐ๊ณผ : ํ์ง๋ง ์ ์๋ฆฌ
์์ค ํ์ธํ๋
<header>
<div class="inner">
<div class="head-title">
<a href="#">์์ฌ๋ฏธ์ฝ๋ฉ</a>
</div>
<div class="head-blog">
<a href="#">์์ฌ๋ฏธ์ฝ๋ฉ ๋ธ๋ก๊ทธ ๋ชจ์</a>
</div>
</div>
</header>
ํ ์์ดํ
์ฉ ๋ค div๋ก ๋๋์ด์ ธ ์์๋ค.
์์ ํ
๊ทธ ๊ฐ๊ฐ์ div๋ก ๋๋์ด์ง aํ๊ทธ๋ค์ ๊ฐ์ผ
head-title์ flex๋ก ์ค์ ๋ฐ ์ ๋ ฌํด์ฃผ์๋ค.
๊ทธ๋๋ ์ ๋ ฌ ์๋จ.
๋ค์ ์์ค๋ฅผ ๋ณด๋ flex-box์ธ head-title์๋ ๋์ด ๋์ด ์ค์ ,
๊ทธ ๊ฒ์ ๊ฐ์ผ inner๋ ๋์ด ๋์ด๋ฅผ ๋ค ์ฃผ์ด์ผํ๋ค.
๐ญ ๋๋์ :
์ฒ์์ ์์ค ์์ด ํผ์ ํด๋ก ํ๋ ค๋ ์ ์๋์๋๋ฐ
์กฐ๊ธ์ฉ ํผ์ฆ ๋ง์ถฐ์ง๋๋ฏ ํ์ฌ ์ฌ๋ฐ์๋ค.
๊ทธ๋ฆฌ๊ณ ํฐ๋ํ ๊ฒ์ด ์๋ค.
1> flex๋ฅผ ํ์ฉํ๋ ค๋ฉด html๋๋๋ ํ๋์ฉ ๋ค ๋๋ ์ผํ๋ค.
flex๋ฐ์ค์ item๋ค์ด ๋ ๋ฉ์ด๋ฆฌ๋ค์ ์ง์ ํ๋ ๊ฒ.
๋งจ ์ฒ์ ์์๋๋ header๋ฅผ flex๋ก ํ์ผ๋
header๋ ๊ณต๊ฐ์ ์ก์์ค ๋ฟ์ด์๋ค.
2> ๋์ด์ ๋์ด๋ฅผ ์ฃผ์ด์ผ ์ ์์ ์ผ๋ก ์ ๋ ฌ.
๋์ด๋ฅผ flex-box์๋ง ์ฃผ๋ฉด ๋๋ค๊ณ ์๊ฐํ๋๋ฐ ์ ์ฉ์ด ์๋์ด
๊ทธ ๊ฒ์ ๊ฐ์ผ inner๋ ๋์ด ๋์ด๋ฅผ ์ฃผ๋ ์ ์ ์ ๋ ฌ๋จ.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ช๐ผํํ์ด์ง ํด๋ก __header), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@dbal9357/ํํ์ด์ง-ํด๋ก ํผ์header์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค