CSS 소개

Juno

CSS 핸드북에 오신 걸 환영합니다! 저는 Juno이고, 웹에서 가르치는 걸 가장 좋아하는 분야가 바로 이거예요. HTML이 페이지의 구조를 만들어준다면, CSS는 거기에 생명을 불어넣는 부분이에요. 색상, 여백, 글자, 그리고 전체적인 모습까지 전부요.

CSS의 첫 줄부터 시작해서 하나씩 천천히 쌓아나갈 거예요. HTML을 조금이라도 쓸 수 있다면, 여기서 다루는 모든 내용을 배울 준비가 된 거예요.

아무리 기본적인 질문이라도 괜찮으니, 자신의 속도에 맞춰 나아가세요. 함께 끝까지 가봅시다!

Juno

CSS 핸드북에 오신 걸 환영합니다. 저는 Ace이고, 실용적인 걸 좋아해요. 이미 페이지 구조를 짤 수 있으니, 여기서는 그 구조를 실제로 배포할 만한 레이아웃으로 바꾸는 데 집중할 거예요.

각 챕터는 개념을 먼저 다루고, 그다음 그걸로 무엇을 할지 알려줍니다: 읽고, 시도하고, 만들어보세요. 레이아웃은 CSS가 더 이상 장식처럼 느껴지지 않고 엔지니어링처럼 느껴지기 시작하는 지점이고, 바로 그게 재미있는 부분이에요.

Juno

CSS 핸드북에 오신 걸 환영합니다. 저는 Sol이고, 페이지를 스타일링하면서 안 해본 실수가 없을 만큼 오래 이 일을 해왔어요. 이 문서는 어떤 속성이 어느 픽셀을 움직이는지만이 아니라, CSS가 여러분이 작성한 코드를 실제로 어떻게 해석하는지 알고 싶은 사람들을 위한 것입니다.

캐스케이드를 제대로 설명하고, 레이아웃의 엣지 케이스, 그리고 대부분의 튜토리얼이 건너뛰는 성능과 접근성 세부 사항까지 다룰 예정입니다. CSS는 겉보기엔 관대해 보이지만, 화면에 그려지기만 하는 스타일과 여러 화면에서도 흔들리지 않는 스타일 사이에는 진짜 노력이 필요한 지점이 있습니다. 꼼꼼히 읽고, 저를 포함해서 모든 걸 의심해보세요.

이 핸드북은 HTML을 조금 다룰 수 있고, 자신이 그린 그림대로 페이지가 보이길 원하는 모든 사람을 위한 것입니다. CSS는 Cascading Style Sheets의 줄임말로, 페이지가 어떻게 보이는지를 기술하는 언어입니다. 색상, 폰트, 여백, 그리고 화면에 놓인 모든 것의 배치까지요. HTML이 페이지에 무엇이 있는지를 말한다면, CSS는 그것이 어떻게 보여야 하는지를 말합니다. 앞으로 계속 나올 두 용어를 잠깐 짚어볼게요. **property(속성)**는 color나 font-size처럼 스타일을 줄 수 있는 하나의 대상이고, **selector(선택자)**는 스타일을 주고 싶은 요소를 CSS로 지정하는 방법입니다. 여기 나오는 모든 개념은 깊이 있게, 예제와 함께 빠짐없이 다루며, 나중에 빠르게 답을 찾고 싶을 때 검색할 수 있도록 정리되어 있습니다.

시작하는 데 디자인 배경 지식은 필요 없습니다. 페이지에 제목과 문단 하나를 넣을 수 있다면 시작할 준비는 충분히 된 것이고, 나머지는 필요할 때마다 하나씩 소개됩니다. CSS는 거의 모든 웹 개발자가 HTML 다음으로 배우는 두 번째 언어입니다. 스타일이 없는 페이지는 그냥 꾸며지지 않은 텍스트일 뿐이기 때문이죠.

이 핸드북은 기초부터 차근차근 쌓아 올라갑니다. 페이지에 스타일을 적용하고 원하는 요소를 정확히 지정하는 방법, 박스 모델이 여백과 크기를 어떻게 제어하는지, 색상과 글자를 다루는 방법, 그리고 flexbox와 grid로 페이지를 레이아웃하고 어떤 화면에서도 반응하게 만드는 방법까지 배우게 됩니다. 각 개념은 하나씩 보면 작지만, 쌓이면 실제로 배포할 수 있는 인터페이스가 됩니다.

여기서는 CSS의 각 요소가 무엇을 하고 왜 그렇게 동작하는지를 설명하는 데 중점을 둡니다. 단순히 무엇을 입력해야 하는지만 알려주는 게 아닙니다. 예제에서 속성 하나를 복사해서 붙여넣고 화면에서 뭔가 바뀌는 걸 지켜보는 건 누구나 할 수 있어요. 거기서 더 나아가 적응력 있고, 가독성을 유지하고, 변경하기에도 저렴한 레이아웃을 만드는 것과의 차이는 스타일이 겹칠 때 브라우저가 그 의미를 어떻게 결정하는지 이해하는 데 있습니다. 그 이해야말로 어떤 프로젝트 하나보다도 오래 남는 것입니다.

JunoCSS는 이것저것 만져볼수록 배워집니다 CSS의 멋진 점 하나를 알려드릴게요. 뭔가를 바꾸면 그 결과를 바로 눈으로 볼 수 있어요. 색상을 조금 바꾸고, 여백을 살짝 밀어보면 페이지가 눈앞에서 바로 업데이트됩니다. 이런 빠른 피드백 덕분에 CSS는 웹에서 실험하며 배우기 가장 좋은 분야 중 하나예요. 읽으면서 직접 이것저것 시도해보세요.

JunoCSS는 이것저것 만져볼수록 배워집니다 CSS는 촘촘한 피드백 루프를 제공합니다. 값을 바꾸고, 렌더링된 결과를 보고, 다시 조정하세요. 이걸 적극적으로 활용하세요. 레이아웃에 대한 진짜 감을 가장 빠르게 익히는 방법은 브라우저 개발자 도구를 열고, 속성을 실시간으로 바꿔가며 무엇이 움직이는지 지켜보는 것입니다. 이 핸드북의 모든 내용은 읽기만 하는 게 아니라 직접 시도해보라고 만들어졌습니다.

JunoCSS는 이것저것 만져볼수록 배워집니다 피드백 루프는 CSS를 배우는 데 가장 좋은 도구입니다. 그러니 브라우저 개발자 도구를 실험실처럼 활용하세요. 박스 모델을 살펴보고, 선언을 켜고 꺼보고, 캐스케이드가 실시간으로 승자를 결정하는 과정을 지켜보세요. 명시도(specificity)에 대해 글로 읽는 것과, 스타일 패널에서 한 규칙이 다른 규칙에 밀리는 걸 직접 보는 것은 완전히 다른 경험이고, 후자가 진짜로 머릿속에 남게 만듭니다.

가이드를 만나보세요

이 핸드북은 세 명의 가이드가 안내하며, 여러분은 그중 누구와 함께할지 고를 수 있습니다. 내용 자체는 모두에게 동일하지만, 어떤 가이드를 고르느냐에 따라 설명하는 어투가 달라지고, 내용이 조절되는 페이지에서는 각 섹션을 얼마나 깊게 다루는지도 달라집니다.

가이드는 언제든 각 페이지 위쪽에 있는 선택기에서 바꿀 수 있고, 오른쪽 아래의 Preferences를 열면 가이드, 언어, 글자 크기도 바꿀 수 있습니다.

준비가 끝났다면 이제 본격적으로 핸드북을 시작해봅시다. 다음 챕터인 CSS란 무엇인가에서는 CSS가 정확히 무엇인지, HTML과 어떻게 짝을 이루는지, 그리고 앞으로 이어지는 모든 내용의 기반이 되는 규칙, 선택자, 속성이라는 작은 용어들을 다룹니다.

직접 만들면서 배우고 싶으신가요?Scrimba의 무료 HTML/CSS 강좌는 5개의 프로젝트와 75개 이상의 인터랙티브 챌린지를 통해 같은 내용을 다룹니다.→