CSS 개요

HTML에 스타일을 입히는 방법

우리가 작성한 HTML은 CSS로 색을 입히는등 디자인적인 요소를 적용할 수 있다. 이는 HTML요소를 선택하고 CSS 속성을 선언하는 식으로 작업한다.

간단한 예

<div>Hello World!!</div>

div {
  font-size:50px;
}

css는 html요소 {속성:값;} 와 같은 형식으로 작성하게된다.

속성은 스타일의 종류이고 각 스타일의 값이 콜론 다음에 나온다.

만약 여러가지 속성을 선언해야한다면 하나의 속성과 값을 세미콜론으로 구분한다.

div {
  font-size:50px;
  height : 100px;
}

위와같이 말이다.

내장 방식 우리가 스타일을 입히고싶은 html파일의 head 내부에 다음과 같이 작성하면 된다. 이런 방식을 내장방식이라고 한다.
```
 <style>
   div {
     color : royalblue;
     font-size: 20px;
   }
 </style>
```
인라인 방식 <div style="color: royalblue; font-size: 20px></div> 스타일 속성이 일반적인 태그의 안에 들어가있다. 이런 방식을 인라인 방식이라고 한다. 이 방식은 비추한다. 왜냐하면 우선순위가 높기에 다른 방식으로 css를 작업하다보면 아무리 스타일을 바꾸려해도 바뀌지 않는 경우가 생긴다. 이럴 때 인라인 방식으로 선언된 요소를 하나하나 추적해서 파악해야한다. 따라서 유지보수에 어려움이 있다.
링크방식 link라는 태그를 선언해서 외부에 있는 파일(css)를 가져와서 적용하는 방식이고 가장 일반적인 css선언 방식이다.
임포트 방식 @import url()과 같이 선언하고 하나의 css파일에서 다른 경로에 있는 css를 가져와서 연결하고 싶을 때 사용한다. 이런 방식을 직렬방식이라고 한다. 예를 들어 a라는 css파일을 index.html에 연결하고 a라는 css파일에서 다른 css파일을 불러온다. 그렇기 때문에 a라는 css가 html에 연결되기 전까지 import로 가져온 css파일은 연결되지 않는다. 연결이 지연될 수 있다.

기본 선택자를 조합해서 사용함

일치 선택자: span.orange{color:red;}이름에서도 알 수 있듯이 태그가 span이고 동시에 orange라는 클래스를 가지는 요소에 스타일을 입힌다. 주의해야할 점은 클래스선택자 태그선택자의 순서로 선언하면 안된다는 것이다. 태그 선택자 다음의 클래스 선택자는 마침표로 구분이 되지만 그 반대의 순서라면 구분이 되지 않기 때문이다.
자식 선택자: ul > .orange {color:red;} ul태그의 자식요소중 orange라는 클래스를 가진 요소를 찾는다.
하위 선택자: div .orange {color:red;} 자신이 포함하는 모든 요소를 기준으로 찾는다. 띄어쓰기는 일종의 선택자의 기호로 생략하면 안된다.
인접 형제 선택자: .orange + li {color:red}같은 부모 요소 가진 요소들 중에서 바로 다음 요소 하나를 선택한다.
일반 형제 선택자 .orange ~ li {color:red;}와 같이 사용하고 다음 형제 요소를 모두 선택한다.

웹 사이트를 이용할 때 어떤 요소 위에 마우스를 올리면 강조효과가 나타나기도 한다. 이런 동작을 가상 클래스 선택자를 이용해서 구현할 수 있다.

요소:hover {} 요소에 마우스를 올리면 중괄호 안의 속성들이 적용된다. 마우스를 다른 요소로 옮기면 해제된다.
요소:active {} 요소에 마우스를 클릭하고 있는 동안 적용. 클릭을 떼면 적용되지 않는다.
요소:focus {}기본적으로 입력받는 요소들에 적용된다. 입력 창에서 커서가 깜빡이는 동안에 적용된다.
요소:first-child {} 형제 요소중 첫번째를 선택해서 스타일을 적용.
요소:last-child {} 형제 요소중 마지막 요소를 선택해서 스타일 적용
요소:nth-child(숫자) {} n번째 형제 요소를 선택 특이한 점은 숫자는 0부터 시작한다는 것과 괄호안에 일종의 수학적인 규칙이 들어갈 수 있다. 예를 들어 2n과 같이 선언을 하면 0,2,4…와 같이 짝수번째 요소들에만 스타일을 적용하고 2n+1과 같은 형식도 가능하다.
요소:not(요소) {} 전체 선택자랑 같이 사용하는 것이 의미가 있다. 모든 요소를 선택하는데 어떤 요소를 제외하고 스타일을 적용한다.

요소::before 주의해야할 점은 가상선택자와 다르게 콜론이 두 개 붙는다는 것이다. 선택자 요소의 내부 앞에 내용을 삽입한다. 예를 들어 <div class="box">content</div>같은 태그가 있을 때 box::before{content: "앞!";}과 같이 작성한다면 <div class="box">앞! content</div>이 된다.
요소::after before와 마찬가지로 실제 content가 삽입되는 데 뒤에 삽입된다.

주의해야할 점은 반드시 content속성을 선언해줘야한다는 것이다.

[속성]{} 속성을 포함한 요소 선택. data-set속성도 선택이 가능하다.
[속성="값"]{} 속성을 포함하고 특정한 값을 가진 요소 선택. 예를 들어 타입이라는 속성을 가지고 그 값이 password인 요소를 선택하고 싶다면 [type="password"]{}와 같이 선택해서 스타일을 입힐 수 있다.

상위 요소에 스타일을 적용했을 때 그 적용된 내용이 요소의 하위요소까지 반영되는 성질을 상속이라고 한다.

우선순위란 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 css속성을 우선 적용할지 결정하는 방법이다.

우선순위는 일종의 점수에 따라 결정된다.

점수가 높은 것들부터 나열한다면 다음과 같다.

그렇다면 중요하게 제일 우선으로 적용되야하는 스타일엔 !important를 붙이고 나머지는 점수에 따라 계산하여 붙이면 되는 걸까?

아니다. !important는 되도록 사용을 지양해야한다. 이렇게 점수를 무한대로 끌어올리게 되면 다른 방식으로 스타일을 덮어씌워 수정해야할 때 또 !important를 사용해야하는 문제가 생긴다.

그리고 인라인 선언방식을 사용하는 것도 지양하는 편이 좋다. 위와 같은 이유이다.