# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 예제연습 | url |
| 코드펜 | url |
| 연습 문제 다운로드(이기적) | url |
| 공개 문제 다운로드(Q-NET) | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
99. 팝업창 구조
100. 팝업에 flex 적용, 세로 정렬 적용
101.
102.
103.
104. column 사용 했을 때 가운데 정렬 하고 싶으면 align-items: center 사용
105. 팝업 안에 있는 텍스트들 글자 가운데 정렬
106. pop-up-bg를 pop-up 위쪽으로 위치 이동
ㄴ 구조상 닫기 버튼이 맨 위로 나와야함!!
107.
ㄴ flex를 사용했기 때문에 css에 pop-up.active를 걸때도 같은 속성인 flex를 적용해야 깨지지 않음.
구조 유지한 상태로 방법1)
ㄴpop-up-bg.active를 가졌을때 형제로(+) pop-up에 display: flex 적용
원래 구조로 바꾼 상태로 방법2)
ㄴ z-index 사용
ㄴ pop-up에 z-index: 1; 적용하면 pop-up-bg에 가려졌던 pop-up이 위로 올라오게 됨
ㄴ pop-up하고 pop-up-bg에 display: none; 주석 처리 한 거 풀어주기
# E-4유형(반응형 / A,D 영역의 넓이는 브라우저 전체 넓이(100%) 지정)
ㄴ 팝업창에 배경색 들어가있으면 넣어야 함!!!
1. 로고 심볼 형태로 직접 제작
ㄴ 툴 : 포토샵 / 사이즈 190(가로) x 45(세로)
ㄴ 별 만드는 방법(심볼) U를 누르면 도형이 나옴_ 오각형 툴 선택
ㄴ 저장은 : ctrl + alt + s (png로 저장_불안하면 바탕화면에 저장)
ㄴ 푸터에 들어갈 로고 → 그레이 스케일로 변경
- 파일 정리 : 8분 안으로 정리 해야 시간 부족함 ㅜ
2. html(독타입 선언), css(노멀라이즈, 지정 컬러가이드 적용), js(console. log("실행")
ㄴ 미리보기 창에 console부분에 문구 잘 뜨나 확인(개발자모드 F12)
3. 시맨틱 구조
4. top-section에 너비 지정(반응형 이기에 calc속성 사용, 배경색 칠해 구조 확인)
5. footer에 높이 지정, 배경색 칠해 구조 확인
6. 로고에 높이 120px 지정, 배경색 칠해 구조확인
7. 메뉴에 남는 만큼 차지 할 수 있도록 flex-grow: 1 적용, flex-basis: 0;(남는 비율 깨지지 않게)
8. 로고 박스 안에 있는 a에 높이 상속 100%, flex 적용, 가로 세로 중앙정렬 적용
9. 1,2차 메뉴 쟁코딩
10. 1차 메뉴 안에 있는 ul에 너비 180px 적용, 마진 정렬(왼쪽+오른쪽)
11. 1차 메뉴 안에 있는 li에 배경색 칠해 구조 확인
12. 1차 메뉴 안에 있는 2차 메뉴의 ul에 색깔 칠해 구조 확인
13. 1차 메뉴 안에 있는 a태그에 배경색 칠해 구조 확인, block처리, 안쪽 위, 아래 여백 30px, 글씨 가운데 정렬
14. 1차 메뉴 안에 있는 2차 메뉴의 후손인 a에 배경색 칠해 구조 확인, block 처리, 글씨 가운데 정렬
15. 1차 메뉴 안에 있는 2차 메뉴의 ul에display: none;처리하여 가려줌
16. 2차 메뉴 스크립트
.
ㄴ 1차 메뉴 li에 마우스를 올렸을 때 2차 메뉴 리스트들이 나와야함
17. main에 flex 처리
18. img-slide 반응형 이기 때문에 clac 속성 사용 너비는 vw로 표시
19. img-slide 쟁코딩
20. 눌렀을 때 이동할 수 있도록 a태그로 img 태그로 감싸고 텍스트는 span으로 처리
21. img-slide 후손인 img에 너비, 높이 처리 다 반응형으로_ 비율 깨지지 않도록 object-fit: cover로 처리
22. 이미지 슬라이드 안에 있는 a태그에 absolute로 띄워주고 부모인 이미지 슬라이드에 relative 걸어주기
이지미 슬라이드 안에 있는 span태그에 absolute로 띄워주고 위치속성 사용
23. 이미지 슬라이드 스크립트 구현(fade-in / fade-out 방식)
나머지 구현은 집에 가서 해보기!!!!
'웹디 실기(2)' 카테고리의 다른 글
| 웹디자인개발기능사 실기 7일차 (2025. 08. 23) (1) | 2025.08.23 |
|---|---|
| 웹디자인개발기능사 실기 6일차 (2025. 08. 17) (4) | 2025.08.17 |
| 웹디자인개발기능사 실기 5일차 (2025. 08. 16) (5) | 2025.08.16 |
| 웹디자인개발기능사 실기 4일차 (2025. 08.10) (10) | 2025.08.10 |
| 웹디자인개발기능사 실기 3일차 (2025. 08. 09) (2) | 2025.08.09 |
