웹디자인기능사 실기 - 이미지 생성, vscode 설치, chrome 설치, 파일 생성

웹디자인기능사 실기&필기 샘플파일 https://github.com/oodada/exam-webdesign

웹디자인기능사 실기 소스 다운받기

1. VScode 설치하기

• html, css, js를 메모장에서 작업해도 되지만
• 더 쉽게 작업할 수 있도록 도와주는 프로그램을 이용하는 것이 좋습니다.
• 큐넷 공개문제 자료실 을 확인해보면 Visual Studio Code를 사용한다고 적혀 있으니 VScode를 설치해 작업합니다.

VScode 다운로드
VScode 설치 가이드

2. Chrome 설치하기

• 실무에선 Internet Explorer 대신 Chrome을 사용합니다.
• Chrome을 설치해 테스트 합니다.

Chrome 다운로드

3. 폴더 만들기

• A-1 예제를 실습해볼 예정입니다. 윈도우 탐색기를 열어 "A-1-JUST쇼핑몰" 폴더를 만듭니다.
  
• "A-1-JUST쇼핑몰" 폴더 안에 images, css, js 폴더를 만듭니다.
  
• VScode를 열고 "탐색기 > 폴더 열기" 를 눌러 A-1-JUST쇼핑몰 폴더를 엽니다.
  )
• VScode 왼쪽 탐색기에 아래 그림과 같이 A-1-JUST쇼핑몰 폴더 내에 images, css, js 폴더가 있으면 됩니다.
  

4. 작업 파일 만들기

• A-1-JUST쇼핑몰 폴더에 index.html 파일을 만들고
• css 폴더에 style.css 파일을 만들고
• js 폴더에 script.js 파일을 만듭니다.
  )

---

5. 배너 이미지 만들기

• 코딩하기 전 와이어프레임(Wireframe)을 보고
• 이미지로 처리 되는 부분
• 로고, 이미지 슬라이드, 배너의 이미지를 미리 작업합니다.

1. 로고 만들기

로고 샘플

• A.1 로고의 세부 지시사항을 꼼꼼히 읽어보고 작업합니다.

• width 200px, height 40px

  - 포토샵의 아래 조건으로 새로운 문서를 열어 로고 이미지를 만듭니다.
  - 가로 200px (단위 픽셀)
  - 높이 40px (단위 픽셀)
  - 해상도 72픽셀/인치
  - 색상 모드 RGB색상
  - 배경 투명

  

• 심벌 없이 로고명을 포함한 워드타입으로 디자인

  - 디자인 후 파일 > 내보내기 > 웹용으로 저장으로 
  - "logo.png" 파일로 저장한다.

2. slide 이미지 만들기

slide 샘플
))

• 제공된 소스를 이용해
• width 1200px * height 300px 사이즈로
• slide 이미지 3개를 제작합니다.
• 파일 > 내보내기 > 웹용으로 저장 합니다.

3. 배너 이미지 만들기

배너 샘플

• 제공된 소스를 이용해
• width 385px, height 180px 크기의 배너를 제작합니다.
• 파일 > 내보내기 > 웹용으로 저장 합니다.