실무에서 마크업, css 작업 시 유의할 점
*2018. 1. 19 작성된 포스트
이번에 부장님께서 사원들 상대로 과제를 내주셨어요.
오늘 서로 피드백 주고 받는 자리를 가졌는데 부장님께서 알려주셨던 내용들 정리해봅니다!
참고로 저희 부문 실장님은 직도 열심히 공부하시는 멋진 분이예요!
직장 상사분을 이렇게 좋아하고 존경할 수 있는지 부장님을 만나고 알게되었답니당.
*block 요소 다음 img와 같은 inline 요소를 바로 사용하는 것을 자제하세요.
p와 같은 태그로 한번 감싸서 사용 할 것을 고려하세요.
*의미없는 img는 css로 처리 하세요. 보통 span이나 가상 css element로 하는 것이 좋아요.
*tab menu를 마크업 할때 탭메뉴 버튼 내부에 컨텐츠를 넣는 것이 논리적인 순서에 맞고 키보드로 운영 가능하도록 만들기 쉽습니다.
또 탭메뉴를 클릭하였을 때 노출되는 컨텐츠에 position:absolute를 주는 경우가 많은데 컨텐츠는 포지션을 주지 않고
탭메뉴에 absolute를 주는 것이 좋습니다. 그래야 컨텐츠를 탭메뉴 높이값만큼 padding-top을 주면서 부모 요소가 높이값을 가질 수 있어요.
*리스트 형태라고 모두 ul, li를 꼭 써야된다고 생각하지 마세요. li 안에는 div가 올 수 없기 때문에 구현 때문에 어쩔 수 없거나, 서로 관련 없는 리스트라면 li가 아닌 div와 같은 태그를 써도 괜찮습니다.
*transition이나 transform으로 요소를 불러들이거나 띄울 때에 스크립트에서 해당 요소의 크기 값을 불러들이면서 오류가 날 수 있습니다. 그러니 위 상황에서는 크기 값을 불러들이는 스크립트를 안 쓰는 것이 좋습니다.
*class명을 a태그에 직접 넣을지, 상위에 넣을 지는 답이 정해져 있지 않습니다.
그 a태그가 사이트 전반적으로 흔히 쓰이는 디자인을 가지고 있는지 그 부분에서만 쓰이는지 등 고려하여 정해야 합니다.
그런데 보통 a태그 디자인이더라도 button이나 input같은 다른 태그에 같은 디자인을 쓸 수도 있기 때문에,
아까 말했던 것 처럼 인라인 요소를 block요소에 바로 오게 하지 말고 p나 span같은 태그로 한번 감싸는 것을 추천합니다.
*id는 css적용 시 쓰지 않는 것이 좋습니다. css 적용 순서에서 너무 상위에 있기 때문에 추후 css 수정이나 추가 시 코드가 복잡해집니다.
*class는 inner나 area같이 한단어로 쓰는 것을 지양해야 합니다. 혼자 작업을 할 때에도 클래스 명이 의도치 않게 겹칠 수 있고, 협업을 하는 경우 여기 저기서 클래스 명이 겹치면 사이트 오류가 날 수 있습니다. 클래스 명은 형태 의미 등이 파악 될 수 있도록 합니다.
*누군가가 내 코드를 볼거라고 생각하고 코딩을 해 보세요.
*코드는 "재사용"이 가능한지가 중요합니다.
*위에서 클래스 명을 상속받아 css가 적용되는 것을 지양하세요. 디자인이 바뀌어서 해당 요소의 위치를 바꾸어도 css가 그대로 적용될 수 있도록 작업하세요.
*클래스를 너무 아끼지 마세요. 또, 클래스 명이 길다고 지저분하다고 생각하지 마세요. 클래스명은 최대한 의미 파악과 구분이 잘 되도록 하는 것이 더 중요합니다.
* Q.클래스명에 숫자를 넣을 때 menu-01, menu01, menu1 중 어떤 것이 가장 좋은 class 명인가요?
A.이부분은 명확히 정해진 건 없지만 그래도 역시 의미가 분리되어 있는 menu-01이 가장 좋다고 볼 수 있습니다.
*클래스 명 작성시 하이픈(-)과 언더바(_) 중 어떤 것을 사용 할지는 개인 취향입니다.
이미 존재하는 프로젝트를 작업해야 하는 경우는 해당 프로젝트 룰을 따르는 것이 맞습니다.
*mobile에서는 display:flex-box 사용해도 됩니다.
*어떠한 요소를 상하좌우 가운데에 정렬되도록 해야 할 때
position:absolute, top/left/right/bottom모두 0으로 지정하고 margin:auto 하면 정렬됩니다.
*상하 간격은 상쇄가 되는 margin으로 되도록 쓰고, 좌우는 보통 padding을 씁니다.