웹디자인개발기능사 실기 1일차 (2025. 08. 02)

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

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

---

# A-3  문제

- 수업페이지 → 예제연습 → 구글드라이브 → A-3 다운

 

---

# 폴더 생성

→ css / image / js

 

 

---

# 수험자 제공 파일 image 폴더 안에 있는 이미지 옮기기

 

---

1. html에 독타입 선언

ㄴ 단축키:  ! + Tab

 

---

 

2. lang 부분 ko로 변경

---

3. title 변경

ㄴ 시험지에 있는 과제명으로 이름 지정

 

---

4. 파일연결(css / js)

ㄴ 스크립트는 script:src / defer 속성 적용

 

 

[defer 속성]

- html이 모두 읽힐 때 까지 스크립트 실행 지연

- 충돌예방

---

5. 연결확인

 

1)  css = body에 색상 넣어보기

 

2) js/ jquert = console 활용

---

6. 로고제작

ㄴ 로고를 직접 제작해야 하는 경우 문제 예시

ㄴ 사이즈 지정 ex. 가로 세러 200픽셀x40픽셀 크기로 웹사이트의 이미지에 적합한 로고를 직접 디자인하여 삽입한다.

 

 

 

[포토샵]

 

1) 새파일 열기: Ctrl + n → 대지생성

 

ㄴ 문제 대로 기본값 설정 변경 

ㄴ 무조건 픽셀로 설정되어 있어야 함

ㄴ 배경색은 투명색 지정해야해서 Transparent

 

 

2) 글씨 커스텀

ㄴ 색상, 폰트, 크기 맘대로

ㄴ 타입툴 단축키 : T

ㄴ Canves로 변경 후 세로, 가로 정렬 지정

 

 

3) 저장

ㄴ PNG로 추출

ㄴ Ctrl + Alt  + Shift+ S(정확하게 뒷배경 투명도로 저장됨!!!!)

ㄴ flie - export - quick

→ export as png

 

방법 1) Ctrl + Alt + Shift + S(정확하게 뒷배경 투명도로 저장됨!!!!)

ㄴ PNG 24 선택

ㄴ Transparency 꼭 체크 되어 있어야함!

 

방법 2) Ctrl + Shift+ S

 

방법 3) lie - export - quick

 

 

 

[로고 무채색 변경_그레이 스케일]

ㄴ그레이 스케일 단축키:  Ctrl + Shift + U(desaturate)

 

- 포토샵 파일 열려있는 경우

 ㄴ폰트 색상 변경해서 재추출하는게 나음

---

[visual studio code 자동완성]

- 실행 안될 때

- 작성중인 문장 공백없이 선택

- F1 →  emmet 검색  → 스크롤 내려서 약어확장 찾기

ㄴ 수정하다가 tab키가 안 먹을 때 F1 단축키 누르기

ㄴ 검색창에 emmet: 약어확장 클릭

---

7.  공통클래스 구조 잘 나오나 확인

---

8.  css에 body, ul. li에 노멀라이즈 셋팅

 

---

1. container 너비 지정

 

2. 가운데 정렬(margin 속성 사용)

ㄴ 왼쪽, 오른쪽 auto지정

 

---

# 배운 거 복습하기

- 틀 잡아보기