1. 기본 개념
- CSS 핵심 개념 소개
→ 이전에는 스타일을 적용할 HTML 태그 옆에 원하는 스타일 속성과 속성 값을 입력하여 CSS 적용
→ 만일 여러 개의 h3 태그에 스타일을 지정하려면 각각의 h3 태그를 찾아서 일일이 복사/붙여넣기로
CSS를 적용
→ 만일 h3태그가 훨씬 많은데 이 모든 태그에 스타일을 적용하려면 어떻게 해야 할까?
이 때는 스타일을 하나하나 넣는게 아니라 규칙을 정하면 된다.
→ style 태그 안에 작성하는 코드를 CSS 규칙이라고 한다
- CSS 규칙
→ HTML 태그에 style 속성을 사용하면 스타일을 적용할 수 있다.
→ 그러나 태그의 개수가 많아지면 스타일을 추가하고 수정하는 과정이 번거로워진다.
→ 관심사의 분리는 HTML 파일에는 HTML 태그로 작성된 내용만을 두고, CSS 파일에는
각 태그에 적용되야 하는 스타일만 작성하는 것이다.
→ 관심사의 분리 장점은 내용과 스타일을 따로따로 고치기도 편하고, 코드가 나눠져 있으므로
따로 저장하기도 편하다.
→ CSS에서 h3하고 중괄호로 감싼 코드를 CSS 규칙이라고 한다.
→ CSS 규칙은 선택자와 선언으로 이루어져 있고, h3에 해당하는 것이 CSS 선택자(=CSS Selector)
즉, 어떤 요소에 규칙을 적용할 지 선택하는 것
→ 글자 색을 지정한 부분을 CSS 선언(CSS Declaration)이라고 하며, 어떤 스타일을 적용할 것인지
선언하는 것으로 CSS 속성과 콜론, CSS 속성 값 그리고 세미콜론으로 작성한다.
- 아이디
→ body 태그 안에 img, h1, p, h3 등이 있다.
→ CSS의 선택자에는 태그 이름 외에도 다양한 것들을 쓸 수 있다.
→ 같은 태그가 여러 개가 있는 상황에서 특정 태그에만 스타일링을 하고 싶다면 ID라는 선택자를 사용
→ 태그 옆에 ID 값을 지정하고 CSS에서 선택자 위치에 #ID를 작성 후 스타일링 해준다.
→ 그러면 ID 값으로 선택한 특정한 태그에만 우리가 지정한 CSS가 스타일링 된다.
→ ID를 만들 때에 주의할 점은 ID의 이름은 중복해서 작성할 수 없다.
각 요소마다 고유한 이름을 지어 줘야 하므로 반드시 주의해야 한다.
- 클래스
→ 만일 여러 개의 동일한 태그 중에서 2개, 3개 등 다수를 선택하고 싶다면 클래스(Class)를 사용
→ class를 정해주고, CSS 코드에서 선택자 위치에 .class를 작성 후 스타일링 해준다.
→ class를 적용해준 곳에만 원하는 스타일링이 잘 적용되었다.
→ class 선택자를 사용하면 태그 여러 개를 선택하여 스타일을 지정할 수 있다.
- CSS 파일
→ index.html 처럼 style.css 파일을 만들고 앞서 HTML 파일 내의 style 태그 내에 있던 내용을
적어주면 외부 CSS 파일을 만들 수 있다.
→ CSS 파일을 따로 만들게 되면 HTML 파일 내의 <style>태그를 지우고 link 태그를 사용하여
외부 CSS 파일을 연결해주면 끝이다.
- 개발자 도구로 선택자 확인하기
→ 개발자 도구에서 특정 영역을 클릭 후 Styles라는 탭을 보면 CSS 규칙을 확인할 수 있다.
→ user agent styelsheet라는 것은 웹브라우저에서 제공하는 기본 스타일
→ 개발자 도구를 사용하면 CSS 규칙이 잘 적용되고 있는지 확인이 가능하고, 특히 선택자가 어디에
적용되고 있는지 한눈에 확인이 가능
- 다양한 색상 단위
→ 색상을 나타내는 방법에는 색상 이름으로 표기하는 것과 색상 코드로 표기하는 방식이 있다.
색상 이름(Color Name)
→ 빨강, 노랑, 하양처럼 색상에 이름을 붙인 것을 의미
→ 영어로 된 색상 이름(Red, Yellow, White, ...)
→ 세세한 색깔을 나타내는 것이 어려워 잘 사용하지 않는다.
색상 코드(Color Codes)
→ CSS에서 가장 많이 사용하는 방식
→ #으로 시작하여 숫자와 문자(a~f)로 조합한 여섯 자리를 의미
→ # 뒤에 오는 숫자와 문자 조합을 알기 위해서는 색상을 만드는 두 가지 방법에 대해 알아야 한다.
→ 빨강, 초록, 파랑의 세기를 각각 두 자리씩(00~ff)까지 표시
→ 색상을 만드는 방법은 CMYK 방식과 RGB 방식 두 가지가 있는데
CMYK는 물감을 섞어서 만드는 방법과 RGB는 빛으로 만드는 방법으로 나누어진다.
→ 안료를 섞을 때 Cyan, Magenta, Yellow 이 세 가지를 섞어서 만든다.
→ 빛으로 색상을 만들 때에는 Red, Green, Blue 이 세 가지를 섞어서 만든다.
→ CSS는 모니터에서 보이는 색상을 만드는 것이므로 빛의 삼원색인 RGB를 사용한다.
→ 각 빛의 세기는 0부터 255까지의 세기로 나타낼 수 있는데
→ 빨간 빛의 경우 0(16진수로 00)부터 64(16진수로 40), 128(16진수로 80), 192(16진수로 cO),
255(16진수로 ff)까지 늘어난다.
→ 00에서 ff로 갈수록 큰 값이구나 정도만 알고 넘어가도록 하자.
→ #ff0000에서 빨강은 ff 최대의 값이고, 초록과 파랑은 00으로 없다.
- 다양한 크기 단위
→ width, height, font-size, padding, margin 등을 넣을 때 px이라는 단위를 사용
→ px 말고도 크기를 나타내는 다양한 단위가 있는데 크기를 나타내는 단위는 절대적인 단위와
상대적인 단위 두 가지가 있다.
→ 절대적인 단위는 대표적으로 픽셀(px)가 있고, 상대적인 단위는 대표적으로 %, em, rem이 있다.
→ pixel per Inch, PPI는 모니터에서 1인치 정사각형 안에 픽셀이 몇 개나 들어가는지 나타내는 단위
→ 모니터에 따라서 보여주는 크기는 조금씩 다를 수 있다.
→ em과 rem은 글자 크기를 기준으로 상대적인 크기를 정하는 것
→ 페이지의 글꼴 크기를 전체적으로 다루고 싶다면 html의 font-size만 px로 정할 수 있다.
→ em과 rem은 font-size 말고도 다양한 곳에서 사용할 수 있다.
→ 글자 크기에 맞춰서 여백을 주고 싶다면 위와 같이 사용할 수 있다.
- 기본 개념 정리
CSS 규칙
선택자 {
속성: 속성값;
속성: 속성값;
}
→ CSS 속성을 하나하나 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용하는 걸 권장
CSS 선택자
→ 규칙에서 요소를 선택하는 데 사용하는 부분
(1) 태그 이름
→ h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용
→ 예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 작성
h3 {
font-size: 24px;
}
(2) 아이디 (id)
→ 맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법으로 작성
→ 아이디는 한 페이지 안에서 중복으로 쓸 수 없다.
→ 예를 들어서 아이디 이름이 hallasan인 태그에 글자색을 넣으려면 아래와 같이 작성
<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>
#hallasan {
color: #f56513;
}
(3) 클래스 (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;
}
색상 단위
(1) 색상 이름
→ red, green, yellow 같은 영어로 된 색상 이름
→ 세세한 색 표현이 어려워서 자주 쓰지는 않는다.
(2) 색상 코드
→ 샵(#)으로 시작하는 여섯 글자의 코드
→ 빨강, 초록, 파랑 값을 0 ~ 255 사이 정수로 표현한 다음, 이걸 16진수로 만들어서
각각 두 글자씩, 총 여섯 글자를 연속으로 써놓은 값
#FFFF00
(3) RGB
→ 빨강, 초록, 파랑 값을 우리가 평소에 쓰는 10진수로 써서 색상
→ 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값
rgb(255, 255, 0)
(4) RGBA
→ 빨강, 초록, 파랑, 알파 값을 순서대로 써서 색상을 나타낸다.
→ 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값이고, 알파는 0 ~ 1 사이의 소수 값
→ 알파 값은 1에 가까울수록 불투명해지고, 0에 가까울수록 투명
rgba(255, 255, 0, 0.5)
절대적인 크기 단위
(1) 픽셀 px
→ 절대적인 단위로서 화면을 표시하는 기준이 되는 크기
상대적인 크기 단위
(1) 퍼센트 %
→ 부모 태그의 크기에 상대적으로 지정할 때 사용
<div id="parent">
저는 높이가 320px입니다.
<div id="child">
저는 높이가 160px이에요!
</div>
</div>
#parent {
background-color: #A655ED;
height: 320px;
}
#child {
background-color: #6942D6;
height: 50%;
}
(2) em
→ em은 전통적으로 인쇄술에서 대문자 M의 크기를 나타내는 단위
→ CSS에서 em은 부모 태그 font-size의 크기
<div id="parent">
저는 16px입니다.
<div id="child">
저는 64px이에요!
</div>
</div>
#parent {
font-size: 16px;
}
#child {
font-size: 4em;
}
(3) rem
→ rem은 루트(root) em이라는 의미의 단위
→ CSS에서 rem은 <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;
}
- 코멘트
코멘트 문법
/* 찜하기 버튼 */
.zzim-button {
font-size: 24px;
padding: 8px;
}
→ 코멘트는 /* 로 시작해서 */ 로 끝나는 코드
→ 코드를 읽는 사람들을 위한 거고, 실행에는 아무런 영향을 주지 않는다.
/*
마켓 코드잇 CSS
v1.5.0
*/
/* 찜하기 버튼 */
.zzim-button {
font-size: 24px;
padding: 8px; /* 임시로 정한 값 */
}
→ 이런 식으로 코멘트는 여러 줄로 쓸 수도 있고, CSS 규칙 안에도 들어갈 수 있다.
코멘트는 언제 다는 게 좋을까?
→ 코멘트는 실행에 영향을 주지 않으니 얼마든지 사용할 수 있으나, 너무 많이 달게 되면 읽기 어렵다
→ CSS 선택자를 쉽게 이해할 수 있도록 고쳐 본다.
그럼에도 이해가 어려울 거 같다면 코멘트를 달아본다.
- CSS 버전
CSS 버전이란?
→ 웹 사이트를 만드는 기술은 지금도 계속 발전하고 있고, CSS도 마찬가지로 계속해서 변화하는 기술
→ 1996년 맨 처음 CSS 버전 1이 나온 이후로 버전 2, 버전 3까지 나왔다.
옛날 버전도 쓸 수 있어요
→ 월드와이드 웹은 1991년부터 본격적으로 쓰기 시작
→ 만들어진 지 오래된 사이트들도 많다.
이런 경우를 대비해서 CSS는 항상 옛날 버전을 지원하면서 다음 버전으로 넘어간다.
이런 걸 하위 호환성(backwards compatibility)이라고 한다.
→ 최신 브라우저에서는 반드시 옛날 CSS 문법도 호환
CSS4는 없다
→ CSS는 세계 곳곳에서 사용하는 기술이기 때문에, 여러 나라의 사람들이 모여서
논의하고 하나의 표준으로 정한다.
→ 논의를 통해서 CSS1, CSS2, CSS3 이런 식으로 새로운 버전들을 만들어 왔는데
이렇게 하면 한 가지 단점이 있다.
→ 어떤 기능은 논의가 오래 걸리고, 어떤 기능은 논의가 금방 끝나기 때문에 논의가 오래 걸리는
기능 때문에 다른 기능들을 못 쓴다
→ 그래서 나온 해결책이 바로 모듈(Module)이다.
CSS 전체를 하나의 버전으로 발전시키는 게 아니라 비슷한 기능들끼리 모듈이라는 이름으로 모아서 발전
이 모듈에다가 버전 같은 레벨(Level)을 붙이게 된다.
