css 규칙
선택자 {
속성: 속성값;
속성: 속성값;
}css 속성을 하나하나 태그에 넣기보단 css 규칙을 정해 놓고 사용하기
css 선택자
규칙에서 요소를 선택하는 데 사용하는 부분이다.
태그 이름
h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용한다. 모든 h3 태그의 글자 크기를 24px로 하는 예시이다.
h3 {
font-size: 24px;
}아이디(id)
맨 앞에 #을 붙여서 #아이디_이름과 같은 문법을 사용한다. 참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안 된다.
<h3>서울</h3>
<h3 id="busan">부산</h3>
<h3>대구</h3>
<h3>인천</h3>#busan {
color: #f56513;
}
클래스(class)
아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용한다. 맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법으로 쓴다.
<h3 class="place">서울</h3>
<h3 class="place" id="busan">부산</h3>
<h3 class="place">대구</h3>
<h3 class="place">인천</h3>.place {
font-size: 16px;
font-weight: 400;
}
색상 단위
색상 이름
red, green, yellow 같은 영어로 된 색상 이름이다.
색상 코드
#으로 시작하는 여섯 글자의 코드이다. 빨강, 초록, 파랑의 값을 0 ~ 255 사이 정수로 표현한 후, 16진수로 만들어 각각 두 글자씩 총 여섯 글자를 연속으로 써놓은 값이다. 노란색을 나타내는 예시이다.
#FFFF00RGB
빨강, 초록, 파랑 값을 10진수로 써서 색상을 나타낸다. 빨강, 초록, 파랑은 0 ~ 255 사이의 정수 값이다.
rgb(255, 255, 0)RGBA
빨강, 초록, 파랑, 알파 값을 순서대로 써서 색상을 나타낸다. 알파는 0 ~ 1 사이의 소수 값으로 1에 가까울수록 불투명해지고, 0에 가까울수록 투명해진다.
rgba(255, 255, 0, 0.5)
절대적인 크기 단위
픽셀 px
절대적인 단위로 화면을 표시하는 기준이 되는 크기이다.
상대적인 크기 단위
퍼센트 %
부모 태그의 크기에 상대적으로 지정할 때 사용한다. 예를 들어 부모 태그의 height의 절반 값을 쓰고 싶다면, height: 50% 처럼 쓸 수 있다.
<div id="parent">
높이는 320px
<div id="child">
높이는 160px
</div>
</div>#parent {
background-color: #A655ED;
height: 320px;
}
#child {
background-color: #6942D6;
height: 50%;
}em
em은 부모 태그 font-size의 크기이다. 예를 들어 부모 태그 글자 크기의 4배를 하고 싶다면 4em 처럼 사용하면 된다. 아래 예시에서 #child는 #parent의 자식이므로 4em은 #parent의 글자 크기인 16px에 4배 한 64px이 된다.
<div id="parent">
16px입니다.
<div id="child">
64px입니다.
</div>
</div>#parent {
font-size: 16px;
}
#child {
font-size: 4em;
}rem
rem은 <html> 태그의 font-size 크기이다. 예를 들어 <html> 태그 글자 크기에서 2배를 하고 싶다면, 2rem이라고 사용하면 된다.
<html>
<body>
18px 입니다.
<div id="other">
32px 입니다.
</div>
</body>
</html>html {
font-size: 16px;
}
body {
font-size: 18px;
}
#other {
font-size: 2rem;
}'💻 STUDY > Frontend' 카테고리의 다른 글
| 박스 모델 정리 (0) | 2023.11.23 |
|---|---|
| 다양한 padding, margin 표기법 (0) | 2023.09.27 |
| CSS 속성 정리 (0) | 2023.09.22 |
| CSS 문법 정리 (0) | 2023.08.23 |
| HTML 문법 정리 (0) | 2023.08.23 |
