[HTML/CSS] 나는 HTML 과 CSS를 제대로 작성하고 있는가?

이번 포스트에서는 여러 프로젝트를 진행하고 강의를 들으면서 노트해뒀던 HTML과 CSS 작성 시 주의해야 할 점과 팁을 공유해볼까 합니다. 물론 HTML과 CSS를 꼭 이런 식으로 작성해야 하는 건 절대 아니며 필자도 이 모든 걸 다 고려하면서 작성하진 못하고 있습니다. 다만, 더 효율적이면서 가독성도 좋은 CSS 코드를 작성하려고 매번 노력하고 있고, 해당 포스트를 읽는 분들께서도 좀 더 나은 방향으로 나아갈 수 있었으면 하는 마음에 몇 가지 적어보도록 하겠습니다. 

---

 

HTML이 어떤 역할의 언어인지 알자

필자가 처음 마크업을 할 때 가장 많이 했던 실수 중 하나는 HTML을 작성할 때 스타일적인 요소도 함께 고려를 하면서 마크업을 했던 점입니다. HTML의 가장 근본적인 역할은 문서의 구조를 잡고 독자에게 문서의 흐름을 잘 파악할수 있도록 하는 것입니다. 그 외의 스타일이나 이벤트는 CSS와 JS로 처리를 해주는 게 일반적입니다.

 

구체적인 예를 한번 들어보겠습니다.

 

아래와 같이 최근 글/포스트들 몇개만 있고 전체 리스트를 보는 용도의 더보기 버튼이 있는 웹 문서 구조를 많이 보셨을 겁니다.

 

 

해당 디자인을 봤을때 당연히 게시판 옆에 더보기 버튼이 있으니 같은 선상에 넣고 마크업을 하는 분들이 많으실 겁니다.

물론 해당 방법이 틀린 건 아니지만, 최근 글 링크 이후에 더보기 버튼 마크업이 있다면 더욱 문서의 흐름이 잘 담긴 HTML을 작성할 수 있다고 생각합니다. 디자인상의 위치는 CSS flexbox나 position absolute를 통해 충분히 조정 가능합니다.

 

해당 방식으로 마크업을 하게 되면 저시력자 접근성도 좋아집니다. 보통 저시력자 사용자들은 스크린리더를 통해 문서의 구조를 파악하는데 tab을 눌렀을 때  글보다 더보기 버튼에 먼저 포커스가 잡힐 경우 흐름을 이해하는데 방해가 될 수 있습니다. 또 마지막 최근 글을 읽고 더보기를 하려면 총 5번의 shift+tab을 눌러 더보기 버튼에 포커스를 다시 잡야아하기 때문에 일단 모든 글을 읽어본 뒤, 구조상 밑에 위치해 있는 더보기 버튼에 포커스가 가도록 마크업을 설계해주는 편이 좋습니다. 

 

---

조금은 다른 예시지만 Heading 태그가 제대로 사용되지 않는 경우도 종종 볼 수 있습니다. 헤딩 태그의 경우 기본적으로 웹 스타일이 들어가 있는데 h1이 32px에  h6는 11.2px 정도입니다. 이 수치는 단지 기본값일 뿐이지 디자인상 큰 글자가 있다고 해서 무조건 h1을 쓰거나 작다고 해서 h6을 쓰는 방법은 좋지 않은 방법입니다. 헤딩 레벨은 문서에서 그 제목이 얼마나 중요한지를 나타내는 용도이기 때문에 책의 목차를 써 내려가듯이 작성을 하는 것이 좋습니다. 필자가 모든 HTML 요소의 스타일을 초기화시키는 reset.css를 사용하는 이유도 애초에 스타일적인 요소를 전혀 고려하지 않고 HTML 본연의 역할의 충실할 수 있도록 하기 위함도 있습니다.

 

HeadingsMap이라는 구글 extension을 깔아 여러 웹의 헤딩 레벨 구조를 살펴보는것도 좋은 방법입니다.

 

---

 

시맨틱(semantic) 마크업 사용하기

시맨틱 마크업도 마찬가지로 문서의 구조를 파악하는데 많은 도움을 주는 요소중 하나입니다. 시맨틱 태그를 사용하지 않아도 외관상 멋진 웹을 만드는 건 가능하지만 많은 사용자들에게 더 좋은 경험을 전달하기 위해선 div 태그를 남발하기보다는 올바른 시맨틱 태그를 사용하는 것이 중요합니다. 어처피 자주 사용하는 시맨틱 태그는 한정되어있으니 처음에 익숙하지 않더라도 자주 쓰다 보면 분명 익숙해지기 마련입니다.

---

 

alt 태그로 사진의 의미를 잘 전달하기

alt 태그는 사진을 불러오지 못했을 경우 대체로 보여줄 텍스트이기도 하지만 저시력 사용자들에겐 사진의 의미를 알 수 있게 해주는 유일한 수단이기도 합니다. 이런 중요한 역할을 맡고 있음에도 불구하고 많은 분들이 alt를 아예 누락시키거나 "이미지 1", "이미지 2"처럼 이미지의 내용을 전혀 유추할 수 없는 대체 텍스트 적곤 합니다. 물론 모든 상황에서 의미 있는 대체 텍스트를 주는 건 힘들겠지만 될 수 있는 한 아래 예시처럼 의미가 잘 전달되도록 적어주도록 합시다. 

 

카메라 포즈 셀레브레이션을 하고 있는 손흥민 선수

 

 

이미지 태그를 사용하지 않고 배경으로 이미지를 넣는 분들은 IR 기법을 사용해 배경 이미지에도 대체 텍스트를 넣어주시는 방법도 고려해보시길 바랍니다.

 

[접근성] 배경이미지에 대체텍스트 - IR (Image Replacement) 기법

 

---

 

가상 클래스 선택자 제대로 활용하기

가장 대표적인 가상 클래스 선택 자라고 하면 :hover가 떠오르실 텐데, 그 외에도 다양한 가상 클래스 선택자가 존재하고 이를 제대로 사용하면 HTML과 CSS 코드를 효율적으로 작성할 수 있습니다. 필자가 가장 많이 사용하는 가상 클래스 선택자중 하나는  :before와 :after로 특정 요소 앞에 불필요한 마크업을 삽입하지 않고 스타일링이 할 때 주로 사용하고 있습니다.  그 외에도 :is나 :where처럼 전처리기 없이도 반복을 획기적으로 줄일 수 있는 선택자들도 있으니 많이 사용해보고 익숙해지는 것이 좋습니다.

---

 

Important는 될 수 있으면 피하기

CSS를 작성하면서 한 번도 important를 써보지 않은 사람은 없을 것이라고 생각합니다. 필자도 처음 CSS를 접했을 때 CSS 적용 우선순위를 잘 숙지하지 못했었기에 도저히 적용히 안 되는 경우 속성 값뒤에 important를 사용해 일단 적용이 되도록 작성하곤 했습니다. 여기서 말하고자 하는 건 무조건적으로 important를 쓰지 말라는 것은 아닙니다. 다만, important는 말 그대로 '중요한' 스타일에 적용을 하기 위해 만든 것이기 때문에 모든 스타일에 important를 붙이게 되면 그것은 더 이상 중요한 게 아니게 됩니다. 그렇기 때문에 정말 중요한 경우에만 사용하도록 하고 일반적으로는 CSS 적용 우선순위를 잘 숙지하면서 높은 우선순위를 갖도록 작성해나간다면 추후에 규모가 더 커진다 해도 유지보수가 더 용이하게 될 것입니다.

---

 

z-index는 짜임새 있게

이것도 사실 위에 언급한 개념이랑 비슷합니다. z-index는 position 값이 기본값 (static)이 아닌 요소를 대상으로 배치 순서를 정하는 속성인데 많은 예제 코드를 보면 99999 같은 높은 숫자가 적혀있는 걸 볼 수 있습니다. 물론 작은 프로젝트나 예제의 경우 크게 상관이 없겠지만 규모가 좀 커진다면 여러 요소들의 배치를 신경 써줘야 합니다. 아무 생각 없이 특정 요소에게 z-index: 99999 값을 줬다면 그 앞에 배치되어야 하는 요소가 생긴다면 그보다 더 높은 숫자를 줘야 하고 또 앞에 요소가 배치된다면 더 높은 숫자가 주어줘야 합니다. 물론 숫자가 높다고  성능상 문제가 생기지는 않지만 이런 일이 반복이 되다 보면 가독성이 현저히 나빠지고 유지보수가 힘들어지게 됩니다. 필자의 경우 아직까지는 1~100 사이에 숫자들을 10 단위로 끊어서 사용해도 충분했기 때문에 독자님들도 이를 고려해서 짜임새 있게 z-index를 설정해보시길 바랍니다.

 

---

 

무분별한 와일드카드(*) 사용은 자제하기

뭐든지 무분별한 사용은 좋지 않지만 특히 와일드카드의 경우 모든 요소에게 영향을 주기 때문에 처음 초기화 시 사용하는 걸 제외하곤 사용하지 않는 걸 추천드립니다. 필자는 아래와 같이 어디서든 공통적으로 적용이 되어야 하는 부분에만 적용해주고 있습니다. 

 

* {
  box-sizing: border-box;
  margin: 0;
  line-height: 1;
 }

---

 

 

스타일을 없애는 CSS는 지양하자

 

많은 개발자들이 스타일을 지우는 CSS (disabling pattern)을 많이 사용하곤 하는데, CSS를 없애기 위해 더 많은 코드를 작성하는 것보다 되도록이면 CSS를 덮어 씌우지 않고 필요한 곳에만 적용되는 방법을 사용하는 것이 좋습니다. 이 패턴을 enabling pattern이라고 하는데 한번 예시를 들어보겠습니다. 

 

<ul>
 <li>Son</li>
 <li>Kane</li>
 <li>Lucas</li>
</ul>

 

해당 축구선수 리스트의 마지막 리스트(Lucas)를 제외한 모든 리스트를 에게 마진을 주도록 해보겠습니다. 

 

먼저 disabling 패턴을 적용할 경우 아래와 같이 작성할 수 있습니다. 

 

li {
 margin-bottom: 10px;
}

li:last-child {
 margin-bottom: 0;
}

 

가상 선택자 :last-child로 마지막 리스트를 특정해준 뒤 해당 리스트에 마진을 0으로 변경을 해주는 방식입니다.  

 

그럼 기존 스타일을 덮어 씌우지 않는 enabling 패턴도 한번 살펴보겠습니다.

 

li:not(:last-child) {
margin-bottom: 10px;
}

 

마찬가지로 마지막 리스트 요소에만 마진 10이 들어가지 않지만 해당 방식으로 작성을 하면 기존의 스타일을 덮어씌우지 않고 처음부터 필요한 부분에만 적용이 됩니다. 해당 작성법은 하나의 예시일 뿐이고 인접 형제 연산자(+)등을 사용하는 방법 등 여러 가지 enabling 패턴이 존재하기 때문에 입맛에 맞게 사용하시기를 바랍니다.

 

물론 해당 패턴을 사용한다고 해서 눈에 보일 정도로 성능이 좋아지진 않겠지만 공책에 글을 빽빽이 적고 지우고 다시 쓰는 것보다는 가능하다면 처음부터 잘 정돈하여 적어 나아 가는 게 더 좋지 않을까요?

 

---

 

이상으로 필자가 여러 프로젝트를 진행하면서 직접 경험했던 내용을 토대로 HTML과 CSS 작성 시 주의할 점을 몇 가지 나열해보았습니다. 이미 다 알고 계시는 분들은 내가 좋은 HTML과 CSS를 작성하고 있구나 하는 정도의 체크리스트로 생각해주시고 몰랐다거나 알고는 있었지만 실천을 하지 못하신 분들은 지금부터라도 조금씩 좋은 습관을 형성해 나아가시기를 바랍니다. 그리고 이외에도 본인만의 좋은 팁들이 있다면 댓글로 공유해주시면 감사하겠습니다.

 

 

출처: Enabling Pattern