CSS, querySelector

---

CSS  

CSS의 사용 목적 ---> 웹페이지의 구조의 외부와 내부를 꾸미는 역할, 스타일링을 담당
HTML 내부에 직접 CSS를 정의하는 것은 좋지 않다
id와 class?

 

CSS의 문법 구성

CSS 간단 속성 정리

텍스트의 가운데 정렬을 하기 위한 속성

 text-align: center;​

글자 색을 바꾸기 위한 속성

color: #4a4a4a;​

배경 색을 바꾸기 위한 속성

background: #fff;​

background 속성과 background-color 속성은 어떻게 다른가요?
: background-color는 단순히 색깔 옵션만 부여한 반면, background는 다른 color / image / repeat / attachment / position과 background 옵션을 추가적으로 부여할 수 있다.

em의 의미는 무엇인가요?
: em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다

font-size: 1.5em;

-> 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻

---

id와 class의 차이점

id -> #으로 선택, 한 문서에 단 하나의 요소에만 적용, 특정 요소에 이름을 붙이는 데 사용

class -> .으로 선택, 동일한 값을 갖는 요소 많음, 스타일의 분류(classification)에 사용

 

스타일링

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

 

HTML 문서의 레이아웃

CSS 박스 모델