css : html 태그에 디자인을 넣어주는 언어
선택자 : 태그, id, class 에 스타일 적용
인라인 방식
<div style="background-color: burlywood">인라인 방식</div>각각의 태그마다 적용 시켜야하고 재사용이 불가능합니다.
내장 방식
<style>
div{
background-color: black;
}
</style><head> 태그 내부에 사용할 style을 미리 선언하여 태그에 같은 스타일을 적용할 수 있습니다.
다만, 해당 html 에서만 사용할 수 있습니다.
링크 방식
<link rel="stylesheet" href="./style.css" />스타일을 하나의 css 파일에 넣고, html 파일에서 css 파일을 링크해서 사용합니다.
재사용과 스타일 변경이 생겨도 무관합니다.
@import 방식
css의 @import 규칙으로 css 문서 안에서 또 다른 css 를 가져와 연결하는 방식입니다.
@import url(./ex1_import.css);
p{
background-color: red;
color: white;
}
우선 순위
인라인 > 내장 방식 ? 링크 방식
기본적으로 가장 늦게 읽히는 것이 가장 최우선으로 적용됩니다.
그러나, 인라인 방식은 내장, 링크 방식 보다는 우선으로 적용되며 내장, 링크 방식은 늦게 쓰여진 것이 우선으로 적용됩니다.
'[Study] FE > HTML & CSS & JS' 카테고리의 다른 글
| [포스코X코딩온] CSS_04 position & backgound (0) | 2023.03.07 |
|---|---|
| [포스코X코딩온] CSS_03 속성 정리 (0) | 2023.03.06 |
| [포스코X코딩온] CSS_02 선택자 (0) | 2023.03.05 |
| [포스코X코딩온] HTML_02 <table> 태그 & Semantic (0) | 2023.03.03 |
| [포스코X코딩온] HTML_01 구조 설명 & tag (0) | 2023.03.02 |