1단계: 노멀라이즈, 영어 부분 중앙정렬
- 영어 부분을 중앙 정렬하기 위해 con이라는 클래스를 만들어 css에 적용
2단계: side-bar 마크업
- side-bar 클래스를 만들어 아래로 스크롤해도 고정이 될 수 있게
position:fixed를 설정 - side-bar 호버시 width가 넓어지기 때문에 width를 설정하고 호버시 설정한 width가 나올 수 있게 설정
- transition을 넣어 애니메이션 효과를 줌
3단게: side-icon(▶ / ▼) 만들기
4단계: 1차 메뉴 만들기
5단계: 2차 메뉴 만들기
6단계: 자식 메뉴 있는 곳에만 [+] / [-] 추가하기
- 자식 메뉴가 있는 메뉴에만
[+]/[-]추가하기 위해 가상 요소 선택자와:not()가상 선택자를 사용하였다.
가상 요소 선택자
- 가상 요소 선택자 (::before / ::after) : HTML의 특정 요소 안에 CSS로 가장 앞이나 가장 뒤에 CSS
content속성으로 새로운 내용을 삽입할 수 있다.
선택자::before {
content: "";
}
선택자::after {
content: "";
}- 특징
- content 속성을 필수로 지정해야 한다.
- 인라인 요소로 생성, 필요에 따라 display 속성으로 특성을 변경할 수 있다.
- 다양한 CSS를 지정할 수 있다.
:not() 가상 선택자
:not()괄호 안에 매개변수 요소를 제외한 모든 요소의 스타일을 지정하는 데 사용
