CSS 개요
- 웹 페이지의 디자인을 구성
- CSS는 HTML 요소들이 어떻게 보이는가를 정의하는 스타일 시트 언어
- CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정
- HTML만으로 웹 페이지를 만들 경우, 세부 스타일을 각각 따로 설정하므로 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들다는 단점을 CSS를 통해서 해결
- CSS는 별도 파일로 웹 페이지의 스타일을 저장할 수 있고, 사이트의 전체 스타일을 쉽게 제어/변경 가능
즉, 웹 페이지를 꾸며주는 역할을 한다.
CSS 기본 구성 요소
- 선택자(selector) : 스타일을 적용할 대상 지정
- 속성명(property) : 속성의 이름
- 속성값(value) : 속성에 적용할 값
- {}: 스타일(CSS)의 범위(시작과 끝)
선택자 {속성명 : 속성 값; } 과 같이 사용하여 스타일 적용
‘선택자의 속성은 값이다’라고 해석
p {
color: purple;
text-align: center;
}CSS 작성 시, 위와 같이 들여쓰기를 하여 보기 좋게 입력하는 것이 좋다.
주석 달기
/* 한줄 주석 */
/* 여러줄 주석
주석1
주석2
...
*/CSS 선언 방식
내장 방식(internal style)
- html 안에 내장
<style></style>의 내용으로 스타일을 작성하는 방식
<!DOCTYPE html>
<html>
<head>
<title>내부 스타일</title>
<style>
p {
color: white;
background-color: black;
}
</style>
</head>
<body>
<p>내부 스타일</p>
</body>
</html>인라인 방식(inline style)
- 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)
- 유지 보수하는데 어려움이 있으므로 권장 x
<p style="color: white; background-color: black">인라인 스타일</p>링크 방식
<link/>로 외부 CSS 문서를 가져와서 연결하는 방식- 병렬 방식 연결: 한번에 가지고 와서 해석
index.html
<html>
<head>
<title>외부 스타일<title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>외부 스타일</p>
</body>
</html>style.css
p {
color: white;
background-color: black;
}@import 방식
- CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
- 주로 폰트(font)같은 것을 연결
- 직렬 방식 연결: 연결이 지연된다.
@import url("./sub.css");
p {
color: white;
background-color: black;
}
커피를 좋아하는 프론트엔드 개발자입니다.