CSS란?

CSS란?

• Cascading Style Sheets의 약자
• 웹 페이지의 디자인과 레이아웃을 담당
• HTML이 웹 페이지의 구조를 결정한다면 CSS는 그렇게 정해진 구조에 스타일(색상, 폰트 크기, 여백, 정렬 등)을 적용하는 역할

등장배경

• 원시 웹 페이지는 HTML 하나로만 구성되었다.
• 이것들도 나름의 스타일을 적용하기 위해 아래와 같이 인라인으로 스타일을 지정했다.

<font color="red" size="4">안녕하세요!</font>
<center><h1>제목입니다</h1></center>

• 문제는 이러한 방식은 웹 페이지가 복잡해지면 코드가 너무 복잡해진다는 단점이 있었음.
• 메인 컨텐츠와 디자인이 뒤섞여 있다 보니 유지보수에도 어려움이 있었음.
• 또한 웹 브라우저를 볼 수 있는 다양한 기기가 등장함에 따라 크로스 브라우징이 필요했는데 위 방식으로는 불가능했음.
• 그러다 CSS는 1996년 W3C (World Wide Web Consortium)에서 공식 표준으로 발표됨.

발전과정

• 최초 CSS1은 기본 스타일을 지정하는 정도로만 기능을 제공함.
  • 글꼴 등의 기본 스타일 지정
  • 박스 모델 개념 도입 (margin, padding, border)
  • 클래스 및 선택자 ID 도입
  • 텍스트 속성 지원 (letter-spacing, word-spacing)

body {
  font-family: Arial, sans-serif;
  background-color: lightgray;
}
h1 {
  color: blue;
}

• 분명 이전 HTML로만 스타일링 하던 때보단 나은 환경을 제공했지만 레이아웃을 만드는 기능이 여전히 부족하여, HTML에서 레이아웃을 만들 때 <table> 태그 등을 계속 이용하는 등 코드의 복잠함은 여전했다.
• 그리고 2년 만인 1998년 CSS2가 등장함.
  • 포지셔닝(position) 속성 도입(absolute, relative, fixed)
  • 미디어 유형 도입 (화면, 프린트 등)
  • Z-index (레이어 개념)
  • 플로트(float) 및 클리어(clear) 추가 (레이아웃 디자인 기능
• CSS2를 통해 본격적인 레이아웃 작업과 디자인이 가능해졌지만 여전히 다양한 기기에 호환되는 페이지를 디자인하는 크로스 브라우징은 어려웠다.
• 이후 .n 버전의 업데이트를 거듭하다 현재 우리가 사용하는 CSS3 버전이 2011년 등장함.
  • 반응형 웹 디자인 도입 (RWD)
    • @media 쿼리
    • flex와 grid 시스템
    • 애니메이션과 트랜지션
    • 그림자 효과
    • 더 다양해진 색상 표현 (rgba, hsl, opacity)
    • 웹 폰트 지원 (@font-face)
    • 다중 배경 및 그라디언트
• 그리고 2020년 이후로는 CSS4라는 버전이 새로 업그레이드 되진 않았지만 CSS3에 추가적인 기능이 하나씩 더해지면서 현재까지 모던 웹을 CSS3이 지배하고 있다.
  • CSS Variables
  • 스크롤 애니메이션
  • 새로운 레이아웃 시스템 (CSS Grid, Subgrid)

CSS를 배워야 하는 이유

웹 페이지의 기본 구성 요소

웹 페이지는 HTML+ CSS + JavaScript의 조합으로 이루어진다.

 

이 중에서 HTML은 필수고, CSS와 JavaScript는 선택적이지만, 만약 CSS가 빠지게 된다면 사용자는 정리되지 않은 딱딱한 문서만 보게 된다.

 

CSS를 JS로 대체할 수 있는데, CSS로 해결하면 간단하게 작성될 것을 JS로 구현하게 되면 불필요한 코드가 많아지고 성능이 저하된다. 아래는 CSS와 JS로 같은 효과를 낸 것이다.

// CSS
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

// JS
const container = document.querySelector('.container');
container.style.display = 'flex';
container.style.justifyContent = 'center';
container.style.alignItems = 'center';

즉 JS로도 CSS를 어느정도 대체할 순 있지만 코드가 복잡해지고 성능이 저하된다. 또한 JS는 웹 페이지의 기능을 담당하는 코드인데 스타일링 코드가 너무 많이 들어가면 유지보수도 어렵게 된다.

 

반응형 디자인 구현 용이

위와 마찬가지로 JS로도 반응형 디자인을 구현할 순 있지만 역시 코드가 복잡해진다.

// CSS @media Query
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

// JS
window.addEventListener('resize', function() {
    if (window.innerWidth < 768) {
        container.style.flexDirection = 'column';
    }
});

 

유지보수 용이

HTML은 문서의 뼈대, CSS는 문서의 스타일, JS는 문서의 기능적인 부분을 담당한다.

모든 웹 개발자는 이를 따르고 있는데, JS로 CSS를 대체하게 되면 이 구분이 모호해지고 스타일 유지보수를 위해 개발자들이 JS 코드를 모두 읽어야 하는 불편함이 따르게 되고 유지보수를 어렵게 만든다.

 

JS로 대체 불가능한 부분 존재

위에서는 JS로 CSS를 대체하는 부분에 대해서 보여줬지만, 대체가 불가능한 부분도 있다. 트랜지션과 애니메이션이 대표적이다. JS로 비슷하게 구현할 순 있겠지만 CSS의 애니메이션은 GPU 가속이 가능하기 때문에 성능이 뛰어나다.

.button {
    background-color: blue;
    transition: background-color 0.3s ease-in-out;
}

.button:hover {
    background-color: red;
}

 

복잡한 레이아웃 구성 가능

CSS의 flex와 gird를 사용하면 웹 페이지가 아무리 복잡한 구성을 하고 있다 하더라도 비교적 간단하게 구현이 가능하다. 하지만 이를 JS로 대체하려고 하면 코드가 굉장히 복잡해지고 비효율적이게 된다.

 

CSS와 JS의 역할을 구분지어 함께 사용하면 최고의 시너지 발휘

CSS로는 스타일링만 하고, JS는 이를 보조하는 수단으로 활용했을 때 최고의 시너지가 발생한다.

아래의 예시는 CSS로 스타일링을 하고 JS로 선택자 ID를 변경해서 스타일링을 적용하거나 제거하는 코드이다.

// CSS
.hidden {
    display: none;
}

// JS
document.querySelector('.menu').classList.toggle('hidden');

 

CSS Framework도 결국 CSS를 알야아 제대로 사용 가능

모던 웹 페이지를 배우는 초심자에게 가장 도움이 되면서도 학습에 지장이 되는 문제가 되는 부분인데, Bootstrap이나 Tailwind CSS, Material UI 와 같은 CSS 프레임워크가 실무 현장에서 많이 사용되다 보니 간편하게 스타일링을 할 수 있어 웹 개발 초심자에게 CSS 학습의 중요성이 낮게 인식되기도 한다.

하지만 이들을 심화해서 사용해보면 테일윈드는 flex, grid, gap의 개념을 제대로 이해하지 못하면 그 기능을 제대로 활용할 수 없고, 부트스트랩도 미리 스타일을 만들어두었지만 내 웹 페이지에 맞게 조정하려면 결국 CSS를 이해해야 한다. Material UI도 마찬가지다.