CSS란?
CSS는 Cascading Style Sheets의 약자
Cascading : 연속화
Cascade : 폭포
CSS에서 스타일이 적용될 때 우선순위를 가지고 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙음
HTML의 스타일, 레이아웃 등을 꾸미는 역할
CSS를 한번 작성해 여러 HTML에 재사용 가능
작성방법
header(선택자){
color(속성): royalblue(속성값);
}주석
/* 주석 내용 */CSS 적용하기
인라인 방식
태그 자체에 style 속성으로 스타일을 주는 방식
일부 스타일 적용에 제한이 있음 ex) 가상요소 :hover, ::before, ::after 사용불가
<p style="color: yellow; background-color: black;">Hello world</p>
내부 스타일
head 태그 안 style 태그를 사용하여 스타일을 주는 방식
코드가 길어질수록 HTML 파일 길이가 길어지기 때문에 비효율적
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스타일</title>
<style>
p {
color:yellow;
background-color:black;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
외부 스타일
html파일과 CSS파일을 분리
가장 권장하는 방법
HTML과 CSS를 분리하면 코드의 가독성과 효율성이 높아짐
link
- 현재 문서와 외부 리소스의 관계를 명시
- 빈 태그로 속성만을 포함
- head 요소 내부에만 위치 가능
- rel : relations 관계. 대상 파일의 속성을 나타냄. css 파일은 rel="stylesheet"
- href : 경로. 연결시 참조할 파일의 위치
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>/* style.css */
p {
color:yellow;
background-color:black;
}
'HTML&CSS > CSS' 카테고리의 다른 글
| CSS(6) Box Model (0) | 2023.08.20 |
|---|---|
| CSS(5) display 속성 / 단위 (0) | 2023.08.19 |
| CSS(4) 선택자 우선순위 (0) | 2023.08.19 |
| CSS(3) 선택자 (0) | 2023.08.19 |
| CSS(2) 상속 (0) | 2023.08.19 |