초보 웹개발자의 필수 CSS 작성 규칙 TOP 10

HTML&CSS

초보 웹개발자의 필수 CSS 작성 규칙 TOP 10

apost 2022. 2. 7. 07:21

1. CSS Reset은 필수다.

가장 중요하기 때문에 1번입니다.

CSS 리셋을 하는 방법은 여러 가지가 있습니다. 용도에 따라 자신만의 CSS 리셋을 만들어 쓰기도 하지만, 기본적으로 CSS 리셋은 더 최적화되고 적은 CSS 속성을 작성할 수 있도록 도움을 주는 가장 기본적인 CSS 코드 작성입니다.

CSS 리셋은 브라우저간의 기본 속성 차이로 인해 발생하는 CSS 호환성 문제를 줄여주고, 단일 CSS 코드만으로 모든 브라우저에 같은 UI를 표시하는데 도움을 줍니다.

최근에는 브라우저간의 호환성 문제가 줄어들면서 이런 CSS 리셋의 중요도가 다소 불필요하게 보일 수도 있지만, 남용하지만 않으면 여전히 고전적이면서도 뛰어난 CSS 기법 중 하나입니다.

* { 
    margin:0; 
    padding:0; 
}
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
ol, ul {
    list-style: none;
}

인터넷 익스플로러와 같은 레거시 웹 브라우저에 대한 호환성을 유지하면서 최신 CSS 기술을 적용하는 것은 CSS 리셋만으로는 불가능합니다. 이럴때는 Normalize.css를 사용하는 것을 추천합니다.

Normalize.css 는 다양한 웹브라우저에서 최신 CSS 기술과 속성들이 가능한 최대의 호환성을 유지할 수 있도록 해주는 CSS 리셋 코드입니다. Chrome, Edge, Firefox ESR+, IE 10+, Safari 8+, Opera를 지원합니다.

https://necolas.github.io/normalize.css/

Normalize.css: Make browsers render all elements more consistently.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

necolas.github.io

더 자세한 내용은 다음 글을 보면 도움이 됩니다.

> CSS 작성 초기화(Reset) 방법

2. 단축 CSS 속성 표현을 사용해라

CSS 속성중에는 하나의 속성에 대해서 여러 개의 속성 값을 통해 표현을 하는 경우가 빈번합니다.

예를 들어 요소의 배경에는 배경색, 배경 이미지, 배경 이미지 반복, 배경 이미지 위치와 같은 다양한 속성들이 있고 이 속성들을 각각의 속성 이름으로 정의합니다.

그리고 이런 속성들은 대부분 단축 속성 표현이라고 하는 하나의 속성 이름으로 여러 개의 속성 값을 표현하는 수단을 추가로 제공합니다.

/* 단축 속성 없이 개별 속성 표기 */
.parent {
    background-image: url(imageurl);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* 단축 속성 표기 */
.container {
    background: url(imageurl) no-repeat center cover;
}

단축 속성 표현을 가장 빈번하게 사용하는 것은 padding, margin, font, background, border, list 속성입니다.

이 두 속성은 4방향의 여백을 속성 이름으로 각각 표현(left, right, top, bottom)할 수 있지만, 하나의 속성 이름으로 줄여서 표현하는 것이 기본입니다.

단축 속성 표현은 속성을 여러 개 나열해서 표기하는 번거로움을 줄여주어 코드량을 획기적으로 줄여주기도 하지만, 불필요한 CSS 상속으로 인한 부작용을 줄여주는 역할도 하기 때문에 예외적인 경우를 제외하고는 단축 속성 표현을 기본으로 사용하는 것을 권장합니다.

3. !important는 기본적으로 사용 금지다.

특히 여러명이 공동으로 코드를 작성할 때나, 범용으로 공개를 하는 CSS에서는 기본적으로 사용하지 않는다는 생각을 가지고 CSS 코드를 작성해야 합니다.

!important는 CSS 속성을 상수로 고정하기 때문에 CSS 클래스 속성의 일부를 재정의 하거나 재활용하기 어렵게 만드는 거의 유일한 CSS의 추가 속성입니다.

!important를 사용하는 클래스는 되도록이면 한 군데 모아서 별도로 정의해 사용함으로써 항상 !important 로 인해 어떤 제약이 생겼는지를 쉽게 알 수 있도록 해야 합니다.

!important를 자주 사용하거나, !important가 없으면 제대로 동작하는 CSS 작성이 안된다면, 분명히 잘못된 CSS 작성 습관을 가지고 있는 것입니다.

.wrap{
	background-color: #f8f8f8 !important;
}
/* 배경색이 #f8f8f8로 고정되어 변경되지 않음 */
.wrap.bg-red{
	background-color: #f00;
}

4. ID는 최소한으로만 사용해야 한다.

ID는 HTML 에서 요소를 식별하는 가장 짧고, 명확하며, 빠른 수단입니다.

또한 CSS 에서 ID는 최우선순위를 가지는 선택자이기 때문에 속성 중첩에 따른 상속과 혼동을 피할 수도 있고 요소를 유니크하게 식별할 수 있기 때문에 CSS 선택자도 짧아지는 장점이 있습니다.

단, ID를 남발하게 되면 CSS가 지옥으로 가게 됩니다.

ID는 IDentifier, 그러니까 유일한 식별자여야 합니다. HTML 페이지가 짧다면 ID를 사용하는 것이 큰 문제가 되지 않겠지만, ID가 많아지면 ID로 식별하는 HTML 요소의 이름을 정하는 것만으로도 골머리를 앓게 됩니다.

그리고, 각 ID별 CSS를 작성하는 것도 더 힘들어지고, CSS가 재사용이 안될 뿐만 아니라 일부만 재정의할 수도 없기 때문에 CSS 코드량도 더 늘어나게 됩니다.

ID를 사용할 때는 큰 영역들을 구분하는 식별자로, 또는 HTML 페이지 안에서 유일하게 존재하고, 또 사용되는 특정한 용도를 가진 요소에만 제한적으로 사용해야 합니다.

#wrap {
}
.wrap {
}

5. 대체 글꼴을 항상 제공해라.

기본 중의 기본입니다.

사용하려는 글꼴이 시스템에 존재하지 않을 때, 또는 링크한 웹 글꼴이 접근이 안될 때 최종적으로 어떤 종류의 글꼴을 사용해야 하는지 명시를 해야 합니다.

세리프(serif)는 글꼴의 삐침이 있는 글꼴을 통칭하는 대표 글꼴 이름입니다. 모든 웹 브라우저에서 인식하는 내장 글꼴명이며, 글꼴 이름을 "serif"로만 명시하면 세리프, 그러니까 삐침이 있는 글꼴 중에서 시스템에서(또는 웹 브라우저에서) 사용 가능한 첫 번째 세리프 타입인 글꼴을 가져와 적용하게 됩니다.

반대로 삐침이 없는 글꼴 계열은 "sans-serif", 그러니까 산세리프 글꼴이 됩니다. 라틴어로 "sans"는 "없는"이라는 뜻입니다.

대표적인 산세리프 글꼴은 고딕체, 돋움체, 나눔 고딕과 같은 고딕 계열 글꼴입니다.

대체 글꼴을 제공하는 시스템 기본 글꼴을 사용하는 CSS 글꼴 사용 정의는 다음과 같습니다.

p {
  font-family: "Noto Sans KR",-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",
  helvetica,"Apple SD Gothic Neo",sans-serif;
}

이외에도 여러가지 대체 글꼴 포함 방법이 있지만, 마지막에는 "serif", 또는 "sans-serif" 글꼴을 표시해서 같은 계열의 근접한 글꼴이 사용되도록 명시를 해야 합니다.

6. 불필요하게 깊은 CSS 선택자 사용은 피해라.

CSS 선택자를 사용해 HTML 페이지의 대상 요소를 선택하는 일정한 규칙이 있는 것은 아닙니다.

앞서의 규칙처럼 최소한의 ID를 사용하고, 나머지 대부분의 CSS 속성은 클래스(Class)를 사용해서 정의하게 됩니다.

여러 단계로 중첩된 요소들에서 특정 요소를 정확하게 선택하는 것은 언제나 중요합니다.

그러나, 정확한 대상을 선택한다고 너무 많은 태그, 클래스를 사용해서 대상을 한정하는 것은 CSS 선택자를 복잡하게 할 뿐만 아니라, 유지보수하기도 어렵게 합니다.

예를 들어 다음의 CSS 선택자는 결국 ".box" 클래스를 가지는 요소에 텍스트 색상을 정하는 것입니다.

굳이 article, p 태그로 대상을 한정할 필요도 없고, ".main" 클래스 하위로 제한할 필요도 없습니다.

".box" 클래스를 가진 요소는 텍스트 색상을 지정하는 단순한 클래스 하나면 됩니다.

클래스를 작성할 때는 범용으로 공통 사용하는 클래스를 최소한으로 해서 작성하고, 영역별, 또는 용도에 따라 한정하는 좀 더 구제적인 CSS 선택자를 정의하는 것이 좋습니다.

굳이 필요 없는 선택자를 추가로 만들 필요는 없습니다.

그리고, 클래스 이름을 정할 때도 범용으로 최대한 단순하게 정하는 것이 좋습니다.

main.content div.box {
    color: #555;
}
.box {
    color: #555;
}
.content .box {
	color: #333;
}

CSS 클래스 우선 순위에 대한 내용은 다음 글을 보면 도움이 됩니다.

> CSS 적용 우선순위를 결정하는 특이도(Specificity)의 이해

7. 상대 유닛으로 크기 값을 사용해라.

잘못된 CSS 학습으로 인해 초보 개발자들이 가장 안 지키는 CSS 작성 방법 중의 하나입니다.

반응형 웹과 멀티 디바이스, 또는 모바일 디바이스 비중이 급격히 높아지면서, 디바이스별로 다양한 크기로 보이는 웹 콘텐츠에 대한 대응을 하는 것이 필수가 되었습니다.

조상 대대로 사용해왔던 "px" 단위는 픽셀의 크기가 대상 기기에 따라서 천차 만별이기 때문에 그 크기가 기기에 따라 모두 다르게 보입니다.

점점 많아지는 고해상도 모바일기기에서는 특히 px 단위로 정한 콘텐츠 크기는 너무 작게 보일 가능성이 있습니다.

물론 헤더 정보를 이용해 컨텐츠를 표시하는 대상 브라우저에 따라 자동으로 배율을 조정해서 표시하기도 하지만 어디까지나 임시방편이고, 근본적으로 대상 기기, 또는 화면 해상도에 무관하게 일정하게 콘텐츠가 표시되도록 상대적인 크기 단위를 사용해서 CSS를 작성하는 것이 기본적인 CSS 작성 방법입니다.

반응형 디자인, 또는 모바일 기기를 지원하는 CSS 작성은 이제 필수입니다.

em, rem, %, vw/vh와 같은 상대 크기 유닛을 사용해야 대상 기기의 화면 밀도, 또는 대상 기기에 무관하게 비교적 일정한 크기로 컨텐츠를 표시할 수 있고 가독성도 높일 수 있습니다.

body {
    font-size: 62.5%;
}
.block {
	padding: 1em;
    box-sizing: border-box;
}
p {
    font-size: 1.5em;
}
p.big {
	font-size: 3em;
}
p:first-letter {
    font-size: 3em;
}

em, rem 상대 유닛의 기본 개념과 사용법에 대한 내용은 다음 글을 보면 도움이 됩니다.

> CSS - 반응형 웹 텍스트의 핵심 em과 rem 을 이해하자

8. 반복되는 CSS를 최대한 줄여라.

CSS는 특성상 반복되는 속성과 클래스 코드들이 많이 발생합니다.

실력 있는 개발자일수록 반복되는 코드들을 효율적으로 줄여서 코딩을 할 줄 압니다.

실력 있는 개발자가 작성한 CSS와 초보 개발자가 작성한 CSS는 2배 이상 코드 양이 차이가 나기도 합니다.

효율적으로 작성한 CSS와 그렇지 않은 CSS는 유지보수를 하는 시간과 노력에서 더 많은 차이가 나게 됩니다.

변수와 미디어쿼리는 반복되는 CSS 코드를 줄이는데 많은 도움을 주며, 유지보수 효율에서도 많은 차이가 나게 됩니다.

인터넷 익스플로러와 같은 구형 웹브라우저와의 호환성 문제에서 자유롭다면 CSS 유지보수를 꽤 편하게 할 수 있습니다.

예를 들어 다음과 같은 변수와 미디어쿼리 사용에 익숙해져야 합니다.

:root {
  --primary-color: #a00;
  --secondary-color: #a40;
  --padding: 30px;
  --gutter: 5px;
}

.container{
  margin: var(--gutter);
}

@media (min-width: 768px) {
  :root {
    --padding: 15px;
    --gutter: 4px;
  }
}

9. 16진수 컬러값(#FFFFFF), 또는 RGB() 컬러를 사용해라.

컬러 이름으로 컬러 값을 사용하는 것은 피해야 합니다.

컬러 이름이 비록 사람이 더 쉽게 알아볼 수 있는 문자열 컬러 값이기 때문에 초보자에게는 가독성면에서 조금 더 유리할지 모르겠지만, 정말 애매한 모호함을 만들어내고 지극히 주관적인 컬러를 만들어내기 때문에 프로페셔널이 되려고 한다면 절대 사용해서는 안됩니다.

예를 들어 lightgray는 밝은 회색이라는 컬러입니다.

대부분이 옅은 회색이라는 감은 있지만, 정확하게 이 컬러가 어떤 컬러 값을 가지는 컬러인지는 모릅니다.

사람에 따라서는 웹 브라우저에 표시되는 lightgray가 그리 밝지 않은 회색이라고 느낄 수도 있습니다.

밝은 회색이라는 컬러는 사람에 따라 그 기준이 모두 다르며, 브라우저에 따라서도 다를 수 있습니다.(실제로 다른 경우는 거의 없고 대부분 비슷한 컬러 값을 사용하지만, lightgray 컬러에 대한 확실히 정해진 웹 표준 값이 있는 것도 아닙니다.)

그래서 이런 모호함이 발생하지 않도록 16진수 컬러값인 #F0F0F0이나 RGB(248,248,248)과 같은 명시적인 절대 숫자 표현으로 명확한 컬러 값을 표현해야 합니다.

.box{
	background-color: lightgray;
}
.box{
	backgrond-color: #f0f0f0;
}

10. 코멘트와 목차는 꼭 작성해라. 필요한 부분에만...

CSS는 생각보다 그 양이 빠르게 늘어나는 특징이 있습니다.

특히 반응형 디자인을 위한 미디어쿼리가 추가되면서 CSS 파일의 길이가 몇 천행이 되는 것쯤은 기본이 되었습니다.

CSS 길이가 길어지면서 CSS 클래스 이름만으로는 원하는 위치를 찾기가 쉽지 않습니다.

오랫동안 유지 관리한 CSS라면 클래스 이름이나 속성 값 등으로 원하는 위치를 차기 어렵지 않겠지만, 그렇지 않다면 그 수많은 클래스 이름을 기준으로 원하는 CSS 위치를 찾는 것은 생각만큼 쉽지 않습니다.

그리고 공개적으로 배포하는 CSS라면 해당 CSS를 처음 열어보는 개발자가 클래스 이름 같은 것은 알리가 없습니다.

그래서 CSS에 코멘트를 반드시 달아야 합니다.

꼭 클래스마다 주석을 달 필요는 없지만, 기능 단위로, 또는 화면 블록 단위로 구분을 할 수 있도록 코멘트는 꼭 달아야 합니다.

그리고 최상위에 간단한 목차정도는 표기를 해주는 것이 좋습니다.

CSS의 전체 구조를 한눈에 파악할 수 있기 때문에 매우 매우 도움이 됩니다.

/*
CSS CONTENTS:

01. Reset
02. Layout
03. Fonts
04. Category
*/

...
/* Reset */
...
/* Layout */
...
/* Fonts */
...
/* Category */
...

저작자표시 비영리 변경금지