HTML/CSS 에센셜 | 위니북스

CSS 기본

1. CSS란?

CSS는 우리가 작성한 HTML의 스타일과 레이아웃 등을 꾸미는 언어입니다. HTML과 마찬가지로 프로그래밍 언어는 아니지만 웹 개발에서 스타일을 나타내는 중요한 역할을 하는 언어입니다. 예를 들어, 텍스트의 색을 바꾸거나, 사이드바를 왼쪽에 배치하는 등 HTML 문서를 시각적으로 꾸미는 역할을 합니다.

1.1 CSS 등장 배경

1990년대 초반, 월드 와이드 웹(World Wide Web)은 폭발적으로 성장하고 있었습니다. 웹 페이지는 HTML(하이퍼텍스트 마크업 언어)을 사용하여 작성되었고, 이는 문서의 구조를 정의하는 데 사용되었습니다. 초기의 HTML은 본래 텍스트와 링크를 표시하기 위한 간단한 도구였으며, 스타일링 및 레이아웃 기능이 거의 없었습니다. 심지어 이미지조차 별도의 페이지에서 보여주는 식이었습니다.

웹 페이지의 외관을 조절하기 위해 개발자들은 HTML 태그 내에 직접 스타일 속성을 삽입하거나, 스타일을 표현하는 태그를 사용하거나, 복잡한 테이블 레이아웃을 사용해야 했습니다. 이러한 방식은 코드가 복잡해지고 유지보수가 어려워지는 문제를 야기했습니다.

이러한 문제를 해결하기 위해, 1994년 W3C(World Wide Web Consortium)의 구성원이었던 하콘 비움 리(Håkon Wium Lie)는 스타일 시트의 개념을 제안했습니다. 그는 HTML 문서의 구조와 스타일을 분리함으로써, 문서의 일관성과 유지보수성을 높일 수 있다고 생각했습니다. 그의 제안은 1996년 12월에 W3C에 의해 최초의 CSS(Cascading Style Sheets) 표준으로 공식화되었습니다.

구조와 스타일의 분리: HTML 문서는 콘텐츠와 구조를 정의하고, CSS는 스타일과 레이아웃을 정의합니다. 이를 통해 문서의 구조적 의미가 명확해지고, 스타일을 변경할 때 HTML 코드를 수정할 필요가 없어집니다.
일관된 디자인 유지: CSS를 사용하면 여러 페이지에 동일한 스타일을 쉽게 적용할 수 있습니다. 이는 웹사이트 전체에서 일관된 디자인을 유지하는 데 도움이 됩니다.
재사용성 및 효율성 향상: 스타일 시트를 한 번 작성하면 여러 문서에서 재사용할 수 있습니다. 이는 개발 시간을 단축시키고 코드의 중복을 줄입니다.

1.2 CSS의 의미

CSS는 Cascading Style Sheets의 약자입니다. 이는 Cascading한 속성을 가진 스타일 문서임을 나타냅니다. 그렇다면 Cascading은 어떤 의미를 가지고 있을까요? Cascading은 연속적인 이라는 뜻을 가지며 cascade는 폭포를 의미합니다.

CSS에서 스타일이 적용될 때, 우선순위를 가지고 적용됩니다. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Casacading이라는 단어가 붙게 되었습니다.

이는 단지 스타일이 적용되는 순서를 의미하는 것이 아니라 CSS를 만든 철학이 함께 반영되어 있는 것입니다.

2. CSS 작성하기

2.1 기본 문법

header {
  color: royalblue;
}

header {
  color: royalblue;
}

CSS는 선택자(Selector), 속성(Property), 속성값(Property Value)의 세 가지 요소로 구성되어 있습니다. 위 이미지와 대응하여 아래 텍스트를 읽어보세요.

선택자(Selector) - 이 요소에

{ - 스타일 적용을 시작할게요

속성(Property) - 이 속성에

: - 대응 값은

속성값(Property Value) - 이 값으로 지정해주세요

세미콜론(;) - 해당 속성 선언(명령)을 끝낼게요

} 해당 요소에 대한 스타일 적용을 마칠게요.

이렇게 CSS를 작성할 수 있습니다. 속성은 하나의 선택자에 여러개를 작성할 수 있어요. 다음 코드 실행기에서 css 코드를 작성해서 스타일이 어떻게 적용되는지 확인해보세요.

2.2 CSS 속성

CSS는 초기 버전 CSS1에서 50여개의 속성으로 시작되었습니다. 이후로 CSS2, CSS2.1, CSS3처럼 버전별로 발전해왔습니다. CSS3 이후에는 새로운 버전을 추가하는 것이 아닌, 각 CSS의 모듈을 개별로 업데이트하며, 현재는 주기적으로 안정적인 CSS 기능들을 정의하는 스냅샷을 생성하고 있습니다.

현재는 약 350-400여개의 속성이 사용되고 있으며, 앞으로 여러 속성들이 추가될 수 있습니다.

CSS의 속성들

어떤 속성을 공부해야할까요?

CSS 속성이 너무 많아 무엇부터 공부해야 할지 모르겠다면 위니북스에서 작성된 순서대로 여러 속성들을 학습하고, 실무에서 자주 사용하는 속성 중 이해하지 못한 속성이 있는지 체크해나가는 것을 권장합니다.

다음 이미지는 마이크로소프트 사에서 진행한 CSS 속성 출연 빈도 통계치입니다. 현재는 더 이상 통계가 제공되고 있지 않기 때문에 첨부된 이미지를 참고해주세요.

또한 차세대나 비교적 최근에 업데이트된 CSS를 모아보는 것도 큰 공부가 됩니다.

Can I Use: CSS 속성의 브라우저 호환성 확인하기

Can I Use 웹사이트

CSS 속성이 모든 브라우저에서 동일하게 작동하지 않는다는 사실, 알고 계셨나요? 최신 CSS 속성은 일부 브라우저에서만 지원되거나, 브라우저마다 다르게 구현될 수 있습니다. Can I Use는 어떤 CSS 속성이 어떤, 브라우저에서 지원되는지 한눈에 확인할 수 있는 필수 도구입니다. 새로운 CSS 기능을 사용하기 전에 항상 Can I Use로 호환성을 체크하는 습관을 들이면, 크로스 브라우징 이슈를 미리 방지할 수 있습니다.

2.3 주석

CSS의 주석은 코드를 설명을 하여 이해하기 쉽게 하거나, 구획을 구분하거나, 임시로 코드를 비활성화할 때 사용합니다. 한 줄, 여러 줄 모두 /* */ 로 작성합니다. CSS 탭에서 주석되어 있는 부분을 풀어보세요.

3. 프론트엔드 개발자가 되기 위한 좋은 습관

보통 CSS를 공부하면 CSS 작성 후 저장하고 페이지를 새로고침하고, 마음에 조금 들지 않으면 다시 CSS를 수정하고, 저장하고, 페이지를 새로고침는 것을 반복하는 경향이 있습니다.

이러한 방식은 처음에 CSS를 배울 때에는 도움이 되지만 실무에서는 비효율적입니다. 이러한 반복 작업을 줄이기 위해 1. 좋은 예제를 찾고 2. 이를 분석하고 수정하며 체화하여 3. 머릿속에서 바로 렌더링(코드를 실행해보는) 할 수 있도록 하는 것이 좋습니다. 단순히 프로세스를 줄이는 것 뿐만 아니라 중복된 코드를 줄이고, 더 체계적인 코드를 짤 수 있게 됩니다.

처음에는 매우 어렵겠지만 빠르고 정확한 프론트엔드 전문가로 성장하기 위해서는 이러한 습관을 가지는 것을 권합니다.