[HTML, CSS] CSS

CSS 기본 사용법

 

span    {    color     :    red;   }

selector    property    value
(선택자) 

 

 

* 같은 스타일을 부여할 때 같은 selector로 동일한 속성값에 다른 value를 넣었을 때 

   inline (최우선) → internal → external 순으로 적용이 된다.

 

inline으로 적용하는 style은 다른 방법으로 적용한 것 보다 먼저 (우선적으로) 적용이 된다.

 

 

 

style을 HTML 페이지에 적용하는 방법

 

•  inline  : html 태그 안에 넣는 것

특징
- HTML 태그 안에 적용한다.
- 다른 CSS파일에 적용한 것보다 가장 먼저 적용한다.

 

 

* html에 css를 넣는 방법은 좋은 방법은 아니다. 구조를 표현하는 html에 css가 들어 있기 때문에 구조와 스타일이 섞여있어 유지보수와 관리하기 어렵기 때문이다.

 

 

•  internal : head 안에 스타일을 넣는 방법

특징

- style태그로 지정한다.
- 구조와 스타일이 섞이에 되므로 유지보수가 어렵다.

- 별도의 CSS파일을 관리하지 않아도 되며, 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.

 

 

 

 

•  external : 별도의 css파일을 만들어서 include시키는 방법
  
  특징
  - CSS코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋다.

 

 

• 우선순위
  inline은 별도의 우선순위를 갖지만, internal과 external은 우선순위가 동등하다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.

 

 

 

참고 :  boostcourse    https://www.boostcourse.org/web316/lecture/16673?isDesc=false

웹 프로그래밍(풀스택)