Skill/웹디자인기능사

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

oodada 2023. 9. 15. 23:27

웹디자인기능사 실기&필기 샘플파일 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 크기의 배너를 제작합니다.
  • 파일 > 내보내기 > 웹용으로 저장 합니다.
티스토리 친구하기