목표
4회차: 23/02/06 15:00 ~ 19:00
계획: CSS 기본 정리 (1)
목적: React 사용을 위함
방향: CSS의 기본 문법을 정리
결과
기본 문법
규칙
선택자 { 속성: 속성값; ...}
선택자
- 규칙에서 요소를 선택하는데 사용
<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>h1 {
font-size: 24px;
}- h1 태그의 글자 크기를 24px로 설정
#hallasan {
color: #f56513;
}- 'hallasan'이라는 id에 글자색을 적용
.place {
font-size: 16px;
font-weight: 400;
}- 'place'라는 클래스에 글자 크기 및 굵기를 적용
색상
#ffff00
rgb(255, 255, 0)
rgba(255, 255, 0, 0.5)- 색상 코드
- RGB
- RGBA: 마지막 인자는 투명도
크기
픽셀(px)
- 절대적인 단위
퍼센트(%)
- 상대적인 단위
<div id="parent">
저는 높이가 320px입니다.
<div id="child">
저는 높이가 160px이에요!
</div>
</div>#parent {
background-color: #A655ED;
height: 320px;
}
#child {
background-color: #6942D6;
height: 50%;
}- 부모 태그의 크기에 상대적으로 지정
- 여기서는 부모 태그 크기의 절반인 160px을 적용
em
- 부모 태그의 font-size 크기
<div id="parent">
저는 16px입니다.
<div id="child">
저는 64px이에요!
</div>
</div>#parent {
font-size: 16px;
}
#child {
font-size: 4em;
}- 4em = 16px * 4 = 64px
rem
- root의 em
- 최상위 태그인
<html>태그의 font-size 크기
<html>
<body>
저는 18px 입니다.
<div id="other">
저는 32px이에요!
</div>
</body>
</html>html {
font-size: 16px;
}
body {
font-size: 18px;
}
#other {
font-size: 2rem;
}- 2rem = 16px * 2 = 32px
김찬호 화이팅