CSS는 관심사를 분리시켜준다.
이말은 즉슨, 내용과 스타일을 분리한다는 것인데,
내용은 HTML에, 스타일은 CSS에 작성한다.
CSS 규칙
선택자 {
속성: 속성값;
속성: 속성값; /*속성을 선언하는 부분*/
}CSS 속성 하나하나를 태그에 넣기보단 CSS 규칙을 정해 사용하는 것이 편리하다.
CSS 선택자
규칙에서 요소를 선택하는데 사용하는 부분
태그 이름
h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용한다. 예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 쓴다.
h3 {
font-size: 24px;
}아이디(id)
맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법으로 쓴다.예를 들어서 아이디 이름이 mandu인 태그에 글자색을 넣으려면 아래와 같이 쓴다.
<h3>중식당</h3>
<h3 id="mandu">군만두</h3>
<h3>짜장면</h3>
<h3>짬뽕</h3>#mandu {
color:#f56513;
}‼️ 아이디 이름은 중복되어 쓸 수 없다.
하나만 스타일링 하고 싶다면 id를 사용하고
여러 개를 스타일링 하고 싶다면 class를 사용한다.
클래스(class)
아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용한다. 맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법으로 쓴다. 예를 들어서 클래스 이름이 menu인 모든 태그에 글자 크기와 굵기를 넣으려면 아래와 같이 쓴다.
<h3 class="menu">중식당</h3>
<h3 class="menu" id="mandu">군만두</h3>
<h3 class="menu">짜장면</h3>
<h3 class="menu">짬뽕</h3>.menu {
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)
절대적인 단위이다. 화면을 표시하는 기준이 되는 크기다.
상대적인 크기 단위
퍼센트(%)
부모 태그의 크기에 따라 상대적으로 지정할 때 쓴다.
예를 들어, 부모 태그의 height의 절반 값을 쓰고 싶다면, height: 50%처럼 쓸 수 있다.
<div id="parent">
저는 높이가 640px입니다.
<div id="chile">
저는 높이가 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;
}코멘트 문법
.button {
font-size: 24px;
padding: 8px;
}코멘트는 /* 로 시작해서 */ 로 끝나는 코드다.
코드를 읽는 사람들을 위한 거고, 실행에는 아무런 영향을 주지 않다.
/*
CSS
v1.5.0
*/
/* 버튼 */
.button {
font-size: 24px;
padding: 8px; /* 임시로 정한 값 */
}