웹디자인개발기능사 실기 3일차 (2025. 08. 09)
# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 예제연습 | url |
| 코드펜 | url |
| 연습 문제 다운로드(이기적) | url |
| 공개 문제 다운로드(Q-NET) | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
#C-1 유형
ㄴ 고정형이라 반응형 x(고정너비 확인)
ㄴ 파일탐색기 안보일 때 vscode에서 우클릭 후 [파일탐색기에 표시] 선택
1. container 큰 구조에 header와 r-box(main/footer) 시멘틱 구조 짜기
2. container에 색상 넣어 크기 확인 + 고정 높이 지정
3. header에 class명 지정 후 배경색 칠해 확인 / r-box도 색칠해서 확인
4. 공통 클래스인 container에 display: flex 적용
5. hd-con과 r-box에 고정너비 지정
6. header 구조 짜기(logo-box, menu-box)
7. logo-box에 높이 임의로 계산해서 지정
8. 로고, 메뉴 우측구조 세로로 정렬되어야 해서 hd-con에 flex를 적용한 후 flex-direction: column(세로) 적용
9. menu-box 꽉차게 설정(flex-grow:1과 flex-basis: 적용)
ㄴ 남는 거 가져가라고 사이즈 확인하기 위해 사용(원래는 600-150 빼야함)
10. r-box 구조 짜기(main+footer → class명 꼭 달기!!!)
11. m-con, ft-con에 배경색 칠해서 구조 확인
12. img-slider, contents모두 고정 높이 지정 후 배경색 칠해서 확인
13. ft-con에 고정 높이 지정
14. contents 구조짜기(공지사항/갤러리/배너)
15. 세로로 정렬되어야 하기 때문에 부모인 contents에 display: flex를 적용
16. 공지사항, 갤러리, 배너 너비가 총 800인데 소숫점으로 떨어져서 flex-grow를 쓰는게 좋음!!
17. footer 구조짜기
18. ft-logo와 fr-box에 배경색 칠해 확인
19.
21. ft-logo는 너비 값 계산해서 적용, fr-box는 남는 만큼 차지하기 위해 flex-grow: 1, flex-basis:0 적용
22. fr-box 구조짜기(하단메뉴 + copyright)
23. fr-box에 dispaly-flex를 적용 후 flex-direction을 적용해 세로 정렬
#웹 표준검사(W3C)
#D-1유형(반응형 디자인)
- 상단 우측에 바로가기
- 탭메뉴
- 반응형
- 레이어 팝업창
ㄴ 높이는 고정 높이, 너비는 꼭 calc 속성을 사용하여 지정!!!
1. 폴더, 파일 만든 후 독타입 선언하고 body에 배경색 넣어 잘 나오나 확인
2. 노멀라이즈
ㄴ body에 있는 배경색은 주석처리
3. 시멘틱 구조
ㄴ top-box에 너비 지정x
4. top-box에 높이 계산해서 확인
5. header은 고정 너비, main은 clac속성을 사용하여 반응형 너비를 줘야함
ㄴ width: calc(100vw - 200px); 중간에 띄어쓰기 꼭 해야댐 px도 써야함
6. 한 줄에 같이 정렬하기 위해 부모 속성인 top-box에 flex 적용
7. footer에 높이 지정/ 오른쪽에 스크롤 생기는게 맞음(하단에 생기면 안됨)
8. logo-box 높이 임의로 정해서 적용
9. header에 flex적용 후 세로 정렬 column 적용
menu-box에 로고 박스 뺀 만큼의 너비를 가져라 flex-grow:1 적용
10. main 구조짜기
11.
12.
13. short-cut 우측 상단에 띄워야 하므로 absolute 속성 사용
ㄴ 반응형이 아닌 고정형 문제 일 때는 부모 속성에 position: relative는 필수 작성!!!!
ㄴ 고정형에서는 써도 그만 안써도 그만임 / 정확한 위치를 원하면 사용하는 것이 좋음
14. footer 구조짜기
15. logo-box, copyright, sns-box에 배경색 칠해 확인
16. 부모속성인 footer에 flex 적용
17. hd-logo와 동일하게 ft-logo도 너비 200px(고정너비) / flex-grow 2:1줘도 됨
18. flex-grow 2:1줘도 됨 / copyright 남는 만큼 너비 차지하도록 flex-grow 적용
#D-4유형 다음 수업시간에 혼자 풀어볼 것
- 미리 연습하기