인프런 커뮤니티 질문&답변
작성한 질문수
가상클래스 질문 드려도 될까요? 너무 헷갈립니다 ㅠㅠㅁ
작성
·
231
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는
높이값을 왜 잃지 않고 가지고 있는건가요 ? ㅠ.ㅠ
답변 2
2
코딩웍스(Coding Works)
지식공유자
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
