티스토리 뷰

온라인강의정리하기/CSS

CSS의 선언 방식의 종류

루체도 2019. 8. 20. 17:13

인라인(in-line) 방식

 - HTML 태그에 'style' 속성을 직접 작성하는 방식 

<div style="color:black; font-size: 20px; font-weight: bold;">안녕</div>

이렇게 사용을 하면 css에서 선택자를 작성을 하지 않아도 style이 적용이 가능합니다.

근데 그럼 이 방식이 css에 작성을 하는 것보다 좋은 방식이냐?

더 좋은건 아닙니다. 조금 더 복잡한 웹 디자인을 만들 때는 반복적인 사용과 유지보수를 추후에 할 때는

class로 지정을 해줘서 고치는 것이 더 좋은 방법입니다. 물론 이 방법이 안좋다라는 것은 아닙니다.

나중에 공부하게 되는 내용에서 특정한 기능들이 자동으로 삽입이 되게 하는 것으로 사용을 하는 것은

괜찮으나 직접적으로 작성을 하는 것은 피해야 합니다.

 

내장(embedded)방식

HTML head안에 <style></style> 안에 작성하는 방식

<head>
 <style>
  div{
   color:red;
   font-size: 20px;
   font-weight : bold;
  }
 </style>
</head>
<body>
 <div>HELLO</div>
</body>

HELLO라는 텍스트가 위에 <style>안에 작성한 div 선택자에 의해 영향을 받게 된다.

글씨체는 빨간색, 글씨 크기는 20px, bold로 웹페이지에 작성이 되게 됩니다.

 

링크(link)방식

HTML <link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식

<!-- main.html-->
<head>
 <link rel = "stylesheet" href="css/common.css">
</head>
<body>
 <div>HELLO</div>
</body>

/* common.css*/
div {
 color : red;
 font-size : 20px;
 font-weight : bold;
}

외부에 있는 common.css파일을 불러오기 위해서 link 태그를 사용을 합니다.

rel은 relationship으로 외부 파일과 현재 파일의 관계를 나타내기 위해서 사용을 하고 href는 경로입니다.

 

@import 방식(@(at) import)

CSS @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식

<!-- main.html -->
<head>
 <link rel="stylesheet" href="css/common1.css">
</head>
<body>
 <div>HELLO</div>
</body>

/* common1.css*/
@import url("./common2.css");

/* common2.css*/
div{
 color: red;
 font-size : 20px;
 font-weight : bold;
}

css에서 외부에 있는 css를 가지고 올 때 사용을 하는 것입니다.

./가 붙어있는 것을 보니 상대 경로 입니다. 그 외에는 link방식과 동일하게 작동을 한다고 생각하시면 될 것 같습니다.

이 방식에는 주의해야 할 것들이 있습니다.

html에서 link태그를 사용해서 css파일을 불러올 때는 거의 한번에 모든 css파일을 다 같이 불러옵니다.

그런데 import 방식을 사용을 하면 1번 css 파일이 다 불러와질 때 까지 기다렸다가 2번을 부르고~ 또 2번에 import가 있으면 해당하는 파일을 또 2번이 다 불러와지면 불러오게 됩니다. 이런 방식을 직렬 방식 호출이라고 합니다.

4개의 css파일을 불러올 때 소모되는 시간을 비교를 해봅시다.(하나의 파일을 읽는데 1s라고 가정)

방식 시간
link 1s
import 4s

시간만 비교해보면 무조건 link 방식을 사용하는게 좋을 것 같지만 그건 또 아닙니다.

만약 2번에 해당하는 css파일을 적용하기 위해서는 1번에 해당하는 css파일이 적용이 다 된 상태여야 하면

import방식이 더 좋습니다.

'온라인강의정리하기 > CSS' 카테고리의 다른 글

CSS 복합 선택자  (0) 2019.08.27
CSS 기본 선택자 선언방식  (0) 2019.08.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함