4장. CSS 문법과 적용 방식
4.1 CSS 문법 살펴보기
h1 {
color: red;
}- 선택자: 스타일을 적용할 HTML 요소를 지정
- 선언부: 적용할 속성과 값을
{}안에 작성 - 주석:
/* 주석 내용 */
4.2 CSS 적용 방식
- 내부 스타일 시트
<head>
<style>
h1 { color: red; }
</style>
</head>- 외부 스타일 시트
<link rel="stylesheet" href="style.css">- 확장자:
.css
- 인라인 스타일
<h1 style="color: red;">제목</h1>5장. 선택자 종류
5.1 기본 선택자
*전체 선택자h1태그 선택자#id아이디 선택자.class클래스 선택자[속성],[속성=값]속성 선택자
5.2 조합 선택자
- 그룹 선택자:
h1, p, div {} - 자식 선택자:
div > p {} - 하위 선택자:
div p {} - 인접 형제 선택자:
h1 + p {} - 일반 형제 선택자:
h1 ~ p {}
5.3 가상 요소 선택자
선택자::before { content: "텍스트"; }
선택자::after { content: "텍스트"; }5.4 가상 클래스 선택자
- 링크 관련:
:link,:visited - 동적 상태:
:hover,:active - 입력 상태:
:focus,:checked,:disabled,:enabled
구조적 선택자 예시:
E:first-childE:last-childE:nth-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:first-of-typeE:last-of-type
6장. CSS의 특징과 스타일 속성
6.1 CSS의 기본 특징
- 기본 스타일 시트: 브라우저에 내장된 기본 스타일
- 단계적 적용: 마지막 스타일이 적용됨
- 상속: 부모 스타일이 자식에게 전달됨
단위
-
절대 단위: px, cm 등
-
상대 단위:
%: 상위 요소 기준em: 부모 폰트 크기 기준rem: html 폰트 크기 기준vw: 뷰포트 너비 기준vh: 뷰포트 높이 기준
색상 표기
- 키워드: red, blue 등
- RGB / RGBA
- Hex:
#ff0000
6.2 텍스트 관련 속성
font-family: '돋움', sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
color: red;
text-align: center;
text-decoration: underline;
letter-spacing: 1px;
line-height: 1.5;6.3 박스 모델
- margin: 외부 여백
- border: 테두리
- padding: 내부 여백
- content: 실제 콘텐츠 영역
요소의 성격:
- 블록 요소:
div,p,h1 - 인라인 요소:
a,span - 인라인 블록:
img,button등
6.4 배경 속성
background-color: #eee;
background-image: url('img.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;background 속성 한 줄 요약
background: url('img.png') center/cover no-repeat fixed;6.5 위치 속성
position: static | relative | absolute | fixed;
top: 10px;
left: 20px;float / clear 속성
float: left;
clear: both;6.6 전환 효과 (transition)
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: ease-in-out;타이밍 함수 종류:
linear,ease,ease-in,ease-out,ease-in-outcubic-bezier(x1, y1, x2, y2)
6.7 애니메이션 효과 (animation)
@keyframes move {
from { left: 0; }
to { left: 100px; }
}
.box {
animation-name: move;
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
}6.8 변형 효과 (transform)
transform: translate(50px, 100px);
transform: scale(1.2, 0.8);
transform: rotate(45deg);6.9 웹폰트 / 아이콘 폰트
Google Fonts 적용 예시
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">아이콘 폰트 (Font Awesome 등)
간단한 <i class="fa fa-icon"> 사용으로 아이콘 표현 가능
