[구조가 데스크탑과 모바일로 나뉘는 이유]
- 660px이상(데스크탑 버전)에서 1차 탑바에 있는 네비바가 구현되어 있어야 하고, 660px이하(모바일 버전)에서 2차 탑바에 있는 네비가 구현되어 있어야 하기 때문에 2가지로 구분이 되어 있다.
(1920px)데스크탑
- 1차 네비바 구현
- 2차 네비바 구현(x)
(660px)조금 큰 모바일 사이즈
- 1차 네비바 구현(x)
- 2차 네비바 구현
[모바일버전 네비바에 container가 필요하지 않은 이유]
- 모바일 버전에 들어가는 네비바나 탑바는 화면 너비를 전부 사용하는 레이아웃이 많기 때문에 화면이 작은 사용자를 위한 그리드(container)를 만들지 않아도 괜찮은 경우가 있다.
[원하지 않는 코드(형식)]
1. 네비바 너비
2. 네비바 높이
[vscode폴더나 파일 추가시 주의사항]
1. 선택한 폴더나 파일이 약간 밝은 회색으로 처리되어 있어야 한다.
2. 폴더 아이콘이 내림 아이콘으로 표시되어야 한다.
[코드 유지보수 주의사항]
- 겹치는 코드가 있는지 항상 확인한다.
- vscode로 코드를 보는 것보다 개발자모드를 활용하는 것이 좋다.
ㄴ 개발자모드 css에서 코드왼쪽에 체크표시를 끄거나 키면서 코드를 실험해볼 수 있다.
[css파일 관리]
- head태그 안에 css파일 연결시 실행순서(배치순서)에 영향을 줄 수 있기 때문에 순서대로 css파일을 연결 해주어야 한다.
예시) 미디어쿼리에 적용된 css가 가장 아래쪽에서 다른 css보다 힘이 강하게 실행되어야 하기 때문에 미디어코드가 구현되어있는 css파일을 가장 하단에 연결한다.
탑바는 상단에 항상 고정되어야 하니까 position: fixed를 사용하며, 항상 위에 먼저 보여야 하니까 z-index:1 사용.
배경은 relative를 사용하며 배경이미지에 opacity를 적용해도 배경색과 텍스트는 연해지지 않도록 배경이미지와 배경색,텍스트는 형제 관계를 유지함.
그 중 텍스트가 가장 상단에 유지해 사용자에게 잘 보이도록 해야하므로 형제 관계 중 동생을 유지함.
[탑바-fixed] z-index:1
[배경-relative
(배경이미지) --->태그(형)
(배경색)> (텍스트) --->태그(동생)
]
