CSS 지정 형식
inline Style
- inline Style 은 HTML tag 속에 style 속성을 사용하여 직접 지정한다.
예 : <div style="color=red;">HTML</div>
embedded style sheet 방식
- 스타일 시트의 기본적인 사용 방법으로 html의 <head> ~ </head>사이에 삽입한다.
ex08 >>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* embedded style sheet */
/* 태그 선택자 우선순위 3*/
div {
color: blue;
font-weight: bold;
}
/* id 선택자 우선순위 1 [가장 높은 우선순위는 inline]*/
#java { background: yellow; }
/* class 선택자 우선순위 2*/
.web { color: tomato; }
</style>
</head>
<body>
<h3>간단한 css 예</h3>
<div>과목-프로그래밍</div>
<p id="java">자바</p>
<p style="font-size: 20px;">스프링</p>
<hr>
<div>과목-웹프로그래밍</div>
<p class="web">HTML</p>
<p class="web">CSS</p>
<p class="web">Javascript</p>
<hr>
</body>
</html>
linked style sheet 방식
- <head> ~ </head> 사이에 link element 를 사용하여 css file(확장자가 .css인 파일)을 연결 시켜서 사용하는 방식이다.
- 형식 : <link rel="stylesheet" href="파일명" type="text/css">
ex09 >>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 외부 css 파일을 포함시키기 -->
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<h3>css - linked style sheet</h3>
<div>과목-프로그래밍</div>
<p>자바</p>
<p>스프링</p>
<p>C/C++</p>
<hr>
<div>과목-웹프로그래밍</div>
<p class="web">HTML</p>
<p class="web">CSS</p>
<p class="web">Javascript</p>
</body>
</html>@charset "UTF-8";
/* 외부 css 파일 */
div {
font-size: 17px;
font-weight: 700;
}
.web {
color: tomato;
}'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0914_HTML : table 태그 사용 이력서 만들기 숙제 (2) | 2021.09.14 |
|---|---|
| 0913_HTML : 레이아웃 관련 태그(2) div 태그 (0) | 2021.09.14 |
| 0913_HTML : 기본 태그(5) formatting 관련 태그 (0) | 2021.09.14 |
| 0913_HTML: 기본 태그(4) 공통속성 (0) | 2021.09.14 |
| 0913_HTML : 기본 태그(3) 블럭요소와 인라인 요소 (1) | 2021.09.14 |