• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

가상클래스 질문 드려도 될까요? 너무 헷갈립니다 ㅠㅠㅁ

21.01.19 16:14 작성 조회수 180

1

<!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>

    .nav {
      border: 1px solid black;
      width: 700px;
      height: 100px;
      margin: auto;
      text-align: center;
      line-height: 100px;
    }

    .nav a {
      /* border: 1px solid black; */
      color: black;
      text-decoration: none;
      margin-right: 15px;
      font-size: 1.5rem;
      position: relative;
    }

    .nav a::before {
      content: '';
      width: 100%;
      height: 3px;
      background-color: royalblue;
      display: inline-block;
      position: absolute;
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>

<body>
  <div class="nav">
    <a href="#">HOME</a>
    <a href="#">ABOUT</a>
    <a href="#">SERVICE</a>
    <a href="#">PORTFOLIO</a>
    <a href="#">CONTACT</a>
  </div>
</body>

</html>
a에 position:relative를 주고 a::before에 position:abosolute를 주면
a::before의 width:100% 값이 a의 콘첸츠 값만큼 가지는데
position을 주지않으면 nav의 width값 만큼 가집니다 왜 이렇게 작동하는지 잘 모르겠습니다 ㅠㅠㅠ
만약 a::before가상요소를 주게 되면 a::before는 a의 자식요소가 되는건가요
그리구 다른 질문인데요 .gnb li에 float:left를 주면 부모인 .gnb는
높이값을 왜 잃지 않고 가지고 있는건가요 ? ㅠ.ㅠ
course-thumbnail

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

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 02(보더 애니메이션 네비게이션 호버 이펙트)

강의실 바로가기

답변 2

·

답변을 작성해보세요.

2

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2021.01.20

a::before가상요소를 주게 되면 a::before는 a의 자식요소가 되는건가요?

네. 맞습니다. :before :after는 원래 요소의 자식요소입니다. 그리고 인라인 요쇼입니다. 그래서 크기값을 가질 수 없습니다. 크기값을 주기 위해 display: block 또는 display: inline-block으로 변경해주어야 합니다. 만약 position: fixed 또는 absolute를 주었다면 인라인블록으로 변경되었기 때문에 크기값을 가질 수 있습니다. 곧, :before :after에 position: fixed 또는 absolute를 주고 display: block 또는 display: inline-block를 적는건 불필요한 코딩입니다. display 속성에 대한 이해가 부족한 것 입니다. 지금 절 이해하고 있으시다고 생각합니다. 

.gnb li에 float:left를 주면 부모인 .gnb는 높이값을 왜 잃지 않고 가지고 있는건가요 ?

위에 코드에는 .gnb 도 없고 li 도 없는데요. 다른걸 말하시는것 같습니다.

코드에는 없지만 질문에 답은 .gnb li에 float:left를 주면 부모인 .gnb는 높이값을 잃습니다.

1

rudals8920님의 프로필

rudals8920

질문자

2021.01.20

친절하게 답변 달아 주셔서 감사합니다!

이 글과 비슷한 Q&A