2025. 05. 18 웹디자인개발기능사 6일차
# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 코드펜 | url |
| 연습 문제 다운로드(이기적) | url |
| 공개 문제 다운로드(Q-NET) | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
A-3 문제
1) 로고 그레이 스케일(gray scall)
ㄴ 포토샵 파일에 logo 파일 열기
ㄴ ctrl + shift + u => 그레일 스케일
ㄴ Export 단축키 : Alt + Ctrl + S
ㄴ 사이즈 여부 → OK 선택
2) 푸터 구조 짜기
3) ft-logo 고정 너비 지정 /
4) ft 메뉴 구조 짜기
ㄴ 수험자 제공 파일 footer 텍스트 긁어다가 복붙
5) fm-menu 쟁코딩
ㄴ 수험자 제공파일 footer에 있는 텍스트 가져다가 복붙
6) display: flex 적용 / flex-direction: column(세로 정렬)
7) 메뉴 & 카피라이트에 동일한 비율 적용
8) 메뉴들 한 줄로 정렬
9) 높이를 상속받기 위해 ft-menu에 height: 100% 적용
10) flex-direction: column(세로 정렬)을 적용 했을 때 aligin-items: center가 적용되지 않으므로 justify-content: center 적용
ㄴ gap을 적용해서 동일한 여백을 가질 수 있게끔 적용
11) fm-menu > ul > li > a는 dispaly: inline 이므로 block처리
12) copyright 글씨 가운데 정렬 + 동일한 높이 지정
13) 하단메뉴에 마우스를 올렸을 때 폰트 굵게 + 밑줄 처리
C-3 유형
1) 파일 생성, 독타입 선언, 파일 연결
2) header 구조짜기
3) body, a태그 노멀라이즈
4) hd-con을 생성하여 구조 수정
5) hd-con 너비, 높이 지정
6) display: block 이기 때문에 스크롤이 생김
7) body를 display: flex로 지정
8) logo-box 높이 지정
9) 이미지 가운데 정렬
10) logo img 가운데 정렬
11) right-box 구조 넣기
12) img-slide에 높이 350px 지정
13) contents에 높이 200px 지정
14) img-slide 안에 구조 짜기 (ul + li + a + img + span)
15) 이미지 + 텍스트 채워 넣기
ㄴ Alt 꼭 채워넣기 안 넣으면 감점 사항!!!!!!!!!!!!!!!★ ★ ★
ㄴ 가끔 src에서 복붙 한 게 안읽힐 수 있으니 그냥 alt를 새로 작성해라
16) 이미지 넘치는 거 방지 큰 박스에 → overflow: hidden 적용
17) 위치속성으로 텍스트 띄워주기 (position: absolute)
18) 위치 속성을 사용하면 top or right or left로 위치 조절!!!!!
19) transform 속성을 적용하여 가운데로 텍스트 맞춰주기
20)
21)
setInterval)
- 일정한 시간 간격으로 어떤 작업을 반복적으로 실행할 때 사용
22)
ㄴ 스크립트에 css 코드를 사용할 때 소괄호 안에 중괄호를 입력하여 사용해야 함
ㄴ 움직이게 작동만 하면 됌
ㄴ 코드 눈에 잘 익히기
ㄴ 알고 있는 코드로 작성하는 게 젤 중요 ★ ★★ (구현만 되면 됌)
23) contents 안에 구조 넣기
24) contents에 dispaly: flex 적용 후 세 개의 contents에 flex-grow: 1 / flex-basis:0 적용
25) notice 쟁코딩
26) contents 파일 안에 있는 텍스트 파일에서 복붙(a, span 태그에 붙여넣기)
27)
28) ul의 여백 조정(바깥쪽 위, 아래 여백 5px)
29) notice 안에 있는 a태그에 dispaly: flex; justify-content: space-between적용
30)
31) 2의 배수에 위치한 li의 색상을 변경하겠다(nth-child(2n))
32) gallery 구조 짜기(ui, li, a, img)
33) 사진 일렬로 정렬(부모인 gallery ul에 dispaly: flex; 적용)
34) 양쪽으로 밀기(justify-content: space-between)
35) margin: top을 적용하여 위 여백을 좀 띄우기
36) gallery h3, ul에 각각 padding-left, padding-right
37)
38) shortcut 이미지 가운데 정렬
39) 세로 정렬이 안돼서 높이 100% 지정
40) menu-box 쟁코딩 (수험자 제공 파일 header에 있는 텍스트 파일 복붙)
41)
42) hd-con에 align-items을 적용
43) gap값을 줘서 상단 logo-box와 떨어지게 지정
44)
45)
* li, a 넓이 자체를 넓혀주면 됨
ㄴ 시간되면 li 커스텀