CSS 규칙
선택자 {
속성: 속성값;
속성: 속성값;
}CSS 속성을 하나하나 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용하는 걸 권장
CSS 선택자
- 규칙에서 요소를 선택하는 데 사용하는 부분
태그 이름
예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면
h3 {
font-size: 24px;
}아이디 (id)
맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법으로 쓴다. 참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안 된다.
<h3 id="hallasan">한라산 국립공원</h3>#hallasan {
color: #f56513;
}클래스 (class)
맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법
클래스는 중복 가능
<h3 class="place">성산 일출봉</h3>
<h3 class="place">군산 오름</h3>.place {
font-size: 16px;
font-weight: 400;
}색상 단위
색상 코드
- 샵(#)으로 시작하는 여섯 글자의 코드. 빨강, 초록, 파랑 값을 0 ~ 255 사이 정수로 표현한 다음, 이걸 16진수로 만들어서 각각 두 글자씩, 총 여섯 글자를 연속으로 써놓은 값
#FFFF00RGB
빨강, 초록, 파랑 값을 우리가 평소에 쓰는 10진수로 써서 색상을 나타낸다. 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값이다. 예를 들어서 노란색은 아래와 같이 쓴다.
rgb(255, 255, 0)RGBA
빨강, 초록, 파랑, 알파 값을 순서대로 써서 색상을 나타낸다. 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값이고, 알파는 0 ~ 1 사이의 소수 값이다. 알파 값은 1에 가까울수록 불투명해지고, 0에 가까울수록 투명해진다. 예를 들어서 반투명한 노란색은 아래와 같이 쓴다.
rgba(255, 255, 0, 0.5)절대적인 크기 단위
픽셀 px
절대적인 단위, 화면을 표시하는 기준이 되는 크기
상대적인 크기 단위
퍼센트 %
부모 태그의 크기에 상대적으로 지정할 때 쓴다
<div id="parent">
저는 높이가 320px입니다.
<div id="child">
저는 높이가 160px이에요!
</div>
</div>#parent {
background-color: #A655ED;
height: 320px;
}
#child {
background-color: #6942D6;
height: 50%;
}em
CSS에서 em은 부모 태그 font-size의 크기이다. 예를 들어서 부모 태그 글자 크기의 4배를 하고 싶다면, 4em처럼 쓰면 된다. 아래 예시에서 #child는 #parent의 자식이고, #parent의 글자 크기가 16px이기 때문에 4em이라고 하면 16px * 4 = 64px이 된다.
<div id="parent">
저는 16px입니다.
<div id="child">
저는 64px이에요!
</div>
</div>#parent {
font-size: 16px;
}
#child {
font-size: 4em;
}rem
rem은 루트(root) em이라는 의미의 단위입니다. CSS에서 rem은 태그의 font-size 크기이다. 예를들어서 태그 글자 크기에서 2배를 하고 싶다면, 2rem이라고 쓰면 된다. 아래 예시에서 #other는 글자 크기가 2rem인데요. 는 18px이지만 은 16px이기 때문에 16px * 2 = 32px이 된다.
<html>
<body>
저는 18px 입니다.
<div id="other">
저는 32px이에요!
</div>
</body>
</html>html {
font-size: 16px;
}
body {
font-size: 18px;
}
#other {
font-size: 2rem;
}