CSS 기본 문법, 선언 방식

1. 기본 문법

<div>HoneyRiceCake</div>

div {
  font-size: 50px;
  color: blue;
  text-decoration: underline;
}

위의 CSS코드는 다음과 같은 내용이다.

div 요소를 선택하여 중괄호 내의 내용을 적용한다.

이 때 중괄호 앞의 div와 같은 내용을 요소를 선택한다고 하여 선택자라고 부른다.

즉, CSS의 기본 문법은

선택자{
속성:값;
...
}

이다.

이 때 {: 스타일 범위의 시작, }: 스타일 범위의 끝이라고 해석하면 된다.
그리고 우리는 여러 개의 속성과 값들은 모두 개행과 들여쓰기를 통해 작성한다.

Tip->
tab : 들여쓰기, Shift + tab : 내어쓰기

2. 선언 방식

1. 내장 방식
   HTML에 style요소의 내용으로 css문법을 작성하는 방식이다.
   HTML의 head에 작성하여 HTML 자체에 css를 내장하는 방식이다.
   별도의 css파일이 필요없이 HTML내에서 바로 CSS 내용을 적용할 수 있다는 장접이 있지만
   CSS 내용이 많아지면 HTML문서 내에서 한번에 다 처리하기가 쉽지가 않고
   우리가 프론트엔드 프로젝트를 만들 때는 HTML, CSS, JS파일은 구분해서 작성하는 것이 여러모로 장점이 많다.
   그래서 내장 방식은 유지,보수 측면에서 단점이 많다.

   그래서 우리가 직접 작성할 때는 추천하지 않는 방식이고 Bundle이라고 프로젝트를 한데 묶어 서버에 올리는 방식이 있는데 이 때, 컴퓨터가 자동으로 우리가 파일로 분류한 것들을 내장방식으로 파일을 심는 경우가 있는데 우리에게는 전혀 문제가 되지 않는다.

2. 인라인 방식
   ex.
   <div style="color: red; margin: 20px;"><div/>
   선택자라는 개념이 없다.
   해당하는 요소를 직접적으로 찾아서 속성을 추가하는 것이기 때문이다.

   어떻게 보면 굉장히 편리해보이지만 css우선순위라는 개념을 뒤에서 배우는데 인라인 방식으로 작성한 코드를 지나치게 우선하는 문제점을 가진다.
   이게 왜 문제이냐 하면 css파일의 내용을 이용해 좀 덮어써가면서 수정을 하고 싶어도 수정이 되지 않는다.

3. 링크 방식
   ex.
   <link rel="stylesheet" href="./css/main.css">

   로 외부 CSS문서를 가져와서 연결하는 방식

4. import 방식
   이는 CSS에서 다른 CSS 파일을 가져오는 방식이다.
   즉, CSS의 @import 규칙으로 CSS문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식이다.

@import url("./box.css"); # 해당 css파일 기준 경로

~~~(main.css의 내용)

즉, 기본적으로 HTML에서 CSS를 가져오는 방식이 링크 방식이고
CSS에서 다른 CSS를 가져오는 방식이 import이다.

이 때
HTML-CSS1-CSS2 는 직렬로 연결
HTML과 CSS1, CSS2를 각각 link로 연결하는 것을 병렬로 연결이라고 할 수 있다.

이는 css1이 모두 해석이 되고 나서 css2가 해석이 되는 구조라 일부러 해석을 지연시키려는 목적으로 이렇게 직렬로 연결을 하기도 하고
또 실재로 지연된다는 단점이 있기도 하다.
(많이 사용되지는 않는다. 일반적으로는 link를 여러번 한다.)