가운데 정렬!

primav·2024년 7월 25일

CSS 멋사

CSS

목록 보기

2/12

우선 내가 만들려고 했던 페이지는 이 페이지이다.
내가 헷갈렸던 부분들을 정리해서 나만의 것으로 만들어보자!

기본 작성 코드는 다음과 같다.

✔️ html

<!DOCTYPE html>
<html>
  <head>
    <title>Animals</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <img src="./images/cat.png" />
      <h1>CAT</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi, eos
        soluta eaque accusamus veritatis perspiciatis error! Beatae consequuntur
        amet id tenetur officia quas quos in nobis, quidem quae fuga expedita.
      </p>
    </div>
  </body>
</html>

✔️ css

body {
  background-color: #999;
}

div {
  background-color: white;
  width: 500px;
  margin: 100px auto;
  padding: 20px;
  box-sizing: border-box;

  text-align: center;
  border-bottom: 50px solid brown;
  border-radius: 20px 20px 0 0;
}

h1 {
  color: brown;
  font-size: 40px;
  border-bottom: 10px solid brown;
  width: fit-content; /*컨텐츠 크기에 맞춤 */
  margin: 20px auto; /*좌우 가용 공간에 margin을 두어 가운데 정렬*/
  padding: 0 20px;
}

p {
  background-color: #ddd;
  padding: 40px;
  border: 1px solid #999;
  color: #888;
}

💡 헷갈렸던 부분 1
이미지, 타이틀, 컨텐츠의 가운데 정렬

모든 요소들이 가운데 정렬되어있는데 이때는 어떤 타입 선택자를 선택하고 어떤 property로 가운데 정렬을 해야할 지 헷갈렸다.

➡️ text-align 속성 사용하기

  text-align: center;

❗️text-align 속성은 텍스트에만 적용될 것이라 생각했는데 아니다!!
❗️이 속성은 모든 inline 요소에 적용이 된다

따라서 오늘 작성한 요소 중 img, p 등은 모두 inline 요소 이므로 가운데 정렬이 된다.

💡 헷갈렸던 부분 2
CAT 밑의 밑줄

가운데 정렬은 해결이 되었고 밑줄은 border-bottom 속성을 이용하면 쉽게 해결될 줄 알았는데 CAT 글자 밑에만 밑줄이 생겨야 하는데 엄청 긴 밑줄이 생겨버렸다 ㅠㅠ

✔️ 문제의 코드

h1 {
  color: brown;
  font-size: 40px;
  border-bottom: 10px solid brown;
  padding: 0 20px;
}

이 문제의 이유는 크롬에서 검사에 들어가면 알 수 있다.
user agent stylesheet를 보면 h1의 display가 block으로 설정된 것을 볼 수 있다.

💡 display

block : 가로로 한 줄 다 씀

inline : 컨텐츠 크기 만큼만 씀

block 속성은 width를 지정하지 않을 때 부모 요소의 너비에 맞추어 가로를 다 쓴다.

따라서 저 밑줄이 그어진 너비 부분만큼 다 h1의 요소인 것이다. (cat = h1이 아님)

❗️cat은 h1의 content
❗️display: block 때문에 공간 전체에 태그 선택자인 h1 전체에 border 속성이 적용된 것
❗️h1 속의 content인 CAT이라는 text는 위에 작성한 text-align 속성으로 가운데 정렬이 된 것!!

실제 h1이 가운데 정렬된 것이 아니라 h1 속 content만 inline요소로 가운데 정렬이 된 것이다! (공간은 변화 없음)

✔️ 정답 코드

h1 {
  color: brown;
  font-size: 40px;
  border-bottom: 10px solid brown;
  padding: 0 20px;

  width: fit-content; /*컨텐츠 크기에 맞춤 */
  margin: 20px auto; /*좌우 가용 공간에 margin을 두어 가운데 정렬*/
}