10월 웹디자인기능사
10월 웹디자인기능사 tinyurl.com/2bq48bj5 [유용한 단축키] Ctrl + T 새 탭 열기 Ctrl + W 탭 닫기 Window + S 돋보기 열기 Window + E 파일 탐색기 열기 Ctrl + S 저장하기 Ctrl + X 잘라내기 + 복사 Ctrl + V 붙여넣기 Ctr
docs.google.com
2차 메뉴
- 높이는 40px * 4 = 160px
- li 크기 설정
- a 커스텀 -> 1차 메뉴의 코드를 그대로 복사하고 폰트 크기만 조정
- 눈으로 확인하기 위해 작성했던 투명도를 제거해보면 1차메뉴와 2차메뉴의 구분이 없는 것을 확인할 수 있다
- 1차메뉴의 폰트를 bold로 변경한다. 기능사 시험에서 원하는 정도가 이 정도.
탭 영역
- 구조
- 높이 설정
탭 영역 - 머리
- 구조
- 실무에서는 div 사용해도 된다. 시험에서는 ul li 사용
- 시험에서는 2개 이상인 경우 ul, li 사용을 요구한다.
- 전체 선택자에서 mx-auto 한 것임을 잊지 말자. 당황 no.
탭 영역 - 바디
(+) 지금부터는 노멀라이즈 a 태그의 배경색 주석처리 한 후 진행한다.
- ul이 탭영역의 크기를 모두 가지도록 커스텀
탭 영역 - 스크립트 연결을 위한 작업
- 같은 내용끼리 연결을 위해 클래스명 추가
- 탭1 연결 커스텀
- 탭2 연결 커스텀
- 탭 몸통을 겹치기
- relative 걸고 너비 높이 100%
- 위치속성 커스텀
- 스크립트를 걸기 위해 공통클래스 작성
- 같은 코드는 하단에 있는 코드가 더 강하다
- top-tab
- tab-body
- 우선 탭1 활성화해서 눈으로 확인해보기
- data- : 속성
- tab-menu : 이름. 내가 지으면 됨.
탭 영역 - 바디
- 폰트 커스텀
배너 영역
배너는 리스트가 아니라 이미지 한 장이다.
- 이미지
- a 태그 여백 설정
- img 태그는 너비 높이를 둘 다 커스텀할 경우 이미지가 찌그러지거나 늘어난다.
- 필수 코드!! 이미지 변형 방지 (종황비 유지)
- 겹친다.
ㄴ absolute 적용하여 해결
- 중앙정렬
'웹디자인기능사 실기' 카테고리의 다른 글
| 웹디 실기 (3) (1) | 2024.10.19 |
|---|