HTML , CSS 깔끔하게 작업하기(Tip)

 

 

 

UI/UX 작업을 하다보면 혼자하면 상관없지만 다른 사람과 공동으로 작업할 경우..

시멘틱한 태그를 사용하지 못하고 깔끔한 코드를 만들 수가 없습니다. 내가 자주 실수하고 대충 했던 작업들에 대해서 피드백을 만들려고 합니다.

아래 내용은 주관적인 저의 Tip입니다 (멘토 분들에게 피드백 받은 내용을 토대로 구성하였습니다.)

 

1. 태그 선택자는 위험하다.

다음과 처럼 태그 선택자를 사용해서 속성을 주는것은 매우 위험한 일입니다. class 선택자를 이용해서 작업을 해주세요

p , h1, mark{
	color : red;
}

 

2. body안에 바로 h1태그를 사용해서 작업을 해도 좋지만 <div class = "wrap">  </div> 태그를 이용해서 한번 감싸주면 스타일을 적용할 때 좋습니다.

 

3. 작업을 하다보면 <nav> 태그안에 <ul> <li> 태그를 사용하는데 꼭 이 태그를 사용하지 않고 <span> <div>등 inline-block을 만들어서 사용하면 훨씬 가독성이 좋아지는 코드를 만들 수 있습니다.

 

4. display : block은 부모 요소의 너비에 100% 넓이를 가지게 해주는 속성입니다 .따라서 추가적인 width의 설정은 필요 없습니다.

 

5. <table>태그는 화면단에 깔끔하게 보이기 위해서 width : 100% 를 적용해 주는 것이 좋습니다.

 

6. <table>을 작업 할 때는 <caption><span class="blind></span></caption>을 사용해서 테이블이 어떠한 역활을 하는지 명시해주는 것이 좋습니다. (이 작업을 해야 프론트개발자분들이 작업할 때 편하기 때문입니다)

 

7. <table>태그는 <colgroup> 속성을 반드시 사용해주어야합니다. (이유는 화면 크기에 따라, 콘텐츠 내용에 따라 달라지는 값입니다.)

 

8. <title> 태그는 브라우저 탭에 보이는 단위입니다. 제목을 현재 화면의 가독성있는 내용으로 바꾸어주면 좋습니다.

    ex)네이버 쇼핑 : 네이버

 

9. 축약형을 사용합니다. (축약형을 사용하는 이유는 브라우저 렌더링시 1줄로 처리할 수 있는걸 4줄로 처리하면 성능 이슈가 발생합니다.)

.test{
    margin-left : 10px;
    margin-right : 10px;
    margin-top : 20px;
    margin-bottom : 10px;
}

.test{
    margin : 20px 10px 10px;
}

 

10. disply : line-block을 쓰면 여백이 생깁니다. (4px정도의 여백입니다. font-size : 0px를 이용해서 줄일 수도 있지만 다른 방법이 있으면 그 방법을 사용합니다.) 또한 linle-block을 사용했으면 vertical-aligin을 이용해서 배치를 맞추어 주어야 깔끔한 화면을 만들 수 있습니다.

 

11. line-height 속성은 글자가 있는 태그마다 사용해주면 좋습니다. 크기는 10px ~ 22px 까지 다양하게 적용하고 있습니다.

    당연한 말이지만 font-size 보다 line-height 속성은 항상 커야합니다.

 

12. 의미가 있는 태그를 사용하면 좋습니다. <strong> <b> 태그의 역할은 완전히 다릅니다. 

 

13. float 속성에는 block을 주면 안됩니다.

 

14. img 속성에 alt 속성은 제목을 넣어줍니다. (하지만 <a> 태그안에 이미지가 있고 의미를 보충하는 내용이 있으면 넣어주지 않아도 됩니다.)  또한 이미지의 크기는 명시해주면 좋습니다.

 

15. float 속성이 밑으로 가는 경우 overflow : hidden을 사용해서 간편하게 처리할 수 있습니다.

 

16. vertical-aligin은 블록에서 사용할 수 없습니다.

 

17. <section> 태그는 반드시 안에 헤딩 태그를 포함하고 있어야합니다 (소제목의 의미입니다. 섹션은 하나의 분리된 내용이라는 뜻입니다.)

 

18. <li>태그에 가운데 속성을 이용해서 정렬하는 것은 위험한 행위입니다 . (first-child 속성을 활용해서 깔끔하게 정렬할 수 있습니다.)

 

19. display :line 내가 가지는 콘텐츠의 영역만 소비합니다. 따라서 inline-block과 혼용해서 사용하면 안됩니다.

 

20. 실무에서는 class name을 사용할 때 주의해야합니다. 대부분의 회사는 _ 언더바를 사용합니다.

 

21. placehoder를 쓸때는 title값이랑 같은 값을 사용하면 안됩니다.

 

22. textarea의 row, col을 설정해주면 좋습니다.

 

23. 상위 부모요소에 text-decoration : inline 속성을 상속받는 태그들 중 inline-block은 위의 부모의 성질을 가져오지 않습니다.

 

24. 전체 선택자는 사용하지 않습니다.

* {
}

25. rank를 설정하는 검색어 순위에 대해서는 <span> 보단 <em>태그가 더 잘 어울립니다.

 

26. 헤딩태그의 기본속성은 bold입니다. 이미 있는 값을 재 정의할  필요는 없습니다.

 

27. <form>태그에 class명을 주어 컨트롤하는 행위는 위험한 행동입니다. 내부에 <div>태그를 사용해서 설정해줍니다.

 

28. 문장과 문장사이의 개행은 <br>태그를 사용하고 문장과 <form>같은 태그사이에 개행은 <div>태그를 활용합니다.

 

29. class속성의 주석은 사용하지 않습니다. (다만 레거시 코드의 경우 누가 몇월 며칠 수정을 했다라는 태그는 사용하고 있다고 합니다.)

 

30. Depth를 줄일수 잇는가 항상 생각하면 좋습니다. 불필요한 태그로 두번 감싸는 것보다 하나로 만들어 코드 가독성을 높입니다.

 

31. @charset "utf-8" 처럼 인코딩 타입을 항상 명시해줍니다.

 

32. 마진의 경우 양쪽방향은 안좋습니다. 한쪽방향으로만 주고 최대한 밑에서 위로 미는 효과를 이용해서 정렬하면 좋습니다.

 

33. <ul> 같은 태그를 리스트 태그를 사용할 때 ul 자체적인 속성을 정의하기보단 <li>에 클래스명을 지정해서 속성을 정의하는게 좋습니다.

 

34. <p> 태그를 사용할 때는 항상 class명을 사용하도록합니다. (line-height값을 설정해주어야 좋습니다.)

 

---

추가중.