CSS 기본
- CSS 스타일의 형식: 선택자 { 속성1 : 속성값1; 속성2 : 속성값2 }
- 예시
li {
font-size : 1.2em;
line-height: 1.5;
color : blue;
}- css를 한 줄로 표기할 수도 있고, 여러 줄로 표기할 수 있다.
- 중괄호{} 안에서 스타일 규칙은 세미콜론(;)으로 구분하여 작성한다.
- 참고로, 주석은 /* ... */ 사이에 작성한다.
- 인라인 스타일
- 인라인 ㄴ스타일은 따로 스타일 시트를 사용하지 않고 직접 대상에 적용하는 방법이다.
<p style = "color : blue;"> 인라인 스타일 적용 예시입니다. </p>
- 내부 스타일 시트
- 아래와 같이 html 문서 안에 스타일 정보를 작성한 것을 내부 스타일 시트라고 한다.
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "UTF-8">
<title>Example Page</title>
<style>
padding: 10px;
background-color: red;
color: black;
</style>
</head>
- 외부 스타일 시트
- 따로 css 파일을 만들어서 저장한 후, html 문서에 연결하면 해당 스타일이 html 문서에 적용된다. 웹사이트를 제작할 때, 외부 스타일 시트를 만들어두고 필요한 경우 불러와서 사용하는 것이 일반적이다.
h1 {
color: orangered;
font-size: 30px;
}
h2, h3 {
color: pink;
}
#container {
width: 500px;
border: 1px solid black;
}위와 같이 css 파일을 별도로 작성한 후, html 문서에서는 아래와 같은 코드를 <head> 에 작성하여 외부 스타일 시트를 연결하게 된다.
<link rel = "stylesheet" href = "외부 스타일 시트 파일 경로">
- CSS 기본 선택자
| 종류 | 설명 | 예시 |
| 전체 선택자 | 모든 요소에 적용 | * { margin : 10px; } |
| 타입 선택자 | 특정 태그 타입에 적용 | p { font-style : italic; } |
| 클래스 선택자 | 특정 클래스에 적용 | .redtext { color: red; } |
| id 선택자 | 특정 id에 적용 | #container { width: 500px; } |
| 그룹 선택자 | 여러 요소에 적용 | h1, h2 { text-align: center; } |
- 적용 우선순위
- !important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일
- 스타일 규칙에 !important를 붙이면 적용 우선순위가 높아진다.
'워크시트' 카테고리의 다른 글
| [JavaScript] 레이어(Layer) (0) | 2022.06.05 |
|---|---|
| [CSS] 구글 폰트 사용하기 (0) | 2022.06.04 |
| [Excel] VLOOKUP 함수 (0) | 2022.05.29 |
| [ADP] ADP 2과목 정리 (2) | 2022.05.22 |
| 웹 스크래핑 (0) | 2022.05.06 |