[html&css] 웹디자인 기능사 채점기준

 

1. HTML 유효성 검사(W3C validator), CSS3 기준(W3C Validator)

 
작성한 HTML코드를 W3C Validator를 통해 검사 했을 때 오류가 없어야 합니다. 태그의 열림, 웹 접근성에 필요한 속성 값을 입력하지 않는 등의 오류를 검사하고 수정하기 위한 검사예요. 인터넷이 되는 상황이라면 유효성 검사는 https://validator.w3.org/ 에서 할 수 있습니다. 하지만 시험장에서는 인터넷 사용이 불가능해서 유효성 검사를 할 수가 없으니 평소에 유효성 검사를 실행해보면서 오류와 경고를 확인하고 수정하는 연습을 충분히 해 보는 게 좋아요.
 

The W3C Markup Validation Service

 
마크업 유효성 검사 하는 방법 3가지
- Validate by URI : 홈페이지 주소를 입력하여 검사
- Validate by File Upload : 검사할 파일을 업로드하여 진행
- Validate by Direct Input : HTML 코드 전체를 직접 붙여넣기 하여 진행
 

2. Javascript 콘솔 에러

브라우저(Google Chrome)에 내장된 개발도구의 Console 탭에서 오류('ERROR')}가 표시되지 않아야 합니다. 브라우저에서 F12 또는 웹브라우저 화면에서 마우스 우클릭시 나타나는 화면에서 [검사]를 클릭한 후 Console 탭에 오류가 나타나지 않도록 코드를 작성합니다.

3.  상호작용이 필요한 모든 컨텐츠

anchor 태그의 href 속성의 값을 임시값 '#'로 작성해야 하며, 웹 접근성 차원에서 링크 및 버튼 등에는 Tab 으로 포커스를 이동했을 때 화면에 표시되도록 해야 합니다.  키보드를 자유롭게 사용하지 못하는 유저들이 Tab 과 Enter 키로 메뉴를 이동할 수 있도록 하기 위함이죠.

<nav>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">work</a></li>
        <li><a href="#">contact us</a></li>
    </ul>
</nav>

 

4. 브라우저에서 CSS를 '사용안 함' 설정

구 브라우저인 Internet Explorer에서는 상단 View 메뉴에서 스타일 설정을 끌 수 있었습니다. 하지만 Microsoft Edge나 Chrome 브라우저에서는 메뉴를 통해 CSS 설정을 끌 수는 없습니다. HTML에서 연결된 CSS링크를 주석 처리하거나 개발자 도구에서 해당 라인을 삭제했을 때 컨텐츠가 세로로 나열되어야 합니다. 엄밀히 따지면 블록 요소들이 세로로 나열된다는 뜻입니다.
 

5. 위계질서(Hierarchy)

제목, 본문, 메뉴 등을 구분하고 각 내용의 중요도에 따라 굵기, 색상, 크기 등을 적절하게 설정하여 내용에서 중요한 순서대로 위계질서가 한 눈에 보이도록 구현해야 해요. 제목은 중요도에 따라 h1, h2, h3, h4, h5 태그를 사용하고 문단은 p 태그, 문단 내용 중 중요한 내용은 strong 또는 em 태그를 사용하고 링크는 a 태그를 사용해요.
 

6. 이미지의 alt 속성

모든 이미지(img) 태그의 alt 속성에는 내용이 있어야 합니다. 웹디자인 기능사 시험에서는 모든 이미지에 alt 속성의 값을 추가하는 것을 원칙으로 하고 있습니다. alt 속성은 이미지가 나오지 않는 상황에서 대체(Alternatives) 텍스트를 표시 해 주고, 검색엔진에서 검색되는 키워드이기도 합니다. 시각장애인이 웹사이트를 사용할 경우 스크린 리더와 같은 프로그램을 통해 웹사이트의 내용을 읽어주는 역할도 하므로 필수로 작성해야 합니다.
 
실무에서는 img 태그의 이미지가 특별한 의미가 없고 장식 역할을 할 경우에는 alt 속성은 있지만 alt 속성의 값을 넣지 않습니다. alt 속성 값이 필요없다고 alt 속성 자체를 삭제하면 웹표준 오류가 발생하므로 유의하시길 바랍니다.
 

7. 크로스 브라우징

제작된 사이트는 브라우저의 종류와 상관 없이 모두 같은 화면을 보여주어야 합니다. 이를 크로스 브라우징이라고 합니다. 이 부분은 크롬 브라우저를 기본으로 하고 작업했다면 크게 신경 쓰실 필요는 없어요. ES Edge 브라우저의 핵심 엔진 프로그램이  Chrome과 같은 엔진을 사용하고 있기 때문이예요. 하지만 실무에서는 Safari, Firefox 등 주요 브라우저에서 동일한 화면이 표현되는지 확인하고 다르게 나올 때는 Modernier과 같은 별도의 플러그인의 도움을 받아 수정해 주어야 합니다.