HTML 나쁜 습관, 나도 무의식적으로 쓰고 있다.
- IT/HTML + info
- 2022. 8. 17.
HTML 작업이 끝나고 며칠 후에 내 코드들을 보면은 너무 복잡하고 지저분하게 되어있어서 뭐가 뭔지 모를 때가 많았다.
그래서 HTML을 어떻게 깔끔하게 짤 수 있을까.. 찾던 도중 나에게 안좋은 습관들이 많았던 것이다.
내가 알아본 것들을 정리해 볼려고 한다.
완전 초보 개발자 수준이니 어느정도 마스터 하신 분들은 눈요기로 봐주시면 감사합니다.
1. 다양한 태그를 사용해라
보통 박스를 구분할 때 <div> 태그를 자주 사용했는데, 나중에 수정하려고 보면 어디가 어디 부분인지 헷갈린다.
<header>나 <nav> 와 같이 구분이 되는 태그들을 다양하게 사용해주도록 하자.
<!--잘못된 예 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="section">...</div>
<!--좋은 예 -->
<header>...</header>
<nav>...</nav>
<section>...</section>
2.script 문서는 하단에 적자.
script문서를 무조건 하단에 적으라는 것은 아니다.
단, 상단에 적게 되면 onload 되었을 때 사용해야 하는 script 도 따로 window.onload 를 따로 써줘야 하니 차라리 문서 하단에 배치해서 편하게 작성하자.
<!-- 나쁜 예 -->
<head>
<script src="경로"></script>
</head>
<body>
...
</body>
<!-- 좋은 예 -->
<head>
</head>
<body>
...
<script src="경로"></script>
</body>
3.이벤트는 인라인 방식으로 사용 NoNo
onclick 같은 이벤트를 태그 안에다 사용하는 인라인 방식은 사용하지 않는 것이 좋다.
다른 사람들이 나중에 봤을 때 혼동이 올수도 있고 양이 방대해지면 일일이 찾아서 수정하기도 버겁다.
<!-- 나쁜 예 -->
<button onlick="clicked()"> ... </button>
<!-- 좋은 예 -->
<script>
function clicked() {... }
</script>
<button> ... </button>
4. 종료태그가 없는 요소에도 닫는 기호 사용하기
★본문-중단XHTML 같은 경우 닫는 기호는 필수 지만 현 HTML5 는 필수가 아니다.
하지만. 안전한 구조를 위해 몇몇 분들은 사용한다고 한다. / 하나만 체크해주면 되니 알아두면 좋을 것 같다.
<!-- 일반적인 사용 -->
<img src="경로" alt="" >
<!-- 권장 사용 ('/'사용)-->
<img src="경로" alt="" />
5.id는 소문자 카멜 표기법으로 사용하자.
id 속성은 스타일 지정을 위해 잘 사용하지 않고 주로 DOM 조작을 위해 사용해야 한다고 한다.
카멜 표기법이란?
-> 단어를 붙여 사용하되 맨 앞에 쓰이는 첫 글자를 제외한 단어의 첫글자는 대문자로 사용한다.
<!-- 카멜 표기법 -->
<!-- caramel + pick -->
<div id = "caramelPick">...</div>
6.이미지 태그 <a href="#" ....> <img ...>만들 때 # 쓰지 말기.
보통 href="#" 을 사용하는 경우는 이 이미지는 클릭이 가능하다. 라는 의미로 많이 쓰인다.
단. 이런경우 클릭하게 되면 # 이 맨 위 상단으로 올려주기 때문에 불편하다.
클릭만 가능하다고 보여주고 싶다면 css 속성의 cursor: pointer 를 사용하도록 하자.
(링크를 걸어줄 생각이면 상관없다.)
<!-- 나쁜 예 -->
<a href="#"> <img ... /> </a>
<!-- 좋은 예 -->
<style>
img {
cursor:pointer;
}
</style>
<img ... >
7. 외부 리소스 사용시 url 직접 사용하지 않기.
배포 도중 경로가 바뀌는 사고가 있을 수 있기 떄문에 jQuery나 bootstrap 플러그인을 사용할 경우
CDN 말고 다운로드를 해서 사용하도록 하자.
<!--나쁜예 -->
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<!-- 좋은 예 -->
<head>
<script src="../jquery-1.12.4.min.js"></script>
</head>
8. 이미지는 CSS -background-image 보다 그냥 img 태그로 넣자.
무조건 img태그로만 쓰라는 것은 아니다. 하지만 구글 seo에 좋지 않을 뿐더러 성능에 좋지 않다고 하기 때문에
중요한 이미지를 제외한건 img 태그로 사용하도록 하자.
<!-- 보통 사용 예 -->
<style>
img{
background-image: url('...');
background-repeat: no-repeat;
...
}
</style>
<!-- 권장 사용 예1 -->
<img src="경로".. />
<!-- 권장 사용 예2 -->
<picture>
<img src ...>
</picture>
공부하면서 좀 더 수정해 나가도록 하겠습니다.
만약 이 방법은 좋지 않다! 거나 조언 답글은 감사히 받겠습니다.
도움이 되셨다면 공감 한번 부탁드릴게요 ^0^!!
참고 사이트 :
'IT > HTML + info' 카테고리의 다른 글
| 반응형 웹 사이트 작성 법 & 디바이스별 규격 (0) | 2022.09.21 |
|---|---|
| 글꼴 폰트 사이트 & 아이콘 폰트 사이트 추천 및 사용법 (0) | 2022.09.18 |
| FullSize 배경 이미지 & 이미지 용량 압축하는 방법 (2) | 2022.09.17 |
| 랜딩페이지(landing page) , 1단 레이아웃 (0) | 2022.09.15 |
| HTML 마크업 - 이론편(1) (6) | 2022.07.29 |