css를 적용시키는 방법에는 총 3가지가 있다.
Inline style sheet
Internal style sheet
Linking style sheet
ㅇ Inline style sheet
html 태그 style 속성에 css 코드 삽입
<!DOCTYPE html>
<html>
<head>
<title>티스토리 테스트</title>
</head>
<body>
<p style="color: blue">Inline style sheet</p>
</body>
</html>
ㅇ Internal style sheet
html 문서 내 <style>~</style> 내에 css 코드 삽입
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
<title>티스토리 테스트</title>
</head>
<body>
<p>Internal style sheet</p>
</body>
</html>
ㅇ Linking style sheet
별도의 css 파일을 만들고 html 문서와 연결
<!DOCTYPE html>
<html>
<head>
<!-- html 파일에 link 태그 추가해서 css 파일 연결 -->
<link rel="stylesheet" href="tistoryTest.css">
<title>티스토리 테스트</title>
</head>
<body>
<p>Linking style sheet</p>
</body>
</html>
/* tistoryTest.css 파일 */
p {
color: blue;
}
결과
Inline style sheet
Internal style sheet
Linking style sheet
'기타 > HTML and CSS' 카테고리의 다른 글
| [CSS] CSS3 스타일 상속, 합치기, 오버라이딩 (0) | 2018.06.27 |
|---|---|
| [CSS] CSS3 스타일 시트 형식 (0) | 2018.06.27 |
| [HTML] <ol> <ul> <dl> 태그, 리스트 만들기 (0) | 2018.06.25 |
| [HTML] <img> 태그, 이미지 삽입하기 (0) | 2018.06.25 |
| [HTML] <a href=""> 태그, 하이퍼링크 (0) | 2018.04.29 |
