CSS 규칙
선택자 {
속성: 속성값;
속성: 속성값;
}CSS 속성을 하나하나 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용하는 걸 권장함
CSS 선택자
규칙에서 요소를 선택하는 데 사용하는 부분
태그 이름
h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용함
예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 씀
h3 {
font-size: 24px;
}
아이디(id)
맨 앞에 샵을 붙여서 #아이디_이름 과 같은 문법으로 씀
참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안 됨
예를 들어서 아이디 이름이 hallasan인 태그에 글자색을 넣으려면 아래와 같이 씀
<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>#hallasan {
color: #f56513;
}
클래스(class)
아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용함
맨 앞에 마침표를 붙여서 .클래스_이름 과 같은 문법으로 씀
예를 들어서 클래스 이름이 place인 모든 태그에 글자 크기와 굵기를 넣으려면 아래와 같이 씀
<h3 class="place">우도</h3>
<h3 class="place" id="hallasan">한라산 국립공원</h3>
<h3 class="place">성산 일출봉</h3>
<h3 class="place">군산 오름</h3>.place {
font-size: 16px;
font-weight: 400;
}
색상 단위
색상 이름
red, green, yellow 같은 영어로 된 색상 이름임
세세한 색 표현이 어려워서 자주 쓰지는 않음
색상 코드
샵(#)으로 시작하는 여섯 글자 코드
빨강, 초록, 파랑 값을 0~255 사이 정수로 표현한 다음, 이걸 16진수로 만들어서 각각 두 글자씩, 총 여섯 글자를 연속으로 써놓은 값임
예를 들어서 노란색은 아래와 같이 씀
#FFFF00
RGB
빨강, 초록, 파랑 값을 우리가 평소에 쓰는 10진수로 써서 색상을 나타냄
빨강, 초록, 파랑은 0~255 사이 정수 값임
예를 들어서 노란색은 아래와 같이 씀
rgb(255, 255, 0)
RGBA
빨강, 초록, 파랑, 알파 값을 순서대로 써서 색상을 나타냄
빨강, 초록, 파랑은 0~255 사이 정수 값이고, 알파는 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은 전통적으로 인쇄술에서 대문자 M의 크기를 나타내는 단위임
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은 <html> 태그의 font-size 크기임
예를 들어서 <html> 태그글자 크기에서 2배를 하고 싶다면, 2rem이라고 쓰면 됨
아래 예시에서 #other 는 글자 크기가 2rem임
<body>는 18px이지만 <html>은 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;
}'CODEIT;' 카테고리의 다른 글
| CSS 핵심 개념 : 텍스트 스타일링 정리 (0) | 2023.08.28 |
|---|---|
| CSS 핵심 개념 : 코멘트 (0) | 2023.08.28 |
| 웹 퍼블리싱 시작하기 : HTML/CSS를 공부하는 법 (0) | 2023.08.27 |
| 웹 퍼블리싱 시작하기 : 개발자 도구 (0) | 2023.08.27 |
| 웹 퍼블리싱 시작하기 : 도메인 설정하기 (0) | 2023.08.27 |