CSS3 - 스타일 작성법
타일 작성법
- 인라인 스타일 – 태그에 직접 스타일 정보를 입력
- <head>태그 안에 스타일 정의하기
- 외부 스타일시트 문서로 작성하기
1. 인라인 스타일
하나의 태그에만 원하는 스타일을 지정 할 수 있다.
사용하기는 간편하지만 똑 같은 스타일을 넣을 경우 일일이 다 넣어줘야 한다.
구문 – 태그안에 style=”원하는 속성:속성값”
<h2><font face=”돋움” color=”red” size=”5”>HTML수업 시간</font></h2>
a 인라인 스타일로 바꾸면 : <h2 style=”font-family:돋움;color:red;font-size:18pt;”> HTML수업 시간</h2>
2. <head>태그 안에 스타일 정의하기
<head>태그안에 <style>태그를 정의하고 그 안에 스타일을 정의한다.
<head>태그안에 스타일을 정의할때는 태그명, 클래스명, 아이디명에 스타일을 정의할 수 있다.
<head>
<style type=”text/css”>
p{
font-family:돋움;
font-size:10pt;
}
</style>
</head>
2-1. 태그 이름으로 스타일 정의하기
<head>태그안에 태그 이름을 이용하여 스타일을 정의하면
HTML 문서에 포함된 모든 해당 태그에 같은 스타일이 적용된다.
장점 – 하나의 스타일 코드를 여러 번 쓰인 같은 태그에 모두 적용할 수 있다.
단점 – 같은 태그라도 원하는 곳에만 스타일을 바꾸려면 불가능하다.
<head>
<style type=”text/css”>
태그명{
font-family:돋움;
font-size:10pt;
}
</style>
</head>
여러 개의 태그에 같은 스타일을 적용시 : h2, p, li { color:red }
2-2. class 로 스타일 정의하기
HTML 태그의 클래스(class) 특성값을 이용해서 스타일을 정의하면 태그의 종류에 관계없이 같은 클래스를 가지는 모든 태그에 스타일이 적용된다.
장점 – 원하는 곳에 자유롭게 스타일을 적용할 수 있다.
같은 클래스명을 여러 태그에 동시에 사용할 수 있다.
a 스타일 적용 방법
태그 안에 class=”이름” 작성
<head>태그 안에서 .(도트)클래스이름 으로 스타일 정의
<head>
<style type=”text/css”>
.클래스명{
font-family:돋움;
font-size:10pt;
}
</style>
</head>
<body>
<p class="클래스명">HTML</p>
</body>
2-3. ID 로 스타일 정의하기
ID - HTML 문서 내에서 개별적인 태그들을 구별하기 위해 유일한 이름을 지정하기 위한 것
id 명은 한 번만 선언되어야 함
a 스타일 적용 방법
태그 안에 id=”이름” 작성
<head>태그 안에서 # id이름 으로 스타일 정의
<head>
<style type=”text/css”>
#아이디명{
font-family:돋움;
font-size:10pt;
}
</style>
</head>
<body>
<p id="아이디명">HTML</p>
</body>
3. 외부 스타일시트 문서 작성하기
스타일시트 정의 부분을 별도의 ~.css 파일 형식으로 저장하여 여러 HTML문서에서 Link하여 사용할 수 있다.
장점 – 중복 작업의 최소화 / 전체 웹 사이트의 통일성을 유지할 수 있다.
- html 문서
<head> 태그 안에 아래와 같이 쓴다.
<link rel = “stylesheet” type=”text/css” href=”스타일문서경로”>
- CSS 문서
맨 윗줄에 @charset "euc-kr"; 을 쓰고 확장자명을 .css로 저장한다.
댓글