html 또는 css 등 태그의 사용에 있어서 웹 표준에 맞는 사용법이 존재한다. 사용방법은 다소 간단하고 쉽다. 다만 태그문구가 조금 길어지며 태그작성시 시간이 조금 더 소모가 된다. 이러한 부분에서 웹 표준 수칙을 지키지 않고 사용하는 기본 태그들이 많이 있다. 웹디자인 및 퍼블리싱을 공부한다면 처음부터 웹 표준에 맞게 태그를 사용하는 습관을 들이는게 중요하다.
문서의 구조는 html, 동작은 Javascript, 디자인은 css
제일 지켜지고 있지 않는것이 따로 관리를 하는 습관이다. 일부 사이트의 태그를 분석해보면 inline 스타일의 css를 많이 사용하는 것을 볼 수 있다. 이는 추후 관리를 전혀 신경 쓰지 않고 사용된 태그의 예이다. 각 페이지를 제어하는 css 파일이 있음에도 불구하고 귀찮다는 이유로 html 문서에서 !important를 시켜 따로 제어를 해버리는 경우가 있다. 이 같은 경우 추후 관리에 엄청난 어려움이 일어나며, 소스코드가 지저분해진다. 또한 중복 태그들이 발생하게 되며 이는 곧 사이트 오류로 번지게 된다. 웹 표준과 멀어지는 첫 신호음이다. 기본을 지키자.
잘못 사용되고 있는 태그의 예시
- <span style="font-size:16px; color:#red;">잘못된 폰트 디자인예시</span>
잘못 사용된 예시이다. style 속성은 html 문서에서 사용하지 말자. <span>태그에 class를 지정 한뒤 <head></head>안에 스타일을 따로 지정해서 사용한다.
- <style type="text/css">
td.fs_20 { font-weight:bold; font-size:20px;}
</style>
.
.
<td class="fs_20">폰트를 강조합니다.</td>
<td>라는 태그를 사용하며 class명이 fs_20을 사용한다면 폰트의 굵기가 굵으며 사이즈는 20px 이다. 라는 좋은 사용예이다. 하지만 더 좋은 방법도 존재한다. 동일한 css를 분리한뒤 important 하는 것이 관리에 더 좋은 이점이 있다.
- html 파일에는 무조건 마감 태그가 존재한다. 마감 태그가 없다면 / 를 넣어 준다.
<div></div> 이처럼 마감 태그가 존재하지만 존재하지 않는 input 태그 같은 태그들이 존재한다. 없으면 /를 사용 해서 마감을 해야 한다. <input type="text" value="인풋박스" />이런식으로 마감 처리를 해야 한다. <br><hr>줄바꿈 태그 또는 구분선 태그 또한 독자적으로 실행이 되지만 마감 태그는 없다. 이때 사용하는것이 / 이다. <br /> 이렇게 사용하는게 옳다
- img 태그에서 alt태그와 title의 속성을 꼭 명시를 해야하며 이중 alt태그는 무조건 사용해야 하는 태그이다.
웹 접근성을 통해 꼭 사용해야 할 태그들이지만 사용을 잘 하지 않는다. 없어도 이미지 노출에는 전혀 문제가 되지 않기 때문이다. 하지만 우리는 지금 웹 표준과 웹 접근성을 중요시 해야한다. 인터넷은 혼자 만의 것이 아니다. 시각장애인 및 일부 장애를 가진 사람들도 이용 할 수 있어야 한다. 이를 위한 태그중 일부인 태그들이다. alt 태그와 title 태그는 이미지에 대한 정보를 소리와 텍스트로 알려주는 기능을 가지고 있다. 그렇기에 반드시 사용해야할 태그이다.
<img src="img.gif" title="마우스를 이미지에 위치하게 되면 나오는 텍스트" alt="엑박일 경우 나타내는 텍스트며 장애인 컴퓨터 사용시 음성지원이 되는 태그" /> img 태그의 정상적인 태그 사용방법이다. 여기서도 </img>란 태그가 없기 때문에 자체적으로 마감 태그인 /을 동시에 사용을 해야한다.
웹 표준과 웹 접근성의 편의성은 왜 생겨났는지를 생각하게 되면 당연히 지켜져야 할 부분이다.
자주 사용되며 엄청 쉬운 태그에서도 정확하게 사용하는 방법을 모르는 사람들도 많이 있다.
'홈페이지 > 웹디자인' 카테고리의 다른 글
| 챗gpt 나도 한번 써봤다! 자동 코딩 소스 생성 (0) | 2023.08.23 |
|---|---|
| 가독성을 높이는 css 폰트속성 (1) | 2016.11.18 |
| 웹 호환성을 위한 크로스브라우징 css핵 (0) | 2016.11.17 |
| 스타일시트 css의 문법 (0) | 2016.11.16 |
| 웹접근성과 웹표준의 시작! css 사용하는 세가지 방법 (0) | 2016.11.15 |