Frontend

HTML 기초 | html anti-pattern 안티 패턴, 나쁜 습관

경아 (KyungA) 2021. 1. 25. 13:42
반응형

이번 내용은 CSS 안티패턴에 이어서

HTML 안티패턴에대한 내용입니다

(CSS 안티패턴 내용과 함께 보면 굉장히 좋습니다 👉 이동)

제가 실무에서 지적 받았던 내용도 함께 작성했고

HTML이다보니 CSS와 연관된 내용이 많습니다!

 

 

 

 

 

1. <script>는 문서 하단에 작성한다

<script> 스크립트 태그는 </body>태그 끝나는 부분 바로 위에 작성합니다

정말정말정말x1000000 기본적인 내용인데

제가 국비학원 다닐때 강사님이 <head>에 작성하라고 알려줬습니다....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그래서 스크립트 태그가 <body>에 들어가 있는걸 보고선 매우 혼란스러워 했죠....

 

 

 

 

2. 외부 리소스 사용 시 URL을 직접 사용하지 않는다

이건 CSS에서 웹폰트를 쓰지 말라는 내용과 동일합니다

외부 URL을 직접 사용하지 않고 무조건 다운로드해서 불러오는걸로!!!

 

 

 

 

3. 이벤트는 인라인 방식으로 사용하지 않는다

옛날에 작성된 자바스크립트 예제를 보면 DOM 엘리먼트 (HTML 태그) 안에 인라인 방식으로

리스너가 등록된걸 본 적이 꽤 있을겁니다

// 안 좋은 예
<button onclick="closeBtn">버튼</button>

이런 형식은 추 후에 유지보수와 디버깅이 어려워집니다

JS 수정하면 HTML도 수정해야하며 하나의 엘리먼트에 이벤트 리스너를 여러개 등록할 수 없습니다

그러니 꼭 분리해서 작업을 해야합니다

+ 스타일 태그도 마찬가지 입니다😊

 

 

 

 

4. <a> 태그의 href="" 속성을 공백으로 처리하지 않는다

이건 제가 개인적으로 실무에서 털린 일입니다

사실 꾸준히 #을 넣어 처리했는데, 예~전에 어디선가 스치듯 본 공백처리를 보고선

저렇게 작성해도 되나보다~ 하고 따라 썼다가 한 소리 들었습니다ㅋㅋㅋㅋㅋㅋ....

(하필 바쁠때 딱 한번 그랬던게...뜨쉬....)

간혹 외부 HTML 소스들을 보면 <a> 태그에 문서를 연결하는 속성 href를 공백으로 처리하시는 분이 계십니다

이동할 문서가 정해지지 않았을 경우 공백으로 냅두지 말고 꼭 #을 넣어줍시다

// 안티패턴
<a href="">링크</a>

// 올바른 예
<a href="#">링크</a>

그리고 버튼 대용으로 a 태그를 쓰고 href 속성을 공백 처리하는 분들도 있으신데

좋은 습관이 아닙니다! 태그 용도에 맞게 마크업 합시다😊

 

 

 

 

5. id  name은 소문자 카멜 표기법으로 작성한다

이 내용은 정말 기본적인데 요즘 class로만 작성하다보니 id도 하이픈 표기법으로 작성했던 것 같아서

제가 까먹지 않기 위해 작성합니다😊

<div id="headerMenu">
     ...
</div>

그리고 id 속성은 스타일 지정을 위해 사용하지 않으며, DOM 조작을 위해 사용해야한다고 하는군요

(이건 처음 알았음..ㅎ)

 

 

 

 

6. 안전한 구조를 위해 종료 태그가 없는 요소에도 닫는 기호를 사용하자

이거는 혹시 모르니까~ 더 안전하게~ 라는 이유로 권장하는 방식인 것 같습니다!

HTML에는 종료 태그가 없는 요소들이 몇개 있습니다

input, br, meta, img, link, area, base, col, commend, embed, hr, keygen, param, source ...

XHTML 같은 경우 닫는 기호가 필수! 필수!!입니다.

그러나 HTML5 에서는 닫는 기호를 생략할 수 있습니다. 필수가 아닌거죠

// XHML
<br />

// HTML
<br>

하지만 다들 안전한 구조를 위해 몇몇분들이 필수!라며 권장하는 것 같습니다😓

속해 있는 집단에따라 맞춰가며 사용하심 좋을 것 같습니다

 

 

 

 

7. 이미지는 background-image 속성으로 넣기보다는 img 태그로 넣자

이건 정말... 딜레마인 것 같습니다...

저같은 경우 반응형 작업을 하면서 img 태그로 넣었던 이미지 때문에 굉장히 애를 많이 먹었습니다

그래서 편의를 위해 background로 넣은적이 많았습니다

(크기가 줄어들때 특정 영역이 유지된채 줄어들었으면 할 때 굉장히 유용했기에...)

일단 background-image로 넣으면 안 좋은 이유를 설명하겠습니다

  • SEO (검색엔진최적화)에 좋지 않다

  • 접근성에 좋지 않다 (스크린 리더기는 background-image를 무시합니다)

  • 성능에 좋지 않다 (이미지를 요청하기 전에 브라우저가 CSS를 먼저 다운로드하고 파싱. 로드가 느려집니다)

이유가 더 있지만 이 정도만 해도 충분한 것 같습니다

다른 방안으로 <picture> 태그를 사용하라고 합니다. 근데 이 태그의 문제는 ie 호환이 안됩니다(...)

사용법과 <picture> 태그의 자세한 내용은 👉 여기서 확인하시면 됩니다

제 생각에는 웹사이트에 중요 배너, 중요 컨텐츠 이미지에는 <img> 태그로 삽입하고

그 외 부수적인 곳에는 baackground-image로 넣는게 좋을 것 같습니다

 

 

 

 

👀 마무리

사실 정리할게 더 있는 것 같은데.. 떠오르지 않습니다😅

무엇보다 HTML 단독으로 안티 패턴은 종류가 별로 없는 것 같고

대부분이 CSS와 엮여있어서....

일 하다가 발견하면 또 추가할 예정입니다

요즘은 새로운걸 배우기보다는 나쁜 습관 고치기,

기존에 알고 있던 내용들을 더 튼튼히 다지는 것에 집중하고 있습니다

틀린 내용이 있다면 댓글 부탁드립니다👋

반응형
저작자표시 동일조건