🤷 CSS?
CSS는 Cascading Style Sheet의 약자로 HTML이나 XML로 만들어진 인터넷 문서의 표현을 기술하기 위한 스타일시트 언어입니다. CSS는 심심한 문서에 조미료를 뿌려주는 역할을 합니다. 이번 글에서는 CSS 문법 중에 비교적 쉬운 문법들을 살펴보겠습니다.
🧂 CSS 파일과 적용법
HTML의 파일 확장자 .html 이듯이 CSS도 .css로 끝나는 형식의 파일입니다. 적용 방식은 HTML 파일의 헤더에 스타일 코드를 작성하는 방식과 외부 스타일시트를 링크해서 적용하는 방식이 있습니다.
스타일 코드
<head>
<style>
p{
font-size : 10px;
color: red;
}
</style>
</head>외부 스타일시트
<head>
<link rel="stylesheet" href="main.css">
</head>
스타일 코드를 보면 p와 {}안에 font-size와 color에 대한 내용이 있다는 것을 확인할 수 있습니다. p는 여기서 선택자의 역할을 합니다.
👉🏼 선택자?
선택자는 HTML 문서의 한 요소를 선택해서 그 요소에 대한 스타일을 적용하는데 사용되는 스타일 규칙입니다. CSS는 항상 아래 그림과 같은 문장 구조를 가집니다.
위와 같은 태그 선택자를 제외하고도 다양한 선택자들이 존재합니다.
선택자의 종류
| Selector | Pattern | Meaning |
|---|---|---|
| 전체 | * | 문서 전체에 존재하는 태그를 선택합니다. |
| 클래스 | .example | 클래스 속성값이 example인 태그를 선택합니다. ex) <p class="example"> |
| ID | #ID | id 속성값이 ID인 태그를 선택합니다. ex) <div id="ID"> |
| 복합 | a b, a>b | a 요소 자손인 b를 선택하거나, a 요소의 자식인 b를 선택합니다. |
선택자 우선순위
하나의 스타일시트에서 중복되게 선택되어 충돌이 발생할 수 있습니다. 그런 일이 발생할 경우에 선택자의 우선순위를 알고 넘어가야 합니다.
!important > id > class > tag > *
🤖 자주 사용되는 속성들
색상
p{ color: blue; }color는 텍스트의 색상을 변경할 때 사용되는 속성이다.
.About{ background-color:coral; }background-color은 배경색을 변경하는 속성이다. 위 문장에서는 About 클래스의 배경 색상을 coral로 변경한다.
크기
div{ font-size:15px }font-size는 폰트 크기를 변경하는 속성입니다.
.Header{ width: 50%; height: 30% }width와 height는 넓이와 높이를 변경하는 속성으로 섹션, 이미지 등에 다양하게 사용될 수 있습니다.
