질문있습니다!

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 01(before after 기본 사용법)

작성

127

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .gnb {
      display: flex;
      justify-content: center;
      height: 100vh;
      align-items: center;
    }

    .gnb a {
      color: black;
      font-size: 2.5rem;
      text-decoration: none;
    }

    .gnb::before {
      content: '01';
      font-size: 1.5rem;
      background-color: royalblue;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="gnb">
    <a href="#">CodingWorks Online Class</a>
  </div>
</body>

</html>
flex를 body에 말고 부모인 .gnb에 줬더니 a:before가 크기를 가지는데 
이것도 position: absolute | fixed와 같이 flex를 준 요소의 자식들은 inline-block으로 바뀌는건가요 ?

HTML/CSS jquery

답변 2

코딩웍스(Coding Works)

지식공유자

해당 예제는 플렉스랑 관계없는 예제인데 플렉스 질문을 하셨네요.

다음에는 예제와 관련된 질문 부탁드립니다.

질문 하신 내용에 대한 답은 드릴게요.

.gnb에 display: flex를 주면 자식요소인 a가 인라인블럭 성질을 가지면서 가로 배치됩니다.
자식요소가 블록요소인 경우 가로배치가 자동으로 됩니다.
역시 인라인 블록 성질이 되면서 크기값을 가질 수 있게 됩니다.
단, 인라인 블록으로 변경하면 오른쪽에 폰트 관련 마진이 5픽셀 정도 생기지만 display: flex를 주면 자식요소 그런 마진이 안생기면서 깔끔하게 가로배치됩니다.

position: absolute | fixed와 같이 flex를 준 요소의 자식들은 inline-block으로 바뀌는건가요?

위에 말씀하신 내용으로 이해하시면 display: flex를 주면 자식요소에 대해 충분히 잘 이해하고 있다고 생각됩니다.

rudals8920

질문자

정말 감사합니다!!

인프런 커뮤니티 질문&답변

질문있습니다!