2025. 05. 25 웹디자인개발기능사 8일차
# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 코드펜 | url |
| 연습 문제 다운로드(이기적) | url |
| 공개 문제 다운로드(Q-NET) | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
D-4 유형_팝업창, 푸터 구현
1. gall-box에 구조 짜기
2. gall-box 안에 있는 ul에 flex 적용
3. gall-box 안에 있는 a태그에 block, 폰트 크기, 두께 지정
4. gall-box 안에 있는 ul태그에 양쪽 정렬 적용
5. gall-box 안에 있는 바깥쪽 여백 padding 값을 위, 아래는 0 / 좌, 우는 30px
6.
7. id 선택자 사용법 / 구조 짜기
8. pop-up에 배경색, 바깥쪽 여백 주고 absolute로 공중에 띄어줌
9. 레이어 팝업창 스크립트
ㄴ 단어를 해석하면서 문제 풀면 스크립트 코드 짜기 쉬움
10. pop-up 창이 active가 됐을 때 display를 block로 처리 하면 공지사항을 눌렀을 때 팝업창이 나타남
E-4 유형_반응형
1. 폴덜, 파일 생성 / 우클릭 후 파일탐색기로 열기 클릭
2. 수험자 제공 파일에 있는 제이쿼리 소스, 이미지 폴더 생성해서 복사+붙여넣기
ㄴ 수험자 제공 파일은 다시 안 줄 확률이 높기 때문에 웬만해서 복사해서 붙여넣기 해서 옮겨라
ㄴ 안그럼 손상 됐을 때 되돌릴 수 있는 방법이 없음
3. 독타입 선언(! + Tacb)
4. Ctrl+N 눌러서 대지 불러오기 사이즈 문제지 확인 후에 생성
5. 시험문제 이름하고 분위기 비슷하게 logo 생성 후 PNG로 저장!!!
6. html 시맨틱 구조
7. 노멀라이즈 + 지정 컬러 불러오기
8. 반응형 이기에 top-section에 높이 calc속성 적용 / footer는 고정형이기에 높이 지정
9. header가 높이를 상속받지 못하므로 top-section에 flex를 적용하면 높이 상속 받음
10. header 구조 짜기 + 이미지 불러오기
11.
12. menu가 높이 너비를 상속 받지 못하므로 header에 flex와 column 처리
13. 1차 메뉴 + 2차 메뉴 구조 짜기
14. header에 있는 텍스트 파일에 있는 글씨 복붙
15. menu 안에 있는 ul에 너비 18px 지정 후 안쪽 여백 좌우 auto 지정
16. menu 안에 있는 a태그에 block 처리 하고 padding 적용하여 위 아래만 30px 지정
17. menu 안에 있는 a태그에 글씨 가운데 정렬
18. menu 안에 있는 a태그에 마우스를 올렸을 때 배경색, 글씨 쌕 변경
19. main 구조 짜기(중간)
20. contents에 너비가 없어 구조가 눈에 안보여 main에 flex 처리
21. img-slide에 flex-grow: 1; flex-basis: 0; 처리
22. 컨텐츠 내부의 구조들을 고정 높이 대신 flex-grow를 사용하여 1:2:2:1 비율로 배치
23. img-slide 구조 짜기
ㄴ 만약 외워간 이미지 슬라이드랑 다르면 원래 아는 걸로 라도 구현을 해라
ㄴ 그러면 과락은 아니고 감점일 것이다 ...! 안하는 거 보단 낫다
24. img-slide에 calc속성을 적용하여 너비 지정
25. img-slide 안에 img에 calc 속성을 적용하여 너비, 높이 지정 후 이미지 비율 맞춰주기
ㄴ 화면이 줄어도 이미지 면적이 찌그러지지 않음
26.
27. img-slide 안에 span태그에 block 처리 후 absolute를 처리하여 위치 속성 적용
28. img-slide 안에 span태그에 padding값을 줘서 높이 조절 후 글씨 가운데 정렬, 폰트 색상 화이트로 지정
29. 이미지 슬라이드 구현 (한 문장씩 영어 해석하듯이 구현하면 됨)
ㄴ 시간 넘어가는 부분 작성하는 것만 유의!!!
30. sub-menu에 너비 100% 지정
31. 2차 메뉴 스크립트 구현
32. sub-menu안에 a태그에 마우스를 올렸을 때 배경색, 글씨 색깔, 두께 바뀌도록 지정
33. banner 구조 짜고 flex, 세로 정렬 지정
34.
35.
36. notice 구조 짜기
37. notice 안에 a태그에 block 처리 후 바깥쪽 여백, 폰트 크기, 두께 지정
37. notice 안에 a태그에 너비, 글씨 가운데 정렬 지정
38. notice에 flex와 column 지정
39.
40. notice 안에 있는 li의 2번째 4번째 등등만 색깔 칠해라!
41. id 선택자
42. #pop-up-box에 absolute 지정 후 위치 속성 적용 / 너비, 높이 100%로 상속 배경색 지정
43. #pop-up-box에 z-index 1지정
44. pop-up에 패딩 50px 지정
45. 팝업창 스크립트 구현
