728x90
#03_css_work.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
background-color: blue;
color: white;
}
</style>
<link rel="stylesheet" href="./03_link.css">
</head>
<body>
<h1 style="background-color: green; color: white;">인라인 방식</h1>
<h2>내장 방식</h2>
<p> 링크 방식</p>
<span>import방식</span>
<h3 style="background-color: black; color: white;">내장방식 사용</h3>
</body>
</html>#03_import.css
span {
background-color: orange;
color: blue;
}#03_link.css
@import url(./03_import.css);
p {
background-color: red;
color: white;
}
h3 {
background-color: black;
color: white;
}직접 css 참조 방식 import 방식을 포함한 4가지를 적용시켜보았다.
실제로 구현해보면서 참조의 우선순위를 확인할 수 있었다.
css는 복잡한 코드를 더 간단하게 확인할 수 있게 해주는 것 같다.
728x90
'프론트앤드 > CSS' 카테고리의 다른 글
| [포스코x코딩온] 웹개발자 입문 과정 2주차 회고-02 | CSS Transform (0) | 2023.03.07 |
|---|---|
| [포스코x코딩온] 웹개발자 입문 과정 2주차 회고-01 | CSS Flex (0) | 2023.03.07 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-13 | CSS 실습2 (0) | 2023.03.06 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-12 | CSS 선택자 (0) | 2023.03.06 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-10 | CSS 기초학습 (0) | 2023.03.03 |