::before, ::after이 필요한 경우:
홈페이지의 헤더나 푸터에 구분선을 삽입하는 경우
가상클래스:
- 여러 태그 중에서 원하는 태그를 선택하기 위해 사용하는 선택자
- :hover / :active / :focus / :visited
가상요소:
- 내용의 일부만 선택해 스타일을 적용할 때 사용
- 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 2개(::)을 붙여 표시
-> 가상 요소 앞에 콜론 하나를 붙여도 브라우저에서 가상요소로 인식하지만 웹브라우저, explore에서 인식이 안될 수 있음
- 가상 요소는 inline 요송이므로 특정 영역을 갖기 위해서는 display: block; 을 사용
- ::before, ::after
가상요소 선택자(가상클래스 선택자) ::before, ::after
- ::before: 특정요소의 앞에 지정한 내용(텍스트/ 이미지) 추가
- ::after: 특정요소의 뒤에 지정한 내용(텍스트/ 이미지) 추가
- 콘텐츠는 content=""라는 속성으로 정의
- 가상 요소는 인라인 요소
콘텐츠 추가(content="")
- html문서에 포함되지 않는 요소를 css에서 생성해주기 때문에 가짜 속성임
- content=""가 있어야지, 가상요소가 만들어지므로 필수 속성임
content 속성
- normal: 아무것도 표시하지 않은 기본값
- string: 문자열 생성
- image: 이미지나 비디오 불러올 수 있음, 크기조절 불가능
- counter: 순서를 매길 수 있음
- none: 아무것도 표시 안함
- attr: 해당 속성의 속성값 표시
::before를 이용하여 gnb 구분선 넣기
<ul>
<li>로그인</li>
<li>회원가입</li>
<li>마이페이지</li>
<li>사이트맵</li>
</ul>
li{
list-style: none;
float: left;
padding: 0 15px;
}
li::after {
content: "|";
float: right;
color: #ccc;
margin-left: -17px;
}
li:last-child::after {
content:"";
}
ul{
display: flex;
}
li{
position: relative;
}
li::before {
content: "";
display: block;
width: 1px;
height: 12px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
li:last-child::before {
display: none;
}
'코딩 > CSS' 카테고리의 다른 글
CSS 텍스트 선택 드래그 설정, User-Select 프로퍼티 (0) | 2023.04.23 |
---|---|
-webkit-touch-callout (0) | 2023.04.23 |
가상요소 선택자 ::before, ::after 사용법 (0) | 2023.04.23 |
Webkit (0) | 2023.04.13 |
position 속성 (0) | 2023.04.10 |