속성
색상
css에서 색상을 적용하는 속성은 여러가지가 있다. 글자의 색상을 적용하는 color와 배경 색상을 적용하는 background-color , 박스 테두리 색상을 적용하는 border-color등이 있다.
.box {
color: red;
background-color: black;
border-color: purple;
}
글꼴
글꼴을 설정하는 속성은 font-family이다.
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
사용하려는 기기에 따라서 지원하지 않는 글꼴이 존재할 수 있다. 이런 경우를 대비해서 fallback 글꼴을 추가하며, 입력된 순서대로 적용이 된다.
다양한 글꼴을 사용하고 싶으면 Google Fonts 서비스를 이용하여 HTML의 link 태그를 이용하여 쉽게 embed하여 사용할 수 있다.
크기
글꼴의 크기를 설정하는 속성은 font-size이다.
.text {
font-size: 12px;
}
굵기
글꼴의 굵기를 설정하는 속성은 font-weight이다.
.text {
font-weight: 600;
}
밑줄, 가로줄
텍스트에 밑줄, 가로줄을 설정하는 속성은 text-decoration이다.
.text {
text-decoration: underline;
}
자간
텍스트의 자간을 설정하는 속성은 letter-spacing이다.
.text {
letter-weight: 10px;
}
행간
텍스트의 행간을 설정하는 속성은 line-height이다.
.text {
line-height: 10px;
}
정렬
텍스트를 정렬하는 속성은 text-align 이다.
.text {
text-align: center;
}
가로 정렬할 때에만 사용이 된다. 값으로는 left, right, center, justify가 있다.
세로 정렬은 다른 조건이 있어야 사용할 수 있다. 따라서 박스에 대해 배운 후에 알아보자.
단위
크기의 단위는 2가지가 있다.
- 절대 단위: px, pt 등
- 상대 단위: vw, wh, %, em, rem 등
절대 단위는 기기나 브라우저의 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기 단위를 나타낸다.
상대 단위는 기기나 브라우저의 사이즈 등에 의해서 크기가 바뀌는 단위를 나타낸다.
기본적인 셀렉터
id로 이름 붙여서 스타일링 적용하기
h2 {
color: blue;
}
모든 h2 태그의 텍스트 색깔을 파란색으로 변경하는 CSS 코드이다.
<h2>파란색 글씨</h2>
<h2 id="title">기본적인 셀렉터</h2>
id가 title인 h2 태그만 색깔을 변경하자.
#title {
color: red;
}
# 기호를 이용해서 id가 있는 요소를 선택해서 스타일링한다. id는 하나의 문서에서 한 요소에만 사용해야 한다.
class로 스타일을 분류하여 적용하기
li {
color: red;
}
모든 li 태그의 텍스트 색깔을 빨간색으로 변경하는 CSS 코드
<ul>
<li class="blue">G</li>
<li class="red">o</li>
<li class="yellow">o</li>
<li class="blue">g</li>
<li class="green">l</li>
<li class="red">e</li>
</ul>
여러 요소에 같은 스타일링을 적용하기 위해서 class를 사용한다.
.red {
color: red;
}
.blue {
color: blue;
}
.기호를 이용해서 class가 있는 요소를 선택해서 스타일링한다. class는 하나의 문서에서 여러 요소에 사용이 가능하다.
셀렉터 종류
전체 셀렉터
* { }
태그 셀렉터
div { }
h1 { }
article, body { }
ID 셀렉터
#id_name { }
Class 셀렉터
.class_name { }
속성 셀렉터
요소에 특정 속성이 있는지에 따라 요소를 선택한다.
a[href] { }
자식 셀렉터
자식 셀렉터는 입력한 요소의 바로 아래 자식인 요소만 선택한다. 아래의 예시에서 <body> 바로 아래 있는 <div>요소는 선택 되지만 <span>요소의 자식인 <div>요소는 선택되지 않는다.
body > div { }
<body>
<div> <!-- 선택 -->
<span>
<div></div>
</span>
</div>
<div> <!-- 선택 -->
<span>
<div></div>
</span>
</div>
</body>
후손 셀렉터
자식 셀렉터와 달리 바로 아래 자식인 요소만 선택되지 않고 자식의 자식인 요소들도 선택이 된다.<body> 바로 아래 있는 <div>요소뿐만 아니라 <span>요소의 자식인 <div>요소까지 선택된다.
body div { }
<body>
<div> <!-- 선택 -->
<span>
<div></div> <!-- 선택 -->
</span>
</div>
<div> <!-- 선택 -->
<span>
<div></div> <!-- 선택 -->
</span>
</div>
</body>
형제 셀렉터
형제 셀렉터는 같은 부모요소를 갖고 있으며, 첫 번째 선택자의 요소보다 두 번째 선택자의 요소가 뒤에 있을 때 선택한다. 두 요소가 서로 붙어있을 필요는 없다.
p ~ span { }
<body>
<span></span>
<p></p> <!-- 첫 번째 선택자 -->
<span></span> <!-- 선택 -->
<span></span> <!-- 선택 -->
<div></div>
<span></span> <!-- 선택 -->
</body>
인접 형제 셀렉터
인접 형제 셀렉터는 같은 부모요소를 갖고 있으며, 첫 번째 선택자 요소 바로 뒤에 오는 두 번째 선택자의 요소만 선택한다.
p + span { }
<body>
<span></span>
<p></p> <!-- 첫 번째 선택자 -->
<span></span> <!-- 선택 -->
<span></span>
<div></div>
<span></span>
</body>
Pseudo-class 셀렉터
요소가 특정 상태일 때 선택한다.
button:hover { } /* 마우스를 요소 위에 올렸을 때 선택한다. */
button:active { } /* 클릭된 상태일 때 선택한다. */
button:focus { } /* 포커스가 들어와 있을 때 선택한다. */
Pseudo-elements 셀렉터
요소 자체가 아닌 요소의 특정 부분을 선택한다.
p::first-line { } /* p요소를 전체 선택이 아닌 첫 번째 줄만 선택한다. */
'CSS' 카테고리의 다른 글
| [CSS] 박스 모델 (0) | 2022.05.04 |
|---|---|
| CSS (0) | 2022.05.02 |
