-
[HTML + CSS] li 사이에 구분선 넣기 ex) 메뉴 | 회사소개 | 게시판방뚝딱 학습노트 2022. 9. 21. 11:22
HTML
<div class="nav_cat_list">
<ul class="nav_main_list">
<h2>Menu List</h2>
<li><a>cate01</a></li>
<li><a>cate02</a></li>
<li><a>cate03</a></li>
<li><a>cate04</a></li>
<li><a>cate05</a></li>
<li><a>cate05</a></li>
<li><a>cate06</a></li>
<li><a>cate07</a></li>
</ul>
</div>
CSS
.nav_cat_list{display: flex;}
.nav_cat_list h2{font-size:24px; margin-top: -7px; font-weight:bold; color:#333; }
.nav_main_list{display: flex;margin: 0 15px 8px 15px;border-top: 2px solid #e2e2e2;border-bottom: 2px solid #e2e2e2;padding: 22px 10px 0;}
.nav_main_list li{list-style: none; text-align: center; margin: 0 auto; color:#666; font-weight:600;}
.nav_main_list li:nth-child(n+2) {position: relative;margin-left: 14px; padding-left: 20px;}
.nav_main_list li:nth-child(n+2)::after{ position:absolute; left: 0; top: 5px; content: ""; width: 2px; height: 15px; background-color: #ddd;}
.nav_main_list li:hover{color:#f8601d; font-weight:bold;}
Comment
- 선택자 뒤에 : 가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 클래스라 합니다.
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스 되었을 때 (input 태그 등)
- :first - 첫번째 요소
- 가상요소 ::before, ::after의 정의
- ::first-line 요소의 텍스트에서 첫 줄에 스타일을 적용
- ::first-letter 요소의 첫 번째 글자에 스타일 적용
- ::before 요소의 콘텐츠 시작부분에 생성된 콘텐츠 추가
- ::after 요소의 콘텐츠 끝부분에 생성된 콘텐츠 추가
- ::selection 요소의 텍스트에서 사용자에 의해 선택(드래그)된 영역의 속성 변경
- ::placeholder Input 필드에 힌트 텍스트에 스타일 적용
- 컨텐츠요소 content=""
<!-- HTML 문서에 정보를 포함되지 않은 요소를 CSS에서 새롭게 생성 -->
- normal 아무것도 표시하지 않는 기본값
- string 문자열 생성
- image 이미지나 비디오를 불러올 수 있음(크기 조절 불가)
- counter 순서를 매길 수 있음(counter-increment, counter-reset 함께 사용)
- none 아무것도 표시하지 않음
- attr 해당속성의 속성값 표시
'방뚝딱 학습노트' 카테고리의 다른 글
'formidable'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. (0) 2022.12.18 오픈그래프 Open Graph 메타태그 미리보기 설정 (0) 2022.10.26 [CSS] 크롬에서 이미지 흐릴때 + 새로고침 (0) 2022.09.20 [html + Java Script] id 위치에서 특정 위치 만큼 이동 (0) 2022.09.20 Python Chapter01 (0) 2022.09.02