์๋ก
์ฌ๋ด์์ ์ฌ์ฉ์์๊ฒ ์ด๋ฉ์ผ ๋ฐ์กํ๋ ํ
ํ๋ฆฟ์ ๋ง๋ค๊ธฐ์ํ html ์์
์ ํ๋ค.
๊ทธ๋ฐ๋ฐ a ํ๊ทธ๋ก ๋ง๋ ๋ฒํผ์ด ๋ฐ๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ์๋๋ ๊ฒ์ด๋ค.
์ด๋ค ๋๋ text-align ์์ฑ์ผ๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ๋๊ณ , ์ด๋ค ๋๋ ์๋๋ ๊ฒฝ์ฐ๊ฐ ์์๋๋ฐ ์ค๋ ๊ทธ ์ด์ ๋ฅผ ํ์คํ ์์๋ค!
์ด์์ฌํญ
a ํ๊ทธ๋ก ๋ง๋ ๋ฒํผ์ด ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ๋์ง์๋๋ค.
html ์ฝ๋
<!DOCTYPE html>
<html lang="ko">
<style>
์คํ์ผ์ฝ๋
</style>
<body>
<main>
<section>
<a href="" class="pillButton">์ด๋ฉ์ผ ์ธ์ฆํ๊ธฐ</a>
</section>
</main>
</body>
</html>
style ์ฝ๋
ํด๋น a ํ๊ทธ์ ๋ถ๋ชจ๋ body > main > section ์ด ์ ๋ถ์ด๊ณ , a ํ๊ทธ์ ์ํฅ์ ๋ฏธ์น ๋งํ ์คํ์ผ๋ง ์์ฑ์ ๋ฐ๋ก ์๋ค.
<style>
main {
box-sizing: border-box;
max-width: 68.4rem;
padding: 2.4rem;
background-color: #f2f4f6;
}
section {
padding: 4rem 4rem 6.4rem 4rem;
background-color: #ffffff;
}
.pillButton {
text-align: center;
width: 20rem;
background-color: #23d8f1;
}
</style>
a ํ๊ทธ์ `pillButton`์ด๋ผ๋ ํด๋์ค๋ฅผ ์ค์ ๋ฒํผ ๋ชจ์์ ์คํ์ผ๋ง์ ์ฃผ์๋ค.
๊ทธ๋ฆฌ๊ณ , ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํ๊ธฐ์ํด์ a ํ๊ทธ์ text-align: center ๋ฅผ ์ฃผ์๋ค.
๊ทธ๋ฐ๋ฐ!!
์์์ ์บก์ฒํ ํ๋ฉด์ฒ๋ผ ๋ฒํผ์ด ํ๋ฉด ๊ฐ์ด๋ฐ๋ก ๊ฐ์ง๋ ์๊ณ , ์ง์ ํ width ํฌ๊ธฐ๊ฐ ์ ์ฉ๋์ง๋ ์๋๋ค.
์์ธ
a ํ๊ทธ๋ CSS์ display ์์ฑ ์ค `inline` ์๋ฆฌ๋จผํธ ์ด๋ค.
inline ์๋ฆฌ๋จผํธ์ ํน์ง์ ํด๋น ํ๊ทธ๊ฐ ๋งํฌ์
ํ๊ณ ์๋ ์ปจํ
์ธ ์ ํฌ๊ธฐ ๋งํผ๋ง ๊ณต๊ฐ์ ์ฐจ์งํ๋ค.
๋ฐ๋ผ์ width๊ฐ ์ ์ฉ์ด ์๋๊ณ , ํฌ๊ธฐ๊ฐ ๋ฑ ํ
์คํธ ๊น์ง๋ง ์ฐจ์งํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
ํด๊ฒฐ
๋ฐ๋ผ์ ์ด a ํ๊ทธ๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌํ๋ ค๋ฉด ํผ์ ํ ์ค์ ์ฐจ์งํ๋๋ก `block` ์ด๋ผ๋ ์์ฑ์ผ๋ก ๋ฐ๊ฟ์ผ ํ๋ค.
`block` ์์๋ค์ ๋ค๋ฅธ ์์๋ฅผ ๋ฐ์ด๋ด๊ณ ํผ์์๋ง ํ ์ค์ ์ฐจ์งํ๋ค. ๋ํ์ ์ธ block ์์๋ก๋ <div>, <p>, <h1> ์ด ์๋ค.
display: block ์์ฑ์ ์ค๋ค.
.pillButton {
text-align: center;
display: block;
width: 20rem;
background-color: #23d8f1;
}
์ด์ width ๊ฐ ์ ์ ์ฉ๋๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
์ด์ ํ์ด์ง ์์ ์ ๊ฐ์ด๋ฐ์ ์์น์ํค๋ ค๋ฉด ๋ง์ง๋ง์ผ๋ก margin: auto ๋ฅผ ์ค๋ค.
๊ทธ๋ฌ๋ฉด width๋ฅผ ์ ์ธํ ๋๋จธ์ง ๊ณต๊ฐ์ margin์ด ๋๊ฐ์ด ๋๋์ด ๊ฐ์ง๋ฉด์ ์ ๋ ฌ์ ์ํจ๋ค.
.pillButton {
text-align: center;
display: block;
margin: auto; /* ์ถ๊ฐ */
width: 20rem;
background-color: #23d8f1;
}
์ฐธ๊ณ
https://www.codeit.kr/community/questions/UXVlc3Rpb246NWU1ZmMwNTlkNDQyYWMxZGI5YTMzY2I2
margin auto auto; ์ text-align: center; ์ ์ฐจ์ด๊ฐ ๋ญ๊ฐ์??
www.codeit.kr
https://www.codeit.kr/community/questions/UXVlc3Rpb246NWVjM2NiODgzZDVjMzk1ZmU0NDU5ZDk5
a ํ๊ทธ๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌํ๋ ๋ฐฉ๋ฒ
www.codeit.kr
https://www.daleseo.com/css-display-inline-block/
CSS์ display ์์ฑ: inline, block, inline-block
Engineering Blog by Dale Seo
www.daleseo.com
