웹디자인개발기능사 실기 4일차 (2025. 08.10)

# 수업시간에 띄어놔야 할 창

사이트 이름	사이트 주소
수업페이지	url
예제연습	url
코드펜	url
연습 문제 다운로드(이기적)	url
공개 문제 다운로드(Q-NET)	url
vscode 화면 / 미리보기 화면 띄워두기	-

---

#E-1 유형

-너비, 높이 다 반응형!!!

 

---

1. html 구조 먼저 짜기

- top-box로 header와 main을 감싼 후 footer는 따로 

 

---

2. footer에 먼저 고정 높이 지정

 

---

3.

 

---

4. header에 너비 지정하고, main에는 clac 속성 사용해서 반응형 너비로 지정 

---

5. top-box에 flex 적용

---

6. main 구조짜기(컨텐츠 / 이미지 슬라이드)

---

7. 컨텐츠 박스의 너비와 이미지 슬라이드의 너비 적용

ㄴ 이미지 슬라이드의 너비는 clac 속성을 사용해야 함

ㄴ width: clac( 100vw-600px); 로고 부분 200px + 컨텐츠 부분 400px 더해서 총 -600px을 해야함

---

8. 이미지 슬라이드와 컨텐츠를 감싸고 있는 main에 flex 적용

 

---

9. main에 있는 clac 속성 너비 주석 처리 해도 구조가 깨지지 않음!!

 

---

10. header 구조짜기 / logo-box에 높이 100px 적용

---

 

11. logo-box에 높이 100px 적용

---

12. menu-box는 색깔 칠해 구조 확인만

 

---

13. 컨텐츠 구조짜기

- 높이가 반응형이기어서 고정 높이를 모르기에 flex-grow를 사용하여 1:2:2:1 적용

 

---

14. 부모인 main에 flex적용 , flex-direction: column; 적용 , 후 각 컨텐츠에 1:2:2:1로 flex-grow 적용

 

---

15. 푸터 구조짜기

 

 

---

16. 부모인 footer flex 적용, logo-box와 family에 고정 너비 지정 후 ft-menu는 남는 만큼 차지(flex-grow 속성)!

 

---

#A-3 문제 - 코드 구현 - 강원 천문대

 

 

---

---

1.  vs 코드 열고 [파일] - [폴더 열기] - [비번호 폴더 선택] 

 

---

2. vs코드에서 css, js, image폴더 생성 후 파일 생성

 

---

3. 독타입 선언

ㄴ 타이틀 명은 문제에 있는 과제명으로 작성 해야함!

---

4. 빈공간 우클릭 후 파일 탐색기에 표시 클릭하여 수험자 제공 파일에 있는 거 옮기기!

---

5. 수험자 제공 파일에 있는 제이쿼리 소스, 이미지 파일 다 복사 + 붙여넣기로 사용

- 원본파일 손상되면 다시 제공x

 

ㄴ 폴더 정리 미리 해두는 게 좋음

ㄴ 세 장 짜리 이미지들만 새폴더 생성 후 복사 + 붙여넣기 / 낱개 이미지는 큰 폴더 안에 복사 + 붙여넣기

---

6. 기본 셋팅

- html 독타입 선언
- css 노멀라이즈 + body에 색상 칠해 확인
- js에 console.log("확인") 잘 나오는지 확인

 

ㄴ js 연결에 defer 둘 다 적용 안하면 코드 충돌남 / 둘 다 쓰거나 or 안쓰거나

ㄴ 미리 보기 창 가서 상단에 타이틀 이름 잘 뜨는지 확인, F12 개발자 모드 열어서 console에 "확인" 문구 잘 뜨는지 확인

 

---

7. footer 로고 문제에서 확인 → 그레이 스케일

- 그레이 스케일 단축키 : Ctrl + Shift + U

 

 

 

 

방법1) 상단 -[파일] -[PNG로 내보내기]

 

 

방법2) PNG로 내보내기 단축키: Ctrl+Shift+Alt+W 

 

---

8. 고정형 이므로 container를 사용하여 묶어줘야 함

 

 

---

9. header, main, footer 를 먼저 짜고 alt 눌러(커서 한번에) 사이에 엔터 치고 container 생성

 

---

10. container에 고정너비 1200px 지정 후 박스가 가운데에 올 수 있도록 margin: left, right : auto; 적용

 

---

11. 각 hd-con, m-con. ft-con에 고정 높이 지정 후 확인

---

12. logo-box 안에 있는 이미지에 너비 값 계산해서 적용

---

13. menu-boxd에 색상 칠하기

 

---

14. hd-con에 세로 정렬 align-items: center 적용

 

 

---

15. hd-con에 justify-content: space-between을 적용하여 로고와 메뉴 양쪽으로 붙이기

 

---

16. hd-con에 padding 값을 넣으면 박스가 넘쳐서 menu-box에 margin-right: 20px 적용

 

---

17. 1차 메뉴 + 2차 메뉴 쟁코딩

 

 

 

→ 다음 시간에 이어서...