초보개발자의 성장블로그
CSS 02 CSS 삽입 방법
프론트엔드/CSS2021. 3. 19. 14:21
① 인라인 스타일 : CSS 코드를 직접 적용할 태그에 기입하는 방식
② 내부 스타일 시트 : CSS 코드를<style> 태그 내에 삽입하는 방식
③ 외부 스타일 시트 : CSS 부분을 별도의 파일로 만들어서 HTML 부분과 완전히 분리하는 방식
인라인 스타일 입니다.
내부 스타일 시트 입니다.
외부 스타일 시트 입니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 삽입 방법</title>
<!-- ③ 외부 스타일 시트 : CSS 부분을 별도의 파일로 만들어서 HTML 부분과 완전히 분리하는 방식 -->
<link rel="stylesheet" type="text/css" href="외부 스타일 시트.css">
<!-- ② 내부 스타일 시트 : CSS 코드를<style> 태그 내에 삽입하는 방식 -->
<style>
h3.inner{
color:#ff0000;
font-size:18px;
}
</style>
</head>
<body>
<!-- ① 인라인 스타일 : CSS 코드를 직접 적용할 태그에 기입하는 방식 -->
<h3 style="color:black; font-size:18px">인라인 스타일 입니다.</h3>
<!-- ② 내부 스타일 시트 : CSS 코드를<style> 태그 내에 삽입하는 방식 -->
<h3 class="inner">내부 스타일 시트 입니다.</h3>
<!-- ③ 외부 스타일 시트 : CSS 부분을 별도의 파일로 만들어서 HTML 부분과 완전히 분리하는 방식 -->
<h3 class="outer">외부 스타일 시트 입니다.</h3>
</body>
</html>외부 스타일 시트.css
h3.outer{
color:blue;
font-size:18px;
}
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 07 a:link, a:visited, a:hover, a:active 로 링크 텍스트 꾸미기 (0) | 2021.03.20 |
|---|---|
| CSS 06 font-family, font-size, font-style, font-weight 속성 (0) | 2021.03.20 |
| CSS 04 text-align, text-decoration, line-height 속성 사용하기 (0) | 2021.03.19 |
| CSS 03 color 속성으로 글자 색상 지정하기 (0) | 2021.03.19 |
| CSS 01 기본 구조 확인하기 (0) | 2021.03.19 |
댓글()