CSS 기초

CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정합니다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당합니다. 같은 HTML 구조를 가지고 있는 문서에, 각기 다른 CSS파일을 적용하면 전혀 다른 웹사이트처럼 보이게 할 수도 있습니다. 이번 챕터에서 CSS를 학습하고 나면, 이후에 진행하는 스프린트에서는 얼마든지 자유롭게 적용할 수 있습니다.

Achievement Goals

• CSS의 사용목적을 이해할 수 있다.
• 프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.
• CSS의 기본 문법과 구조를 이해할 수 있다.
• CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
  • 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
• id 및 class와 관련된 selector 규칙을 이해할 수 있다.
• CSS를 이용해 텍스트를 꾸밀 수 있다
• CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
  • 각 단위가 적합한 경우를 구분할 수 있다.
• CSS 박스 모델을 이해할 수 있다
  • box model
    • width, height
    • margin, padding, border
  • 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
• MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
  
  질문
  • 위 CSS 예제에서 등장하는 속성은 어떤 것들이 있나요?
    • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
    • 글자 색을 바꾸기 위한 속성은 무엇인가요?
    • 배경 색을 바꾸기 위한 속성은 무엇인가요?
    • background 속성과 background-color 속성은 어떻게 다른가요?
    • em의 의미는 무엇인가요?