Skill/웹디자인기능사

웹디자인기능사 실기 - 기본 셋팅, 와이어프레임 제작

oodada 2023. 9. 15. 23:30

웹디자인기능사 샘플소스 https://github.com/oodada/exam-webdesign

0. HTML 코딩 시 중요(★★★★★) 체크포인트

  1. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야 한다.
    ※ HTML 유효성검사 서비스는 시험시 제공하지 않는다.(인터넷 사용불가)
  2. 주어진 자료(수험자 제공파일)를 활용하여 HTML 페이지를 제작한다.
  3. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 한다. (시작시 html:5 emmet 사용)
  4. CSS, JS는 별도의 파일로 제작하여 링크로 연결한다. 
    <link href="comm.css"> 
<script src="comm.js"></script>
  5. 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크 (예:#)되어야 하며 ‘Tab’키로 이동 선택할 수 있어야 한다.
    <a href="#">링크</a>
  6. 브라우저에서 CSS를 “사용안함”으로 설정한 경우 콘텐츠가 세로로 나열된다. (css 링크를 뺐을 경우)
  7. 타이틀 텍스트(title text), 바디 텍스트(body text), 메뉴 텍스트(menu text)의 각 글자체/굵기/색상/크기 등을 적절하게 설정하여 사용자가 텍스트간의 위계질서 (hierarchy)를 직관적으로 알 수 있도록 한다. (ex. 의미 있는 태그 사용)
    h1, h2, ul>li, strong, p
  8. 모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 alt 속성이 있어야 한다.
    <img src="이미지 경로" alt="이미지 설명">

1. html Documents 설정

  • index.html 파일을 열어

  • html:5 를 입력하고 tab을 누릅니다.

  • 짠~ 자동으로 아래 기본 html 코드가 나왔습니다.

    <!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
  </head>
  <body></body>
</html>

  • HTML5에 대한 "<!DOCTYPE>"을 선언합니다.

  • 한국어를 사용해야 하기 때문에 lang="en"을 lang="ko" 로 변경합니다.

  • meta태그의 charset이 UTF-8인지 확인한다.

  • title 태그의 타이틀을 JUST쇼핑몰로 변경합니다.

    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JUST쇼핑몰</title>
</head>
<body>
```

2. css, js 파일 연결하기

  • index.html 파일에 style.css, script.js 파일을 연결합니다.
    <!DOCTYPE html>
<html lang="ko">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>JUST쇼핑몰</title>
      <link rel="stylesheet" href="./css/style.css" />
      <script src="./js/script.js"></script>
  </head>
  <body></body>
</html>

3. 사이트 구조 이해하기

4. 사이트 와이어프레임(Wireframe) 제작

그림을 그릴 때도 대강의 스케치를 하고 세분화 해서 작업하듯 코딩 시에도 와이어프레임을 먼저 제작하고 각각의 섹션을 코딩합니다.

body 태그 안에 전체 컨텐츠를 포함하는 .wrap 을 만들고 그 안에 header, slide, container, footer로 와이어프레임을 제작한다.

<div class="wrap">
  <!-- header -->
  <header>헤더</header>
  <!-- /header -->

  <!-- slide -->
  <div class="slide">슬라이드</div>
  <!-- /slide -->

  <!-- container -->
  <div class="container">컨텐츠</div>
  <!-- /container -->

  <!-- footer -->
  <footer>풋터</footer>
  <!-- /footer -->
</div>

5. 작업한 파일을 Chrome > 개발자모드(F12)에서 파일 구조를 확인한다.

개발자 도구는 윈도우 Ctrl + Shift + I 또는 macOS Command + Option + I 키를 눌러서 열 수 있습니다.

.wrap > header, .slide, .container, footer 가 순서대로 배치되어 있는지 확인합니다.

6. style.css 작업하기

저작자표시 비영리 동일조건

'Skill > 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 실기 - 이미지 생성, vscode 설치, chrome 설치, 파일 생성  (0) 2023.09.15
웹디자인기능사 실기문제 - 공개문제 분석(요구사항, 와이어프레임, 준수사항)  (0) 2023.09.15
웹디자인기능사 필기&실기자료  (0) 2023.09.15
웹디자인기능사 시험정보  (0) 2023.09.15
웹디자인기능사 실기 문제&답안  (2) 2021.02.20

'Skill/웹디자인기능사'의 다른글

  • 현재글웹디자인기능사 실기 - 기본 셋팅, 와이어프레임 제작

관련글

티스토리 친구하기

티스토리툴바