# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 코드펜 | url |
| 연습 문제 다운로드(이기적) | url |
| 공개 문제 다운로드(Q-NET) | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
C-3 유형 문제
1) 1차 메뉴 li에 너비, 높이 지정
2) 1차 메뉴 li에 너비, 높이 지정
3) 1차 메뉴 a태그는 display: inline이 기본 값이기에 block처리
4) 1차 메뉴 a태그에 display: flex 적용해서 세로, 가로 정렬 후 높이 상속 받을 수 있게 100% 지정
5) 1차 메뉴 a태그에 마우스를 올렸을 때 배경색 및 글씨 색깔, 두께 처리
6) 2차 메뉴 구조 채워 넣기(수험자 제공 파일 → header에 텍스트 파일 복붙)
7) 1차 메뉴에 relative 적용 후 2차 메뉴에 absolute 적용해서 띄워줌 / 2차 메뉴 li에 너비 높이 지정
8) 2차 메뉴에 위치 속성 지정(left: 100%, top: 0;)
9) 1차 메뉴에 z-index: 1를 지정하여 위로 보이게 띄움
10) 2차 메뉴 a태그도 기본 값이 display: inline이므로 block로 바꿔줌
11) 2차 메뉴 a태그 display: flex로 지정 후 높이 상속 받을 수 있게 100% 지정 및 가로, 세로 중앙 정렬
12) 서브 메뉴를 absolute로 띄워 왼쪽으로 100%, 위로 0%만큼 지정 후 높이 값 지정
13) 서브메뉴 a태그에 마우스를 올렸을 때 배경색, 폰트 두께 변경
14) 2차메뉴 스크립트
ㄴ slide-down 중간에 짝대기 들어가는 부분은 무조건 대문자로 !!!!!!
15) notice에 바깥쪽 여백 지정, notice > h3에 바깥쪽 여백 지정
16) 갤러리에 바깥쪽 여백 5px 지정
17) 팝업창 생성
18) 팝업창 구조 짜기
19) 팝업창 너비 확인
20) 수험자 제공파일 contents 텍스트 파일 글씨 복붙
21) position: absolute로 띄워주고 바깥쪽 여백 지정
22) 타이틀 제목 폰트 크기, 두께 지정
23) 팝업 텍스트 가운데 정렬
24) 팝업창 텍스트에 안쪽 여백 상, 하로 20px 지정
25) 공지사항을 눌렀을 때 팝업창 닫기를 누르면 창이 꺼짐
26) pop-up-bg를 새로 만든 후 absolute로 띄워 준 다음 높이 및 위치 지정
27) 시험에서 팝업 어둡게 처리 하라고 할 때 만드는 법
28) 푸터 로고 그레이 스케일 with 포토샵
ㄴ 그레일 스케일 단축키: ctrl + shift + u
ㄴ 저장 ctrl + shift + alt+ u
29) 푸터 구조 짜기
30) 푸터 로고 박스에 색상 칠하기
31) 푸터에 flex를 적용하고 높이 지정
32) 푸터에 flex를 적용하고 높이 지정
33) 푸터 로고에 너비 지정 후 flex 적용하여 가로, 세로 정렬 적용
34) ft-logo의 이미지를 움직이려면 무조건 display:block 지정 해야함!!!!!
35) fm-menu 태그를 nav 태그로 바꾸고 구조 짜기
36) fm-menu의 ul에 flex 적용
37) fm-menu의 ul에 세로 정렬 적용
38) 높이를 가져갈 수 있도록 부모 속성에 flex 적용
39) fm-menu의 ul에 너비 상속 받을 수 있도록 100% 지정 후 세로, 가로 중앙 정렬 / 바깥쪽 여백 좌, 우 적용
40) fm-menu의 li에 마우스를 올렸을 때 글씨가 두껍고 밑줄이 생길 수 있도록 지정
41) 카피라이트 글씨 가로, 세로 정렬
42) 뒤에 칠해둔 배경색 다 빼면 완성~! / 정해진 컨셉에 맞게 디자인 하기 너무 벗어나면 감점임
D-4 유형
ㄴ 너비 100%-200 => 반응형 사이트 !!!!!!!!!!!!!!
1. 수험자 제공 파일에서 jquery 파일을 내 js파일에 복붙
2. 필요한 사진 파일들 수험자 제공 파일과 동일하게 폴더 생성 후 각 폴더에 복붙
3. 비주얼 스튜디오 코드에 css, js, images 파일 생성 + 독타입 선언 후 우클릭 후 파일탐색기로 열기
4. header 로고 만들기
ㄴ ctrl + n
5. 노멀라이즈 미리 처리
ㄴ 기본 텍스트색 정해져 있는지 확인
6. 시맨틱 구조
7. 상단에 너비, 높이 지정
8. top-section에 flex 적용하면 높이를 상속 받아서 미리보기 창에 구조가 보임
9. 상단 로고 박스 안에 a태그(눌렀을 때 이동) + img 태그 추가 후 이미지 삽입(alt 꼭 입력!!!!)
10. 상단 로고박스에 높이 지정
11. a태그에 flex 적용(높이가 잘 상속 받고 있는지 확인해야 함!!!)
12. 1차 메뉴 + 2차 메뉴 구조 짜기
13. 상단에 flex, flex-direction: column 처리 / 메뉴에 flex-grow:1; flex-basis 지정 / 1차 메뉴 ul에 색깔 지정
14. 1차 메뉴 li에 너비, 배경색 지정
15. 1차 메뉴 ul에 높이 50px 지정
16. 상단에 여백 줘서 띄우기
17. 1차 메뉴 a태그에 flex 적용 높이 상속 가로, 세로 중앙 정렬 적용
18.
19. main안의 구조 짜기
20. img-slide 높이, 배경색 지정하여 구조 확인
21. img 태그 안에 slider 이미지 삽입 후 alt 꼭 입력!!!! / 수험자 제공 폴더 파일 slider에 이미지 삽입
22. img-slide 안에 있는 span에 absolute 적용 후 위치속성(left+top+transform → 중앙에 올 수 있게) a태그에 relative 적용
23. img-slide 안에 있는 a, span태그에 block 지정, 너비 상속, 높이 지정후 텍스트 중앙 정렬, line-height 값도 높이랑 동일하게 지정
24. img-slide 안에 있는 a, img 태그에 너비 상속(100%), 높이 지정 하고 이미지 영역 맞추기 위해 object-fit: cover 적용
25.
# 과제
- 복습(A, B, C, D, F 유형)
- 수업 자료에 코드 올려줌(10시 전까지는 업로드 함)
'웹디자인 개발기능사 실기' 카테고리의 다른 글
| 2025. 05. 25 웹디자인개발기능사 8일차 (0) | 2025.05.25 |
|---|---|
| 2025. 05. 24 웹디자인개발기능사 7일차 (0) | 2025.05.24 |
| 2025. 05. 18 웹디자인개발기능사 6일차 (0) | 2025.05.18 |
| 2025. 05. 17 웹디자인개발기능사 5일차 (0) | 2025.05.17 |
| 2025. 05. 11 웹디자인개발기능사 4일차 (0) | 2025.05.11 |
