[프론트엔드 입문] css 연결방식 Day+7

1.

선택자 { 속성: 값; }

span {}

중괄호 앞에 적용할 영역을 '선택자 Property'

스타일(CSS)의 종류 (Property)

 

"선택자의 --속성:은, 값;이다."

 

중괄호 { } 열리고 닫히는 범위

스타일 범위의 시작과 끝을 지정

 

div {

(indent 들여쓰기 tab)  color: red;

(outdent 내어쓰기 shift+tab)  margin: 20px;

}

 

/*주석추가, 설명 작성*/

Ctrl+/

 

 

 

 

2.

CSS 선언방식

1. 내장 방식

2. 링크 방식

3. 인라인 방식

4. @import 방식

 

 

1. 내장방식

html안에서 style 태그를 이용해, html 문서 내에서 작성하는 방식

별도 css 파일 작성, 링크 필요 없어서

프로젝트를 묶어서 번들해 올리는 과정에서, 제품화 시킬 때엔 이런 식으로 활용.

그러나 유지보수 필요한 웹 등에서는 불편

별로 추천하지 않음

 

<style>

  div {

    color: red;

    margin: 20px;

  }

</style>

 

 

3. 인라인 방식

html 전역 속성 중 style 속성에 직접 추가해서 css 직접 작성하는 방식

<div style="color: red; margin: 20px;"></div>

별도 태그, 요소 찾는 중괄호 앞 선택자 필요 없음.

그러나 인라인방식으로 작성한 내용이 다른 속성보다 우선순위를 갖게 되어서, 덮어씌워서 수정하고 싶어도 적용안됨.

나중에 유지보수할 때 악영향

 

 

2. 링크 방식

<link rel="stylesheet" href="./css/main.css" />

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

한번에 가져와서 연결하는 거라서 병렬 연결방식. 연결이 빠르나 의도적으로 지연시켜야하는 경우는 직렬 방식 차용

 

 

4. @import 방식

CSS의 @import규칙으로 CSS문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식

  1) html 파일 내
     <link rel="stylesheet" href="./css/main.css" />

  2) main.css 파일 내

     @import url("./box.css) ;

     div {

       font-size: 20px;

     }

  3) box.css 파일 내

     div {

       background-color: red;

       padding: 20px;

     }

main.css가 html에서 읽은 후에 box.css 연결하는 거라서 직렬식,

순차적으로 진행되기 때문에 연결 지연될 수 있음.

고의적으로 지연을 발생시킬 때 자주 사용.

자주 사용하지 않으니까, import규칙 없이 html에 link 를 여러개 만들어서 병렬식으로 적용하는 게 편리