css 3가지 사용법
- 외부 스타일 시트
- 내부 스타일 시트
- 인라인 스타일
1. 외부 스타일 시트
- 외부에서 스타일 시트를 만든 뒤 .html이나 .jsp등의 파일에서 사용 할 수 있다.
- 외부 스타일 시트.css 파일을 만든 뒤 head태그 사이에 link태그를 이용하여 참조한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 주로 해당 위치에 link로 css파일을 불러 온다. -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
</body>
</html>- 예시 코드
2. 내부 스타일 시트
- 내부 스타일 시트는 head태그 사이에 style태그를 이용하여 선택자와 선언부로 css스타일을 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 주로 해당 위치에 style태그로 css를 설정 한다. -->
<style>
/* 해당 위치에 선택자와 선언블럭으로 스타일을 설정한다 */
h1 {
border: 1px solid #f0f;
color: orange;
}
</style>
</head>
<body>
<h1>test.html</h1>
</body>
</html>- 예시코드
- 결과 창
3. 인라인 스타일
- 인라인 스타일은 HTML 태그 안의 속성에 style속성을 사용하여 선언부로 스타일을 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 style="border: 1px solid #f0f; color: orange;">test.html</h1>
</body>
</html>- 예시 코드
- 결과창
선택자와 선언부
- 선택자(Selector)에는 tag 선택자, class 선택자(.), id 선택자(#)가 있다.
- 선언부(Declaration)에는 여러개의 속성과 속성값이 올 수 있고 ;(세미클론)으로 나누어 표현한다
- 속성class는 스페이스바( )를 이용해서 여러개의 class를 중첩해서 사용 가능하다
- 오른쪽 꺽새(>)를 사용해서 태그안의 태그 접근 가능하다
- 그림 자료 (출처 : http://www.w3schools.com/css/css_syntax.asp)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* tag선택자 */
h1{
border: 1px solid #f00; color: red;
}
/* class선택자 이름앞에 .을 찍어서 표현 */
.h1class{
border: 2px solid #0f0; color: green;
}
/* id선택자 이름앞에 #을 찍어서 표현*/
#h1id{
border: 3px solid #00f; color: blue;
}
.r{
color: red;
}
/* 오른쪽 꺽새(>) 기호를 사용해서 태그안의 태그로 접근*/
#h1id>b{
color: yellow;
}
</style>
</head>
<body>
<h1>test1.html</h1>
<!-- class는 스페이스바로 나뉘어 class여러개 선언가능 -->
<h1 class="h1class r">test2.html</h1>
<h1 id="h1id">test3.<b>html</b></h1>
</body>
</html>- 예시 코드
- 결과 창
CSS 우선순위
- !important(1순위) > inline(2순위) > id 선택자(3순위) > class 선택자(4순위) > tag 선택자(5순위) > 원본(그 외)
'Web > CSS' 카테고리의 다른 글
| css 따라하기 3일 차 | text (0) | 2022.06.20 |
|---|---|
| css 따라하기 2일 차 | font (0) | 2022.06.16 |