2025. 05. 04 웹디자인개발기능사 2일차
<목표>
A~F 유형 와이어프레임 제작
A-1) 2024. 12. 03 문제 유형
폴더 생성 방법)
- css
ㄴ style.css
- js
ㄴ scripts.js
ㄴ jquery.js
- imges
ㄴ img
- index.css
1. 독타입 선언 → 웹 표준 준수
* 주석처리
- Ctrl + /
- 메모(구조 구분하는 용도로 사용)
* 마크업이 편해지는 단축키
- End키 문장에서 가장 끝으로 이동
2. css / script 파일 연결
3. 스크립트 파일 연결 후 defer 속성 적용
* defer 속성
- html에서 스크립트가 언제 실행될지 조절하는데 사용되는 속성
- html이 모두 읽힌 후에 자바스크립트를 작성하도록 사용하는 속성
- 안정적으로 script를 작동하게 하는 속성
4. js 연결 확인
- console. clear();
- console.log("n")
- 문구 작성할 때 ""필수)
* jquery 실행문
ㄴ $(documet).redy((){});
* 웹 표준
- header: 상단 구조(로고/ 메뉴 등)
- main: 중앙 구조(배너/슬라이드 등)
- footer: 하단 구조(cs번로/sns 정보 등)
5. 시맨틱 구조 생성(header, main, footer)
ㄴ 시맨틱 구조 각 구조에 공통 클래스 container생성 후 개별 클래스 네임 다시 붙이기 !
6. body 노멀라이즈(margin, padding → 0)
* 한 단어씩 선택
- Ctrl+Shift+ → ← : 단어 기준으로 방향대로 잡힘
7. container 가운데 정렬(marign left, right auto 설정)
- margin left: auto;
- margin right: auto;
8. hd-con 높이 지정
9. main-con(이미지 + 컨텐츠 생성)
ㄴ 쟁코딩!
ㄴ img slide, contents에 각각 높이 지정
10. footer-con 높이 지정
11. hd-con 안에 logo-box와 menu-box 생성
12. 높이를 상속받기 위해 부모 속성에 display: flex 지정
flex-item)
- 부모의 displat가 flex가 되어야 함
- 자식은 flex-item이 되고 기본값인 align-items:strech; 속성으로 인해 부모의 높이를 상속받게 됨
13. 비율을 일정하게 유지하기 위해 flex-grow 지정 후 깨지지 않기 위해 flex-basis:0;도 함께 작성
flex-grow)
- flex의 비율 속성
- 남은 공간을 어떤 비율로 차지하게 될지
flex-basis)
- flex의 너비 속성
- flex에서 width와 같은 역할을 함
- 0이라는 너비를 갖고 시작함
- flex-item 들의 너비 혹은 높이를 0으로 설정 해주고 이후 n의 비율을 갖겠다
14. contents에 news+banner+short-cut 세 가지 콘텐츠 생성
ㄴ 쟁코딩!
15. 세가지 콘텐츠에 배경색 임의 지정
ㄴ 높이를 상속받지 못함
ㄴ 부모를 찾아 display: flex 적용 해주고 세 개의 콘텐츠의 비율을 동일하게 하기 위해 flex-grow와 flex-basis 지정
16. footer에 logo-box와 copyright, sns-box 생성
ㄴ 쟁코딩!(로고 + 가피라이트 + sns)
ㄴ 너비, 높이가 없어 안보임
ㄴ 너비 지정
ㄴ 높이를 상속 받아야 함으로 부모에게 display: flex 지정
ㄴ copyright에 flex-grow:1과 flex-basis:0 지정해서 비율 일정하게
웹 표준 검사)
1. 구글에 w3c validator 검색
2. 코딩 했던 파일 index.html 파일 선택
3. 파일 업로드 후 저 창이 뜨면 웹 표준에 맞게 잘 한 것임!
C-1) 2024. 12. 03 문제 유형
1. container로 큰박스 만들어서 시맨틱 구조
2. 임의로 높이와 배경색 지정
3. header 안에 logo-box와 menu-box 생성
ㄴ menu-box는 무조건 nav 태그 안에 생성해야함!!!
4. header에 너비 200px 지정
ㄴ header에 class 네임명으로 hd-con 이름 생성
ㄴ logo-box에 높이를 상속 받기 위해 부모 속성인 hd-con에 display: flex 지정
ㄴ 제일 큰 container 상위 속성에도 display: flex 지정
5. flex-direction을 적용하여 세로 방향으로 지정
flex-direction)
- flex-direction: auto; = row;(가로방향)
- flex-direction: auto; = column;(세로방향)
6. 시맨틱 구조(main + footer 생성)
ㄴ 쟁코딩!
7.
8.
9.
10.
11.
12.
ㄴ 높이를 상속 받지 못해서 fm-menu에도 flex-grow: 1; flex-basis 지정
B-1) 2024. 12. 03 문제 유형
- 날개 비슷한 구조물
= header/footer 자체에 너비를 지정하지 않고 그 안에 구조물로 너비를 지정해줘라 = 색상 넣어주기
ㄴ 튀어나와 있는 부분은 높이 지정하지 말고 색을 칠해라(header, footer)
D-1) 2024. 12. 03 문제 유형 - 반응형(100%-200px)
ㄴ %으로 나오면 반응형
ㄴ %는 고정 높이는 반응형으로
1. top-box
2. top-box에 높이, 배경색 지정
3. 100%-200px를 빼야하기 때문에 너비 속성의 calc 사용
calc)
- 사칙연산
- 사칙연산 부호 앞 뒤로 띄어쓰기 중요(띄어쓰기 주의!!!)
* viewport w/h
- 100vw(가로)
- 100vh(높이)
4. 높이를 상속 받지 못해서 부모 속성을 display: flex로 지정
5. footer 생성
6. main에 shrot-cut 컨텐츠 생성
absolute)
- 위치 속성
- 유령처럼 떠다니는 친구
- relative를 통해 묶어줘야 함!!!!
- absolute가 된 엘리먼트의 위치를 설정해줘야함
7. main에 컨텐츠 4개 생성
8. main에 relalive를 주고 short-cut에 absolute를 주면 위치 고정
8. top 0을 주면 상단 위로 박스가 올라감
9. right 0을 주면 오른쪽으로 붙음
숙제
- D유형 header태그 footer 태그 짜올 수 있는 사람 짜오기