소개
CSS 핸드북에 오신 것을 환영합니다! 저는 주노(Juno)이고, 이것이 제가 가장 좋아하는 웹 강의 주제입니다. HTML은 페이지의 구조를 만들고, CSS는 그것을 살아있게 만듭니다: 색상, 간격, 타이포그래피, 전체 외관.
우리는 CSS의 첫 번째 줄부터 시작해서 천천히, 한 번에 하나의 개념씩 구축해 나갈 것입니다. 조금이라도 HTML을 쓸 수 있다면, 여기의 모든 내용을 배울 준비가 된 것입니다.
너무 기초적인 질문은 없으니 자신의 속도로 가세요. 우리가 함께 도착할 것입니다!
이 핸드북은 HTML을 조금 쓸 수 있고 자신이 생각하는 대로 페이지를 보이게 하고 싶은 모든 사람을 위한 것입니다. Cascading Style Sheets의 약자인 CSS는 페이지가 어떻게 보이는지를 설명하는 언어입니다: 색상, 글꼴, 간격, 화면의 모든 것의 배열. HTML은 페이지에 무엇이 있는지 말하고, CSS는 어떻게 나타나야 하는지 말합니다. 전체에서 볼 두 가지 용어에 대한 간단한 설명: 속성은 color나 font-size 같이 스타일할 수 있는 하나의 것이고, 선택자는 스타일하려는 요소를 가리키는 CSS 방식입니다. 여기의 모든 개념은 깊이, 예제, 빠른 답을 원할 때마다 검색할 수 있는 것과 함께 완전히 작성되었습니다.
디자인 배경이 필요하지 않습니다. 제목과 단락을 페이지에 넣을 수 있다면 시작할 준비가 충분하고, 나머지는 모두 나타날 때 소개됩니다. CSS는 거의 모든 웹 개발자가 배우는 두 번째 언어이며, HTML 바로 다음입니다. 왜냐하면 CSS가 없는 페이지는 아무것도 아닌 스타일 없는 텍스트일 뿐이기 때문입니다.
핸드북은 처음부터 위로 진행됩니다. 페이지에 스타일을 연결하고 올바른 요소를 대상으로 지정하는 방법, 박스 모델이 간격과 크기를 제어하는 방법, 색상과 타이포그래피를 사용하는 방법, 그리고 flexbox와 grid로 페이지를 레이아웃하고 모든 화면에 반응하도록 하는 방법을 배울 것입니다. 각 아이디어는 그 자체로는 작지만, 실제로 배포할 수 있는 인터페이스로 쌓입니다.
여기서의 접근 방식은 각 CSS 조각이 무엇을 하고 왜 하는지 설명하는 것이며, 단순히 무엇을 입력할지가 아닙니다. 누구나 예제에서 속성을 붙여넣고 화면에서 무언가 이동하는 것을 볼 수 있습니다. 그것과 적응하고, 읽을 수 있고, 변경하기에 저렴한 레이아웃을 구축하는 것 사이의 거리는 브라우저가 스타일이 겹칠 때 스타일이 무엇을 의미하는지 결정하는 방법을 이해하는 것입니다. 그 이해가 어떤 단일 프로젝트도 능가하는 것입니다.
가이드를 만나세요
이 핸드북은 세 명의 가이드가 진행하며, 당신은 어떤 가이드가 당신을 안내할지 선택합니다. 재료는 모두를 위해 동일합니다. 당신의 가이드는 그것이 말해지는 목소리를 설정하고, 적응하는 페이지에서는 각 섹션이 얼마나 깊이 있는지를 설정합니다.
- **주노(Juno)**는 초급 트랙을 가르칩니다: 따뜻하고 인내심 있게, 평이한 비유, 아무것도 가정하지 않습니다.
- **에이스(Ace)**는 중급 트랙을 가르칩니다: 실용적이고 빌드 우선, 당신이 실제로 하는 것으로 곧장.
- **솔(Sol)**은 Deep Dive를 가르칩니다: 메커니즘, 트레이드오프, 그리고 다른 모든 사람이 건너뛰는 프로덕션 세부 사항.
아무 페이지 상단의 선택 도구에서 언제든지 가이드를 전환하거나, 오른쪽 하단의 Preferences를 열어 가이드, 언어 또는 글꼴 크기를 변경할 수 있습니다.
설정이 완료되면, 핸드북이 본격적으로 시작됩니다. 다음 장인 What is CSS는 CSS가 실제로 무엇인지, HTML과 어떻게 쌍을 이루는지, 그리고 나머지 전체 트랙이 구축된 규칙, 선택자, 속성의 작은 어휘를 다룹니다.
빌드하면서 배우고 싶으신가요?Scrimba의 무료 HTML 및 CSS 과정은 5개의 프로젝트와 75개 이상의 인터랙티브 도전을 통해 같은 내용을 다룹니다.