나쁜 CSS 습관들
퍼블리싱 작업을 힘들게 만드는 레거시 CSS 코드를 작성하는 법
1. 와일드카드 꽉 채우기
와일드카드(*) 선택자는 모든 엘리먼트에 영향을 줍니다. 한 두 줄 정도를 담는건 괜찮겠지만 많은 스타일을 넣어선 안됩니다.
와일드카드 선택자는 HTML 엘리먼트에 따라 연산이 더더더 많아집니다. 또한 개발하면서 생기는 CSS 이슈들로 인해서 결국 지우는 경우가 많습니다.
- 왠만하면 와일드카드 쓰지 마세요.
- 라이브러리 쓰면 더더욱 쓸 필요가 없습니다.
2. h1,h2,h3,h4 ...
제목 엘리먼트(Heading element)를 묶어서 스타일링하는 경우가 있습니다. 엘리먼트 선택자에 대한 개별 CSS는 적용하는 경우가 많지만 이렇게 묶어서 CSS를 부여하는 것은 특별한 기능없이 귀찮게 하는 경우가 자주 생깁니다. 특히 라이브러리를 도입하거나, 새로운 컴포넌트를 생성할 때마다 묶음으로 잡힌 스타일 때문에 추가로 스타일링 하는 경우가 생깁니다. 그럼 전역 엘리먼트 속성에 영향 받는 모든 엘리먼트는 다 수정해줘야 하는 끔찍한 일이 펼쳐집니다.
- 공통된 스타일을 주고 싶으면 Class를 사용해주세요.
- h1,h2,h3 형태로 써야한다면 그 안에 !important는 절대 쓰지 마세요.
- 더 나은 방법이 있을겁니다. 정말로.
3. HTML 기본 속성 무시하기
많은 웹사이트에서 태그를 잘못 사용하는 경우를 발견할 수 있습니다. 특히 span 태그는 빈번하게 잘못 사용되는 엘리먼트입니다. span은 기본적으로 인라인 속성을 가지기 때문에 width와 height를 부여해도 값이 설정되지 않습니다. 텍스트에 일부분을 선택할 때 사용해야하는 태그임에도 display: block;을 굳이 부여해서 width와 height를 넣고 사용하는 모습을 보여줍니다.
- <span>은 텍스트에만 사용해주세요.
- <li>는 <ul>,<ol>안에 넣어 사용해주세요.
- <main>은 페이지 당 한 번 이하로 사용해주세요.
- HTML 태그 기본 속성을 지우면서 쓰지 말아주세요.
4. 마음대로 해딩 엘리먼트 숫자 넣기
제목 엘리먼트는 잘 설계된 웹사이트를 구별해줍니다. 제목 엘리먼트는 텍스트의 중요도를 나타내고, 디자인을 쉽게 만들어주며, 웹사이트 전체에 일관성을 줄 수 있습니다. 또한 검색엔진은 H1, H2의 중요도를 다르게 판단하고 텍스트를 처리합니다.
- 핵심이 되는 메시지는 h1, h2에 넣어주세요.
- h1, h2에 대한 스타일을 페이지 별로 변화를 주기보단 통일해주세요.
- Heading element의 margin이나 padding을 변화해야하는 상황에선 클래스를 추가해서 관리해주세요.
5. 라이브러리 사용 안하기
라이브러리를 사용하지 않고 서비스를 만드는건 특별한 이유가 있지 않는 한 멍청한 행동입니다. 단정적으로 말하자면 정말 멍청한 일입니다. UI 라이브러리는 생산성을 몇 배는 향상시켜주며, 스타일에 통일성을 주고, 귀찮은 일들을 대신해줍니다. 또한 모바일 최적화가 된 라이브러리가 대부분입니다. 이런 혜택을 다 거부하고 라이브러리를 안 쓴다면 그에 합당한 이유가 있어야 합니다.
저는 Bulma를 즐겨 사용합니다.- 라이브러리를 사용해주세요.
- UI 라이브러리가 싫으면 애니메이션 라이브러리라도 가져와서 쓰세요.
- 슬라이더, 아코디언, 체크박스, 인풋, 네비게이션바 등을 모두 모바일 최적화와 스타일링을 넣어 만들 생각마시고 그냥 라이브러리 쓰세요.
6. <img>에 직접 폭 적용하기
img 태그는 기본적으로 이미지의 크기에 따라 폭이 변경됩니다. 그렇기 때문에 width를 강제로 정해서 쓰는 경우가 많습니다. 대부분의 경우 이는 큰 문제가 되지 않지만 화면 크기 변화에 따라 사이즈가 바뀌어야 할 때 빈 공간을 만들 수 있습니다. 가장 좋은 방법은 img 태그를 figure 태그 등으로 감싸고, figure 태그의 사이즈에 따라 img 태그가 반응하도록 디자인하는 것입니다.
위의 코드도 좀 더 활용해보자면 is-128x128과 같은 클래스를 부여해서 크기를 관리하면 모든 이미지에 통일성을 줄 뿐 아니라 크기 관리에도 용의합니다.
두번째 방법은 img 태그를 사용하지 않고, div에 background-image 속성을 사용하는 방법입니다.
이 방법을 사용하게 되면 이미지를 담고 있는 상자의 크기에 따라 유동적으로 바뀔 수 있고, 강제 폭을 정함에서 발생하는 빈 공간도 발생하지 않습니다. 이 방법의 장점이라면 이미지 안에 텍스트가 들어가야할 때 편리합니다. (주의: background-attachment 등의 속성은 상황에 따라 다르게 넣는게 중요합니다. 일반적으론 fixed를 많이 사용하지만, 모바일 최적화 이슈와 관련된 문제도 있으니 적용하실 때 테스트를 꼭 해보세요!)
7. !important 즐겨쓰기
CSS 우선 선택자 규칙을 다 무시해버리는 !important는 최후의 수단이자 금지로 불리곤 합니다. !important는 세가지 특징이 있습니다.
- !important 밖에 답이 없는 상황이라면 아직까지 만든게 잘못 만든거다.
- !important를 쓰기 시작하면 계속 써야한다.
- !important는 결국 다른 !important랑 충돌하게 될 것이다..
8. :before, :after 사용 안하기
:before, :after는 정말 강력한 친구입니다. 개인적으로 초보와 중수를 나누는 분기점이 가상 선택자라 생각합니다. :before은 제목 엘리먼트에 포인트를 주거나, 반복적으로 사용하는 텍스트, 스타일링에 드라마틱한 효과를 줄 수 있습니다. 또한 엄청난 생산성도 줄 수 있습니다.
- hover로 텍스트 박스를 띄워야 하는 경우 가상선택자가 좋습니다.
- 제목 엘리먼트 앞에 #이나 * 같은 표시를 넣을 때도 좋습니다.
- 멋없는 input, label 스타일링에 사용합니다.
9. Flex 안쓰기
이건 프론트 개발이 약한 개발자들에게서 흔히 나타나는 증상입니다. Flex라는 강력한 도구를 놔두고, inline-block으로 애쓰는 모습을 보면 안타깝습니다. Flex는 다양한 화면에 대응하기 쉽게 만들어주고, 정렬 방향을 관리하고, 중앙을 맞추고, 컨텐츠를 유동적으로 움직이게 해줍니다. 또한 리액트 네이티브 등에선 display 속성이 none과 flex 밖에 없습니다. flex는 이제 기본입니다.
이래도 inline-block 쓰시렵니까?- Flex는 이제 필수입니다.
10. Grid 모르기
Grid 레이아웃은 어려워보이지만 규칙만 알면 강력한 도구가 됩니다. 특히 각각의 컴포넌트가 그리드 안에서 정해진 크기를 가지고 변화해야할 때 매우 강력합니다.
위와 같이 격자 내에 공간을 차지하는 비중이 바뀌어야 할 때, 그리고 그 안에서 애니메이션 효과를 줄 때는 그리드만이 유일한 해답일 수 있습니다. 물론 위와 같은 디자인은 모든 웹사이트에서 사용되는 스타일은 아닙니다. 컨텐츠가 많고, 섹션 분리가 많은 패션 분야나 미디어 분야에서 많이 활용됩니다. 자신의 웹사이트에 많은 컨텐츠를 입체감있게 표현하고자 한다면 그리드를 추천합니다.
- 그리드 기본 규칙을 익혀보세요.
- 1시간이면 충분할겁니다.
11. 인터렉션 효과 안쓰기
놀랍게도 거의 모든 사이트에서 아주 단순한 인터렉션 효과도 사용하지 않습니다. 물론 인터렉션이 반드시 필요한건 아닙니다. 네이버, 페이스북, 다음 등 컨텐츠로 꽉찬 사이트가 인터렉션 효과까지 있으면 복잡하고 부담스러울 겁니다. 하지만 크기가 작고, 컨텐츠가 적고, 드라마틱한 효과가 필요한 경우엔 필수입니다.
- 차트를 보여줄 때 인터렉션 효과를 넣으세요.
- 의미있는 숫자를 보여줄 때 그냥 보여주지 말고 효과를 넣어주세요.
- 이미지 하나를 보여주더라도 페이드되면서 나타나는것과 그냥 있는 것과는 차이가 있습니다.
12. 전처리도구 안쓰기
이제 CSS만 쓰는 경우는 드뭅니다. SASS, SCSS, Less, Stylus 중 하나는 기본이 된 시대입니다. 특히 SCSS는 기본 문법이 CSS와 거의 똑같고, 학습에도 크게 어려움이 없습니다.
- SCSS(SASS) 사용하세요.
- 다른 전처리 도구도 문법정도는 배워보세요.
제 다른 글들도 마찬가지지만 위의 이야기는 모두 제 경험했던 일들입니다. 와일드카드에 스타일을 넣고, 불필요한 전역 스타일을 넣었고, span을 block 용도로 사용했고, 전처리 도구를 사용하지 않았습니다. 결국 많은 노력을 넣어도 형편없는 결과를 만들게 됩니다.
좋은 웹사이트는 통일성, 디자인 패턴, 컬러셋 등에서 규칙성을 보입니다. 이는 사용자가 웹사이트를 이해하기 쉽게 만들어주고, 높은 완성도를 느끼게 만들어줍니다.
위의 가이드라인은 쉽게 완성도 높은 웹사이트를 설계하는데 필수적인 사항입니다. 아무리 삽질하면서 배우는게 코딩이라지만 제가 했던 바보짓을 따라할 필요는 없습니다. 저처럼 자기가 쓴 코드로 인해 시간을 낭비하지 마시고, 좋은 도구들을 활용해 더 편하고, 빠르게 완성해보세요.
웹 개발, 블록체인 컨트렉트 개발 문의: https://flexweb.io
