① 인라인 방식(in-line) : HTML 태그에 'style' 속성을 직접 작성하는 방식
<div style="color:red; font-size: 15px; font-weight: bold;">hello world</div>- 이런 방식을 사용하면 css에서 선택자를 작성하지 않아도 style이 적용 가능하다.
따로 선택자가 필요하지 않다는 장점이 있지만
복잡한 웹디자인을 제작할 때, 반복적인 사용과 유지보수적인 면에선 번거로울 수 있다. 그렇다고 이 방법이 무조건 안좋다는 것은 아니다!! 나중에 알 수 있는 부분이지만 특정한 기능들이 자동으로 삽입 되게 하는 것으로 사용할 땐 적합하다
단, 직접적으로 작성하는 것은 피해야한다!!
② 내장 방식(embedded) : HTML head 안에<style></style>을 작성하는 방식
<head>
<style>
div {
color: black;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div> hello world </div>
</body> - <style>안에 작성한 div 선택자에 의해 body안에 들어간 hello world라는 텍스트가 영향을 받아 스타일이 변경된다
③ 링크 방식(link) : HTML <link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
<head>
<link rel = "stylesheet" href="css/style.css">
</head>
<body>
<div>hello world</div>
</body>
/* style.css*/
div {
color : red;
font-size : 20px;
font-weight : bold;
}- 외부에 있는 style.css파일을 불러오기 위해 link 태그를 사용하여 스타일을 적용 시키는 방식이다.
- rel : 외부 파일과 현재 파일의 관계를 나타내기 위해서 사용한다.
- href : 경로
* @import방식 : CSS @import를 이용하여 외부문서로 CSS를 불러와 적용하는 방식 (링크 방식과 동일)
<!-- main.html -->
<head>
<link rel="stylesheet" href="css/common1.css">
</head>
<body>
<div>hello world</div>
</body>
/* style1.css*/
@import url("./style2.css");
/* style2.css*/
div{
color: black;
font-size : 15px;
font-weight : bold;
}- css에서 외부에 있는 css를 가지고 올 때 사용하는 방식이다.
- html에서 link 태그를 사용해서 css 파일을 불러 올때는 거의 한번에 모든 css 파일을 다 같이 불러온다.
그런데 import 방식을 사용하면 1번 css파일이 다 불러와질 때까지 기다리다가 2번을 부르고 또 2번에 import가 있으면 해당하는 파일을 또 2번이 다 불러와지면 불러오게 되는 직렬 방식 호출이기 때문에 링크 방식보다 속도가 느리다.
하지만 1번에 해당하는 css 파일이 적용 완료가 되어야 2번 css 파일이 적용되는 경우에는 @import 방식을 사용하는 것이 좋다.
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_20] CSS, 절대단위와 상대단위 (0) | 2021.03.07 |
|---|---|
| [코딩 공부_19] CSS, 글자에 적용하는 스타일들 (0) | 2021.03.05 |
| [코딩 공부_18] CSS 셀렉터 우선순위 (0) | 2021.03.04 |
| [코딩 공부_15] CSS 셀렉터(선택자) (0) | 2021.03.03 |
| [코딩 공부_14] CSS로 색상을 표현하는 방법 (0) | 2021.03.03 |
댓글