◆ 사이드바 만들기
◆ transition
- 특정 항목의 변화를 부드럽게 처리
- transition: 항목 지속시간 타이밍함수;
◆ 타이밍 함수
- linear : 한결같은 속도
- ease-in : 시작은 느리게 끝은 빠르게
- ease-out : 시작은 빠르게 끝은 느리게
- ease-in-out : 시작과 끝이 느리게 (중간이 빠르게)
◆ 시맨틱 태그(semantic tag)
- div와 같이 하나의 태그가 너무 다양한 용도로 사용되는 것을 방지하기 위해 만든 태그
- 기능이 같더라도 용도별로 태그를 구분하여 생성하였다.
- 웹 표준에서 권장하는 사항인데 잘 안지켜진다.
- main - 홈페이지 전체
- aside - 사이드 메뉴
- section - 본문(container 포함)
◆ 메뉴 만들기
◆ 드롭다운(drop down) 메뉴 만들기
- 계층형 구조이므로 list 태그로 만든다.
- 가장 중요한 스킬은 원하는 차수의 메뉴를 선택하는 것
- 띄어쓰기는 ~이상 이라는 의미를 가진다.
1차 메뉴 선택자 : .menu > li
2차 메뉴 선택자 : .menu > li > ul > li
3차 메뉴 선택자 : .menu > li > ul > li > ul > li
1차 이상의 메뉴 : .menu li
2차 이상의 메뉴 : .menu > li ul > li
3차 이상의 메뉴 : .menu > li > ul > li li
.menu > li > ul > li li {
background-color: yellow;
}(1) 리스트의 모든 스타일을 제거(여백, 표시방식)
(2) 모든 a태그의 스타일을 제거
(3) 1차 메뉴의 항목들의 표시 방식(display)을 inline-block으로 변경
(4) 2차 이상의 메뉴(ul)들 배치 방식을(position) absolute로 변경
모든 메뉴(li)는 기준점 설정을 위해 배치 방식을 relative로 변경
(5) 2차 이상의 메뉴(ul)를 숨김 처리
(6) 메뉴(li)에 마우스를 올리면(hover) 하위 메뉴를 표시
(7) 메뉴 항목(li)에 마우스가 올라가면(hover) 색상을 변경
(8) 3차 메뉴 이상은 오른쪽에 나오도록 처리
(9) 메뉴 내부에 글자가 많은 경우 밑줄임표 처리
(10) 1차 메뉴 중 오른쪽 메뉴(.right-menu)에 대한 처리
(11) 오른쪽 메뉴에 있는 3차 이상 메뉴에 대한 처리
◆ 말줄임표 3종 세트
(전제조건) 폭이 확정적이어야 한다.
- overflow는 넘치는 화면에 대한 처리를 설정
- white-space는 넘치는 항목에 대한 개행 처리를 설정
- text-overflow는 글자가 넘칠 경우의 처리를 설정
Backend Developer