2025. 05. 10 웹디자인개발기능사 3일차

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

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

---

---

D 유형

 

1. 파일 연결

 

 

2. 쟁코딩

 

 

3. footer 높이 지정, 배경색 지정

 

 

 

100vh 

- 100% viewport height(100vh)

 

 

4.  반응형이기 때문에 높이 clac속성 적용

 

 

5. 쟁코딩 

 

 

6. header 높이를 상속받지 못하기 때문에 부모 속성인 top-box에 display: flex; 적용

 

 

7. main 비율 1:1로 하기 위해 flex-grow 속성 적용

 

 

8. main태그 안에 컨텐츠 + 이미지 슬라이드 구조 넣기

 

 

9. 너비를 상속받지 못해 부모 속성인 main에 display: flex 지정

 

 

10. 너비를 상속받지 못해 1:1 비율로 flex-grow 속성 적용

 

 

11. header 태그 안에 로고 + 메뉴 구조 넣기

 

 

12. 로고 박스 높이 지정

 

 

13. 높이를 상속받지 못해 부모 속성인header에 display:flex 지정

 

 

14. main태그 안의 contents에 구조 4개 넣기

 

 

15. 높이를 상속받지 못해 부모 속성인 contents에 display: flex 지정 flex-directin: column(세로 정렬) 지정

 

 

16.

 

 

17.

 

18.

---

F 유형

- contents 구조가 이미지 슬라이드 위쪽으로 올라와 있는 경우 처리 방법

- 

z 축: 뚫고 나오는 축

 

 

1.

 

2.

 

3.

 

4.

 

5.

 

6.

 

 

7.

 

 

8.

 

 

9.

 

10.

 

11.

 

12.

 

13. 음수마진으로 올리면 됌

 

14.

 

15.

 

16.

 

 

17.

 

18.

 

---

A 유형

 

1. 시험자제공소스파일 jqurey 오픈속스 복사 후 붙여넣기

 

-

---

1. 로고 무채색 변경

desaturate

shift ctrl u

shift ctrl alt w

 

 

 

 

2. 스크립트 셋팅

 

 

3. 제이쿼리 실행 

 

4.

 

 

5.

 

 

 

6.

ㄴ 비율을 맞춰서 넣어라는 의미(종횡비)

 

ㄴ 비어있음 감점 

 

 

ㄴ 띄어쓰기 후손 선택자

 

 

 

7.

 

 

8.

 

 

 

9.

 

 

 

10.

 

ㄴ 1차 메뉴

ㄴ 서브메뉴

 

 

11.

 

ㄴ 쟁코딩

ㄴ  href=""

 

 

12.

 

 

 

13.

 

 

15.

 

 

 

16.

 

 

17.

 

 

 

18.

 

 

 

19.

 

 

 

20.

 

21.

 

22.

 

23.

 

24.

 

 

25.

25.

 

26.