“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
시멘틱 마크업과 논리적인 순서 마크업
우선 마크업이 무엇이고, 마크업의 기본 문법 규칙은 어떤 것이 있는지 먼저 알아보겠습니다.
<html>, <head>, <body> 등과 같이 명령어의 행태가 '<>'로 되어있는 것을 태그(tag)라고 하고,
<body> ~ </body>와 같이 태그의 시작과 종료를 하나의 요소하고 합니다.
그리고 이러한 요소들로 코딩한 것을 마크업(markup)이라고 합니다.
이런 마크업의 기본 문법 규칙으로는
1. 요소는 시작 태그와 종료 태그가 있어야 한다.
<p>요소는 시작 태그와 종료 태그가 있어야 한다.</p> o
<p>요소는 시작 태그와 종료 태그가 있어야 한다. X태그 중에는 종료 태그가 없는 요소들도 있다.
이러한 요소를 '빈 요소'라고 하는데, 자주 사용되는 빈 요소에는 <br>, <hr>, <imput>, <meta>, <link> 등이 있다.
2. 요소는 제대로 중첩되어야 한다.
<p>주첩된 요소가 있을 때는 <strong>바르게</strong> 표현해야 한다.</p> O
<p>주첩된 요소가 있을 때는 <strong>바르게</p> 표현해야 한다.</strong> X마지막에 정의한 태그를 가장 먼저 닫아야 한다는 뜻인데, 이러한 중첩 관계를 부모와 자식 관계라고도 한다.
여기에서는 <p>태그가 부모 요소가 되고, <strong> 태그가 자식 요소가 된다.
3. img 태그에는 alt 속성이 있어야 한다.
<img src="imange/today.gif" alt="오늘"> O
<img src="imange/today.gif"> Ximg 태그에 alt속성을 지정해야 하는 이유는 문법적으로도 필요하지만, 이미지를 볼 수 없는 환경에서도 그 이미지에 대한 정보를 충분히 제공해주어야 하기 때문이다.
4. 권장하는 사항도 있다.
<p>태그나 속성은 소문자로 마크업 하는 것을 권장한다.</p> 권장
<P>태그나 속성은 소문자로 마크업 하는 것을 권장한다.</P>
<p title="속성 값">속성의 값에는 따옴표 처리를 권장한다.</p> 권장
<p title=속성 값>속성의 값에는 따옴표 처리를 권장한다.</p>HTML5는 대소문자를 구분하지는 않지만 가급적 소문자로 통일해서 마크업 하는 것과, 속성에 대한 값에 따옴표 처리하는 것을 권장한다.
5. 주석처리 방법
<!-- header -->
<!-- 여기서부터 공지 사항입니다. -->주석은 일반적으로 협업(공동작업)시 다음 작업자가 현재 작업한 내용을 쉽게 알아볼 수 있도록 도와주는 설명문이라고 보면 된다. 주석 내용은 브라우저 화면에 출력되지 않는다.
이렇게 5가지 마크업 기본 문법 규칙에 대해 알아봤습니다!
그럼 이제 시멘틱 마크업과 논리적 순서 마크업에 대해 알아보겠습니다.
시멘틱 마크업(Semantic makup)
시멘틱의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 없는 환경이 아닐 수도 있습니다.
[예시 1]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시멘틱 마크업</title>
</head>
<body>
반응형웹
</body>
</html>'반응형웹'이 HTML문서에서 제목으로 사용된다고 할 경우 [예시 1]처럼 마크업을 하면, 스크린 리더에서는 그저 '반응형웹'이라고만 읽어주기 때문에 그것이 제목인지 알 수가 없습니다.
[예시 2]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시멘틱 마크업</title>
</head>
<body>
<h1>반응형웹</h1>
</body>
</html>이렇게 [예시 2]처럼 '반응형웹' 부분을 제목을 의미하는 태그로 바꾸어 마크업 해 주어야 이 부분이 제목인걸 알 수 있게 됩니다.
[예시 3]
이렇게 [예시 2,3]처럼 의미에 맞게 마크업 해주는 것을 시멘틱 마크업 이라고 한다.
작업자마다 콘텐츠의 의미를 해석하는 차이가 있을 수 있지만 가급적 시멘틱하게 마크업 하려고 노력하는 것이 중요!
자, 그럼 이제 논리적 순서 마크업에 대해 알아보겠습니다.
논리적 순서 마크업
디자인의 시각적인 흐름보다는 내용에 대한 논리적 흐름 순서를 잘 파악하여 마크업 하는 것이 무엇보다 중요합니다.
[예시 1]
이렇게 오류 사례와 준수 사례를 살펴보면 시각적인 흐름이 아닌 내용에 대한 논리적 흐름순서를 잘 파악하여 마크업 하는 것이 중요합니다.
이게 그렇게 중요한가~ 생각할 수도 있지만
논리적 순서에 의한 마크업은 키보드(Tab키)나 터치패드와 같은 입력 장치만으로 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용할 수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있기 때문에 최대한 논리적 순서에 맞게 마크업 하는 것이 중요합니다!