각 태그 안에 style 속성에 CSS 문법을 적는 것을 인라인 방식이라고 한다.
그러나, 인라인 방식(한 줄 한 줄 적용)은 권장하지 않음. 내용이 많아질수록 코드량이 많아진다.
아래는 인라인 방식의 예다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p style = "color :red">
hello
</p>
<p style = "color :red">
hello
</p>
<h2 style = "color :red">hello</h2>
</body>
</html>
Embeded 방식으로 CSS를 적용해보자.
이러한 방식은 선택자를 활용한다.
<style> 태그 내에 선택자를 쓰고, 내용을 입력하면
선택자에 해당하는 모든 내용에 CSS가 적용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type = "text/css">
p{
color : blue;"
}
h2{
color : "blue"
}
</style>
<body>
<p>
hello
</p>
<p>
hello
</p>
<h2>hello</h2>
</body>
</html>
적용 우선순위
선택자로 설정한 CSS가 가장 먼저 먹히고, 가장 마지막에 인라인 방식이 먹힌다.
즉, 전체 설정을 정하고 개별적 설정을 할 수 있다는 뜻.
+ (태그명 선택자 > class 선택자 > id 선택자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type = "text/css">
p{
color : blue;
background-color: green;
}
h2{
color : blue
}
</style>
<body>
<p>
hello
</p>
<p style = "color:blue;background-color: red;">
hello
</p>
<h2>hello</h2>
</body>
</html>
wildcard 써서 전체 색상을 설정할 수 있다.
주의점 : *(와일드카드) 보다 개별 태그가 우선순위가 높기 때문에, 와일드카드를 마지막에 쓰더라도 각각의 개별 태그의 설정값이 적용된다. 혼동을 없애기 위해서 와일드카드를 최상단에 두는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type = "text/css">
p{
color : purple;
}
* {
color : orange;
}
/* p{
color : blue;
color : rgb(0,255,0);
color : #00FF00;
background-color: green;
}
h2{
color : blue
}
p{
color : purple;
} */
</style>
<body>
<p>
hello
</p>
<p style = "color:blue;background-color: red;">
hello
</p>
<h2>hello</h2>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type = "text/css">
p{
color : purple;
}
* {
color : orange;
}
/* p{
color : blue;
color : rgb(0,255,0);
color : #00FF00;
background-color: green;
}
h2{
color : blue
}
p{
color : purple;
} */
</style>
<body>
<p>
hello
</p>
<p style = "color:blue;background-color: red;">
hello
</p>
<h2>hello</h2>
</body>
</html>
import 방식은 CSS 파일을 외부에서 불러와 적용하는 것이다.
<style>@import url(style.css);</style>link 방식은 import 방식과 비슷한 개념이다. 다른 방식보다 속도나 유지보수면에서 뛰어난 방식이다.
<link ref=“style.css” rel=stylesheet” type=“text/css” />'웹 프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] 박스모델 심화(#id, .class, display, float, visibility, padding, margin, border, text-align 등) (0) | 2020.06.15 |
|---|---|
| [CSS] 박스모델 (padding, text-align, border-style, border-color, border-width 등) (0) | 2020.06.12 |
| [CSS] 박스모델 : margin, padding 차이점 (0) | 2020.06.12 |
| [CSS] 화면 겹치는 방법 position(static, absolute, relative, fixed), z-index 활용 (0) | 2020.06.12 |
| [CSS] CSS 적용 방법_2_(선택자 활용) (0) | 2020.06.12 |
