웹디자인개발기능사 실기 5일차 (2025. 08. 16)
# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 예제연습 | url |
| 코드펜 | url |
| 연습 문제 다운로드(이기적) | url |
| 공개 문제 다운로드(Q-NET) | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
#A-3 문제 유형
18. body, ul, li 노멀라이즈
1) margin: 0;
2) padding: 0;
3) list-style: none;
19. a 태그 노멀라이즈
1) color: inherit;
2) text-decoration: none;
20. menu-box 안에 있는 ul에 flex처리 하여 한줄로 정렬
21.menu-box 안에 있는 ul 후손에 있는 ul에 none 처리(1차 메뉴를 먼저 커스텀 하기 위해)
ㄴ 100 - 20 -20 = h: 60px(높이)
22. li 너비, 높이 임의로 계산해서 값 입력
ㄴ 후손 ul도 똑같은 너비를 가져야 함!
23. 1차 메뉴 안에 있는 a태그에 너비, 높이 100% 처리 후 flex 적용하면 부모 만큼 너비, 높이를 가짐!
ㄴ 기본값이 display: inline이기 때문
24. 2차메뉴 li에 패딩 위, 아래로 10px씩 적용
25. 1차 메뉴 a태그에 마우스를 올렸을 때 글씨 색상, 배경, 글씨 두께 바뀌게 처리
ㄴ 호버 전 / 호버 후
26. 2차 메뉴 li태그에 마우스를 올렸을 때 글씨 색상, 배경 바뀌게 처리
ㄴ 호버 전 / 호버 후
27. 유령으로 띄우기 / 2차 메뉴 ul에 absolute로 공중에 띄워줌
ㄴ 상속 받을 수 없기 때문에 작아짐
28. 1차 메뉴 li에 relative로 임의로 부모 역할 지정
ㄴ relative를 걸어도 너비가 없기에 상속x
29. 2차메뉴 ul에 너비 100% 적용하면 부모 너비 상속 받아서 원래 너비 만큼 가짐
30. absolute를 사용하면 반드시 위치속성도 같이 사용!!!
ㄴtop: 100% 1차 메뉴 끝 부분 까지 내려와서 이 밑에 부터 띄우겠다는 의미
31. 1, 2차 메뉴 스크립트 구현
ㄴ mouseover / mouseout 사용하여 구현★ ★ ★
32. main 구조 짜기
33. img-slide에 색상 + 높이 지정
34. contents에 색상 + 높이 지정
35. img-slide도 눌렀을 때 이동할 수 있게 ul, li, a 태그 사용 / 글씨는 span태그 사용
36. 위, 아래로 움직이는 슬라이드로 먼저 이해
ㄴ 이미지가 가려져 있다가 300씩 위로 구현
ㄴ img-slide안에 있는 img 너비 임의로 지정
ㄴ slide-list안에 있는 li에 높이 300px 지정 후 넘치는 이미지 삭제 overflow: hidden 적용
37. span에 있는 글씨 공중에 띄워주기 → absolute 적용 후 부모인 li에 relarive 적용 후 span에 위치속성 적용
ㄴ top, left에 50%를 적용해도 정중앙에 글씨가 안오기 때문에 transform을 사용해서 -50% 만큼 빼주면 글씨 정가운데로 옴
38. img-slide에 넘치는 이미지 삭제 overflow: hidden 적용
39. slide 글씨 커스텀 → 가독성 높이고, 독창성이 드러나도록 제작
40. img-slide 스크립트 구현(상하 움직임/위아래로)
ㄴ marginTop: -300 → slide-list 높이(300px)만큼 -300 움직임
41. contents 구조짜기
42. tab-menu, banner, short-cut에 너비, 배경색 지정
43. 한줄로 나열해야 하기 때문에 부모인 contents에 flex적용
ㄴ너비가 총 1200px 이기에 세 영역 각각 400px 만큼 차지
44. Tab 메뉴 구현_li 두개가 박스 형태로 나와있음
ㄴ탭메뉴는 ul로 감싸게
ㄴ탭메뉴 쟁코딩
45. div class 네임명 붙여주고 / li 부분 꺽새 닫고 갯수 만큼 복사+복붙
ㄴ a태그에는 텍스트 복붙
ㄴ span에는 글자 복붙
46. tab메뉴 너비, 높이 수정, banner&short-cut는 flex-grow: 1 적용하여 남는 만큼 차지하도록
47. tab-menu에 상하좌우 여백 margin 사용하여 10px 적용
48. tab-menu안에 있는 li에 배경색 지정
49. tab-menu안에 있는 div에 선 색깔칠해 확인
50. tab-menu li들 중 두 번쨰 li만 가리겠다.(:nth-child(2))
51. news에 배경색 칠해 확인, news 안에 있는 ul에 flex처리 column
52. news 안에 있는 a태그에 flex 적용하고 justify-content: space-between을 적용하여 양옆으로 붙게 적용
53. gap은 넣어줘도 되고 자유
54 news 클래스 안에 있는 ul의 자식 li들 중에서 짝수 번째(2n) 항목의 그 안에 있는 a 태그에만 스타일을 적용한다
55. tab-menu 안에 있는 div를 공중으로 띄워주고 tab-menu가 부모로 realative적용 후 위치속성 left만 0
56.
ㄴ dispaly: flex 적용 / align-items: start를 적용하여 공지사항 글씨가 첫번째로 올 수 있게 적용
57. tan-menu 안에 있는 li에 너비 100px, 높이 30px 적용
58. tab-menu > li:nth-child(2) 주석처리 하면 갤러리 글씨 보임
59. tab-menu 안에 있는 a태그에 flex 적용 align-items: center, justify-content: center; 가로, 세로 정렬
60. 위치속성 위쪽으로 30px 적용(top)
61. tab-menu 안에 있는 a태그에 높이 100% 적용하여 부모 높이 상속 받을 수 있게 적용
★ 이미지 슬라이드가 제일 중요함
★ Tab 메뉴 구현 못해도 합격가능(그대신 이미지 슬라이드, 2차 메뉴 정확하게 구현했을 시에 !!)
★ Tab 메뉴 최대한 마지막 까지 붙잡고 있기
★ Tab-menu 어려우니 계속 반복 학습!!!