# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 예제연습 | url |
| 코드펜 | url |
| 연습 문제 다운로드(이기적) | url |
| 공개 문제 다운로드(Q-NET) | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
#C-3유형
1. html 시맨틱 구조 짜기
2. hd-con 커스텀(너비, 높이, 배경색 칠해 확인)
3. r-box 커스텀 (너비, 높이, 배경색 칠해 확인)
ㄴ 스크롤 생기는게 정상, r-box도 밑에 나오는게 정상
4. body에 flex 적용
5. hd-con 구조 짜기(logo-box, menu-box)
ㄴ logo-box는 눌렀을 때 임시링크로 이동할 수 있는 a태그로 감싸서 img 태그 사용 → 반드시 alt 속성 기재!!! 안그럼 감점★ ★
ㄴ menu-box는 nav 태그로 사용
6. logo-box 안에 있는 img 가운데 정렬하기 위해 logo-box에 flex 적용, 가로, 세로 정렬
7. logo-box 안에 들어 있는 a태그 block 처리
ㄴ a태그 높이 상속 받으려면 display: block로 적용하고
ㄴ 미리보기 창 가서 F12누른 후 Tab키 눌러서 잘 적용됐나 확인까지 해야함
ㄴ 안뜨면 제대로 상속 받지 못하는 거임
8. 1차메뉴 + 2차메뉴 커스텀(쟁코딩)
ㄴ menu 텍스트는 수험자 제공파일 header에 텍스트 파일에 있음
ㄴ css에 내용 복사+붙여넣기 해서 html에 옮긴 후 지우기
9. menu-box 안에 있는 ul에 배경색 칠해 구조 확인
10. 2차 메뉴는 absolute로 띄워줘야 함
ㄴ 원래 sub-menu의 부모는 li인데 menu-box를 부모로 만들어 relative 적용
11. absolute를 사용 했으니 1차 메뉴 옆에 나올 수 있도록 위치속성 적용
ㄴ px(픽셀)은 고정할 때 사용(단점은 확대 했을 때 깨짐)
ㄴ %(퍼센트) 화면 만큼 지정(웬만해서 안깨져서 사용률 ↑)
12. 1차 메뉴, 2차 메뉴 동시에 나란히 하려면 hd-con에 flex 적용 세로 정렬(flex-direction: colum),
세로 가운데 정렬 적용
13. menu-box에 flex-grow를 적용하여 남는 만큼 공간 차지하게 처리
14. menu-box에 flex, 가로 중앙 정렬 적용 / menu-box 안에 있는 ul에 너비 180px 적용
방법 1) a태그가 너비를 상속 받으려면 menu-box 안에 있는 li에 flex 적용, 세로 가로 가운데 정렬 적용 후
a태그 안에 block 처리
ㄴ 이러면 li에 적용된 align-items: center 때문에 너비가 작게 나옴
-----
방법2) menu-box 안에 있는 li에 적용했던 가로, 세로 중앙 정렬 코드를 지우고, a태그에 그대로 적용 후 block를
flex로 적용하고 flex-grow:1을 적용하면 남는 만큼 너비를 차지하게 됨!!
15. submenu 안에 있는 li에 너비 200px, 높이 50px 적용
16. submenu 안에 있는 a태그에 flex-grow 사용하여 남는 만큼 너비 차지
flex 가로, 세로 중앙 정렬 적용 하여 글씨 정중앙에 오도록
ㄴ text-align: center 사용해도 되는데 가로 정렬이 안되니까 flex로 사용하는게 젤 효율
17. submenu에 top: 0에서 -5% 적용 하면 위쪽으로 붙음 / 높이 250px 적용
18. menu-box에 padding-top: 10px 적용하여 위쪽 여백 생기도록
19. 1차 메뉴 a태그에 마우스 올렸을 때 하이라이트 효과 적용
ㄴ 배경색, 텍스트 색, 텍스트 두께 처리
20. 2차 메뉴 a태그에 마우스 올렸을 때 하이라이트 효과 적용
ㄴ 배경색, 텍스트 색, 텍스트 두께 처리
# 2차 메뉴 스크립트(1차 메뉴 li에 마우스를 올렸을 때 2차 메뉴가 나타나고 떼면 사라져야 함) / 0.5초씩
21. r-box 구조 짜기(main+footer)
22. img-slide와 contents에 높이 지정, 배경색 칠해 구조 확인
23. img-slide 쟁코딩
ㄴ a태그로 img태그 감싸 눌렀을 때 이동할 수 있도록
ㄴ span태그로 텍스트
24. img 채워넣고, alt 꼭 쓰기_수험자 제공 파일 img-slide에 있는 텍스트에 있는 글씨 복사+붙여넣기
ㄴ 페드인, 페이드 아웃은 ul로 굳이 구현x(이미지가 겹쳐 있다가 앞에 있는 이미지가 사라지고 뜨기 때문)
25. img-slide 후손인 span에 flex 적용 후 absolute로 띄워주고 top. left 모두 50%씩 밀어 준 만큼 빼야하기
때문에 transform 각 X, Y에 -50% 적용(img-slide에 relative 적용)
26. 글씨 사이즈, 두께, 배경색, 글씨 색 커스텀
27. 글자 정렬(align-items, justify-content: center)
28. img-slide 안에 있는 a태그에 absolute로 띄워줌
29. img-slide의 후손인 img에 너비, 높이 100% 지정
ㄴ object-fit: cover 이미지 비율 일정하게
# 이미지 슬라이드 스크립트 구현(fade-in/fade-out 방식)
30. 컨텐츠 구조짜기(공지사항, 갤러리, 배너)
31. 공지사항 구조짜기(수험자 제공 파일 contents에 있는 텍스트 긁어다가 복사+붙여넣기)
ㄴ a태그_제목 / span 태그_날짜
ㄴ li 꺽새 닫아 3개 복사
32. 콘텐츠 안에 있는 세개의 공지사항, 갤러리, 배너가 남는 만큼 가지도록 부모인 콘텐츠에 flex 처리
나머지 콘텐츠 세개에 flex-grow: 1 / flex-basis: 0 처리
33. 공지사항 안에 있는 div에 너비 80px, 안쪽 여백 5px, 글씨 가운데 정렬 적용
34. 공지사항에 안쪽여백 5px 적용
35. 공지사항 안에 있는 li에 선칠하기
방법 2) 공지사항에 flex 처리, 세로 정렬
36. 공지사항 안에 있는 a태그에 flex 적용 가운데 양쪽 끝 정렬
37. 공지사항 안에 있는 li에 안쪽 여백 5px 적용
38. 공지사항 안에있는 div에 선 칠해 구조확인 하단은 없으므로 none, 폰트 크기, 두께 지정
39. 공지사항 안에 있는 li중 2번째 짝수만 배경색 지정
40. 갤러리 구조짜기(div+ul>li*3>a[href="#"]>img)
41. 갤러리에 flex, flex-direction: column 적용
갤러리 안에 있는 ul에 flex 적용 세로 가운데 정렬, 가로 양쪽 정렬 안쪽 왼쪽, 오른쪽 여백 5px 적용
42. 팝업 구조짜기(공지사항 밑에 부분에 구조짜기)
수험자 제공 파일에 있는 콘텐츠 텍스트에 있는거 복사+붙여넣기
# 숙제
- 집가서 banner 부분 해보기
'웹디 실기(2)' 카테고리의 다른 글
| 웹디자인개발기능사 실기 8일차 (2025. 08. 24) (1) | 2025.08.24 |
|---|---|
| 웹디자인개발기능사 실기 6일차 (2025. 08. 17) (4) | 2025.08.17 |
| 웹디자인개발기능사 실기 5일차 (2025. 08. 16) (5) | 2025.08.16 |
| 웹디자인개발기능사 실기 4일차 (2025. 08.10) (10) | 2025.08.10 |
| 웹디자인개발기능사 실기 3일차 (2025. 08. 09) (2) | 2025.08.09 |
