“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
마크업(markup)
마크업이란, <html>,<head>,<body> 등과 같이 명령어의 형태가 각 괄호로 되어있는 태그의 시작과 종료 즉, <>와 </>의 형태인 요소들로 코딩을 한 것입니다.
마크업을 할 때 지켜야 하는 기본 문법 규칙이 있습니다.
1. 요소는 시작 태그와 종료 태그가 있어야 합니다.
예시: <p>요소는 시작 태그와 종료 태그가 있어야 한다.</p>
2. 요소는 제대로 중첩되어야 합니다.
예시: <p>중첩된 요소가 있을 때는 <strong>바르게</strong> 표현해야 한다.</p>
3. img 태그에는 alt 속성이 있어야 합니다.
예시: <img scr="images/today.gif" alt="오늘">
4. 권장하는 사항도 있습니다.
예시1: <p>태그나 속성은 소문자로 마크업 하는 것을 권장한다.</p>
예시2: <p title="속성 값">속성의 값에는 따옴표 처리를 권장한다.</p>
5. 주석처리 방법
주석 내용은 설명문이기 떄문에 브라우저 화면에 출력되지 않게 합니다.
예시: <!-- header -->
시멘틱 마크업
HTML 문서에서 의미있는 부분을 의미에 맞는 태그를 사용하는것을 시멘틱 구조라 합니다.
HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 동일하게 받아들일 수 있는 환경이 아닐 수도 있습니다.
예를 들어, 시각 장애인의 경우에는 콘텐츠의 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다.
예시1:
<body>
반응형웹
</body>
음성낭독프로그램에서는 예시1을 그저 '반응형웹'이라고 읽기 때문에 그것이 제목인지를 알 수가 없지만,
예시2:
<body>
<h1>반응형웹</h1>
</body>
예시2처럼 제목을 의미하는 태그를 넣어준다면, 이 부분은 '반응형웹 헤딩 일'이라고 읽히기 때문에 제대로 된 의미를 전달달 수가 있습니다.
시멘틱(Sementic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다.
실제로 마크업을 할 때는 작업자마자 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요합니다.
중요한 이유는,
1. 검색 엔진 최적화(Search Engine Opimization)에 유리합니다.
2. 검색 엔진은 웹페이지의 여러 정보들을 수집해서 검색 키워드에 알맞게 노출시킵니다.
3. 가독성 때문에 시멘틱 웹을 작성하면 이런 검색 엔진에 노출되기 좋아 사이트 이용자들을 끌어오기 좋고, 유지 보수가 비교적으로 쉬워집니다.
논리적 순서 마크업
시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 중요합니다.
논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용할 수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있습니다.
예시:
| 1.HTML5 2. CSS3 |
| 3.HTML5란? QnA 4.CSS3란? QnA |
단순히 디자인만 본다면 1-2-3-4의 순서로 마크업을 하는 것이 맞아보일 수 있지만,
1-3-2-4의 순서로 마크업하는 것이 더 논리적으로 맞습니다.
이처럼 마크업을 할 때는 디자인의 시각적 흐름보다는 내용의 논리적인 흐름 순서를 잘 파악해서 하는 것이
가장 중요합니다.
입력장치의 예시
[비논리적인 경우]
[논리적인 경우]
