<body>
<navclass="nav-area">
<ul>
<li><ahref="#">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Services</a>
<ul>
<li><ahref="#">WEB DESIGN</a></li>
<li><ahref="#">WEB DEVELOPMENT</a></li>
<li><ahref="#">EMAIL MARKETING</a></li>
<li><ahref="#">GRAPHICS DESIGN</a>
<ul>
<li><ahref="#">LOGO DESIGN</a></li>
<li><ahref="#">CARD DESIGN</a></li>
<li><ahref="#">POSTER DESIGN</a></li>
<li><ahref="#">TEMPLATE DESIGN</a>
<ul>
<li><ahref="#">Web template</a></li>
<li><ahref="#">Email template</a></li>
<li><ahref="#">news template</a></li>
<li><ahref="#">bio template</a></li>
<li><ahref="#">wedding template</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">BROCHURE DESIGN</a></li>
</ul>
</li>
<li><ahref="#">PORTFOLIO</a></li>
<li><ahref="#">CONTACT</a></li>
</ul>
</nav>
</body>
html 태그는 위와 같습니다. 간단한 드랍다운 네비게이션 바 입니다.
여기서는 아무런 문제가 없고
css 파트에서 궁금해서 문의 드려요 .
.nav-area:before{
content: "";
clear: both;
display: block;
}
--------------- 여기서 위에 부분이 이 영상을 올린 유튜버가 작성한 코드이고
--------------- 여기 아래가 저가 바꿔본건데 결과값이 다른게 없는 것 같습니다. 위에는 :bofore, clear 을 쓴 것
---------------아래에는 노멀하게 인라인블럭 먹이고 너비를 넓힌 것 뭐 그 정도 인데..차이가 없는 것 같습니다.
.nav-area{
background: #ff0000;
display: inline-block;
position: absolute;
width: 100%;
}
----------------여기서 질문 드리는 것은 위에 before을 사용한 이유가 있을까요? 굳이 포멀하게 써도 결과값은 같은데 왜 before을 사용했는지
----------------bofore을 써서 내가 모르는 다는 점이 있는지 궁금합니다.
.nav-areaul{
list-style: none;
margin: 0px;
}
.nav-area>ul>li{
float: left;
position: relative;
}
.nav-areaullia{
text-decoration: none;
color: white;
padding: 15px20px;
display: block;
}
.nav-areaulli:hovera{
background: #34495a;
}
.nav-areaulul{
position: absolute;
padding: 0;
min-width: 160px;
display: none;
top: 100%;
left: 0;
}
.nav-areaulli:hover>ul{
display: block;
}
.nav-areaululli:hovera{
background: #262626;
}
.nav-areaululli{
position: relative;
}
.nav-areaululul{
top: 0;
left: 100%;
}
.nav-areaulululli:hovera{
background: #34495a;
}
등록안내
::after (:after)
CSS에서,
::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통content속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.a::after{content:"→";}참고:
::before와::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로,<img>나<br>등 대체 요소에 적용할 수 없습니다.구문
참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터
::after구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인:after도 허용합니다.예제
간단한 사용법
평범한 문단과 흥미진진한 문단을 위해 클래스 두 개를 만들고, 문단 마지막에 의사 요소를 추가해보겠습니다.
HTML
<pclass="boring-text">적당히 평범하고 심심한 글입니다.</p><p>지루하지도 흥미진진하지도 않은 글입니다.</p><pclass="exciting-text">MDN 기여는 쉽고 재밌습니다.</p>CSS
.exciting-text::after{content:" <- 흥미진진!";color: green;}.boring-text::after{content:" <- 먼지풀풀";color: red;}결과
장식 예제
content속성을 활용해 자유롭게 텍스트나 이미지를 추가할 수 있습니다.HTML
<spanclass="ribbon">마지막의 주황색 상자를 바라보세요.</span>CSS
.ribbon{background-color: #5BC8F7;}.ribbon::after{content:"멋진 주황색 상자입니다.";background-color: #FFBA10;border-color: black;border-style: dotted;}결과
툴팁
다음 예제는
::after와 함께 CSSattr()(en-US) 표현식,data-descr사용자 설정 데이터 속성을 사용해 툴팁을 구현합니다. JavaScript 없이요!tabindex="0"을 추가해 각span에 포커스가 갈 수 있도록 지정한 후, CSS:focus선택자를 추가하여 키보드 사용자도 지원할 수 있습니다. 예제를 통해 ::before와 ::after가 얼마나 유연한지 확인할 수 있지만, 가장 접근성이 뛰어난 구현을 위해서라면 요약과 세부 요소처럼 의미를 담은 요소를 활용하는 편이 좋습니다.HTML
<p>이 예제는 <spantabindex="0"data-descr="단어와 문장 부호의 집합">텍스트</span>와 함께 약간의 <spantabindex="0"data-descr="호버 시 보여지는 작은 팝업">툴팁</span>을 포함합니다. </p>CSS
span[data-descr]{position: relative;text-decoration: underline;color: #00F;cursor: help;}span[data-descr]:hover::after, span[data-descr]:focus::after{content:attr(data-descr);position: absolute;left: 0;top: 24px;min-width: 200px;border: 1px #aaaaaa solid;border-radius: 10px;background-color: #ffffcc;padding: 12px;color: #000000;font-size: 14px;z-index: 1;}결과
명세
The definition of '::after' in that specification.