반응형
1. CSS란?
- Cascading style sheet의 약자
- 웹 문서의 전반적인 스타일을 따로 저장해둔 시트
2. 작성 방법
인라인, 내부 스타일 시트, 외부 스타일 시트의 세 가지 방법 존재
인라인
- 태그 내에 스타일을 바로 지정하는 방식
<body>
<h1 style='color:blueviolet;'>제목입니다.</h1>
<h3 style='color:deepblue;'>설명할 내용들입니다.</h3>
</body>
내부 스타일 시트
- style태그를 사용하여 html문서의 head에서 스타일을 지정해주는 방식
- style 태그 안의 내용이 css라고 할 수 있다.
<html>
<head>
<title>Document</title>
<style>
ht{color:red;}
</style>
</head>
<body>
<h1>hello</h1>
</body>
<html>외부 스타일 시트
- 내부 스타일 시트 방식에서 style 태그의 내용만 따로 css파일로 저장하는 방식이다.
- html 문서의 head에 css파일의 링크를 미디어 태그로 추가해준다.
<!--html문서 head에 css파일을 링크로 걸어두는 방법-->
<head>
<title>Document</title>
<link rel="stylesheet" href="css파일경로명/css파일명.css">
</head><!--css파일의 형식-->
h1{color:red;}반응형
'프론트엔드' 카테고리의 다른 글
| [javascript] find()와 findIndex()의 차이점 (0) | 2023.07.04 |
|---|---|
| [html, CSS] table 잘 만드는 방법 (0) | 2023.06.29 |
| [html, CSS] html 태그로 만들 수 있는 인풋 종류 (1분 소요) (0) | 2023.06.29 |
| [html, CSS] 미디어 태그 쓰는 법 (10초 꿀팁) (0) | 2023.06.29 |
| [html, CSS] 컨텐츠 그룹 태그 (0) | 2023.06.29 |
