style을 HTML 페이지에 적용하는 3가지 방법
2020. 11. 2. 19:46ㆍ공부 정리/Front end
1. inline
HTML태그 안에다가 적용
다른 CSS파일에 적용한 것보다 가장 먼저 적용
<p style="border:1px solid gray;color:red;font-size:2em;">2. internal
style태그로 지정
구조와 스타일이 섞이게 되므로 유지보수가 어렵다.
별도의 브라우저가 요청을 보낼 필요가 없다.
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body>3. external
외부파일(CSS)로 지정하는 방식
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</div>
</body>
</html>
4. 예외
<head>
<style>div { color:red; }</style>
<link rel="stylesheet" href="css.css">
</head>이 상태에서 css.css에서 div color를 blue로 주었다면 뒤에 선언된 external 방식의 css방식의 내용이 적용되어 div color가 blue로 된다.
=> internal과 external은 같은 우선순위를 가진다.
'공부 정리 > Front end' 카테고리의 다른 글
| cross domain issue (0) | 2020.12.11 |
|---|---|
| JSTL (0) | 2020.11.11 |
| DOM(Document Object Model) (0) | 2020.11.09 |
| CSS - 캐스케이딩(Cascading) (0) | 2020.11.06 |
| CSS - 상속(Inheritance) (0) | 2020.11.02 |