웹디자인개발기능사 실기 2일차 (2025. 08. 03)

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

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

---

#시험장에 마우스 우클릭 했을 때 코드로 열기가 안보일 때

vs코드 → 파일 → 폴더 열기 → 비번호 폴더 선택

---

 

---

1. 시맨틱 구조 짜기

ㄴ 주석처리 해서 나눠주면 보기 편함

 

 

---

2. 너비 만큼 상속 받는지 확인

ㄴ 미리보기 창에서 잘 나오나 확인

 

---

3. 공통으로 들어가는 너비는 container로 묶어 구조짜기

ㄴ 높이가 없어서 미리보기 창에 안뜸

---

4. 각 공통 클래스에 클래스명 지정후 각각 높이 지정

---

 

5. container에 margin 정렬을 사용해서 가운데 정렬하기

ㄴmargin-left: auto;  margin-right: auto;

 

 

---

6. header 구조짜기(logo-box, menu-box)

ㄴ 푸터와 메인에 로고와 메뉴가 또 있어서 부모 선택자를 불러서 코드입력

ㄴ display: block이므로 한줄에 글씨가 안뜸

 

---

7. 부모인 hd-con에 display:flex 적용

 

ㄴ 너비 직접 계산해서 지정 후 색깔 칠해 확인

---

8. main 구조 짜기

ㄴ

ㄴ section태그를 사용하여 구조 짜기

ㄴ 색깔 칠해서 잘 나오나 확인

---

 

9. 이미지 박스와 콘텐츠 박스에 높이지정

ㄴ 어차피 이미지, 콘텐츠에 개별 높이를 지정해서 m-con필요 없기 때문에 부모태그를 main을 지정하고 입력해도 됨

 

 

콘텐츠 박스 구조짜기

부모 태그인 contents-box에 flex 정렬 하여 한줄로 나열 

ㄴ 콘텐츠 박스 안에 있는 탭메뉴, 배너, 쇼트 컷에 공통 클래스를 지정하여 공통 너비 지정

---

9.

ㄴ 너비, 높이가 지정 되어있기 때문에 저렇게 보이는게 정상

 

 

 

부모인 ft-con에 flex 적용

---

10.

 

---

11.

---

12.

---

13. 부모인 hd-con에 오른쪽 여백 20px 적용

ㄴ 박스가 조금씩 밀리는 현상 → 정상

 

 

box-sizing: border-box를 사용하여 넘치는 박스 맞춰주기

---

# A-2 문제 유형

---

---

# B-1 문제 유형

- 헤더랑 푸터에 고정픽셀 너비를 주면 안된다.!!!!!