CSS는 HTML이 표현되는 방법을 결정하며 웹페이지를 꾸미는 역할을 담당한다.
CSS를 통해 더 나은 사용자 경험(UX, User Experience)를 제공할 수 있다.
- 컨텐츠의 배치와 위치(레이아웃)
- 타이포그래피(Typography)
HTML파일에 CSS파일 추가
<link>태그 안에서 href 속성을 통해 파일을 연결- CSS는 Style Sheet이기 때운에 rel속성에 stylesheet을 추가
<link rel="stylesheet" href="layout.css" />✅ <link>태그는 <head>영역에 추가하며 외부 문서와 연결시키는 태그이다.
CSS 문법
CSS는 선택자(Selector), 선언블록(Declaration Block)으로 이루져 있다. 선언 블럭안에는 속성명(Property) : 속성값(Value)로 구성된 선언(Declaration)이 있는데 선언들은 선언구분자(;)로 구분된다.
선택자(Selector)
| id | class |
|---|---|
#을 사용해 선택 | .사용을 사용해 선택 |
| 한 문서에 하나의 요소에만 적용 | 한 문서의 여러 요소에 적용 가능 |
✅ id 선택자 : #
#sidebar {
color: blueviolet;
}✅ class 선택자 : .
.posting {
background-color: antiquewhite;
width: 450px;
height: 500px;
}✅ 그룹 선택자 : ,
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}✅ 자손 결합자 : 공백
.posting img {
width: 400px;
height: 300px;
object-fit: cover;
}✅ 자식 결합자 : >
.postlist > .pl-element > .posting {
background-color: antiquewhite;
width: 450px;
height: 500px;
}✅ 일반 형제 결합자 : ~
.posting-title ~ .posting-summary {
overflow: auto;
}⇒ posting-title클래스와 같은 부모를 공유하는 posting-summary클래스를 선택
✅ 인접 형제 결합자 : +
menulist + .linkSection {
color: slategray;
}⇒ menulist클래스와 인접 형제인 linkSection클래스를 선택
폰트
- 글꼴은 font-family 속성을 사용해 변경할 수 있다.
- 크기는 font-size 속성을 사용해 변경할 수 있다.
정렬
- 가로정렬 : text-align 사용, value로는 left, right, center, justify
- 세로정렬 : vertical-align을 사용하지만, 부모요소의 display 속성이 table-cell이어야 함.
단위
- 절대 단위 : px, pt 등
- 상대 단위 : %, em, rem, ch, vw, vh 등
반응형 웹(Responsive Web)
- 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹 페이지
- 디바이스의 크기 별로 CSS를 달리 적용
- 디바이스의 크기를 나누는 기준은 px
박스 모델
| block | inline-block | inline | |
|---|---|---|---|
| 줄바꿈 여부 | 가능 | 불가능 | 불가능 |
| 기본 너비(width) | 100% | 컨텐츠의 크기 | 컨텐츠의 크기 |
| width, height 사용 여부 | 가능 | 가능 | 불가능 |
박스 구성 요소
border(테두리)
- 테두리는 심미적인 크기 외에도 영역이 차지하는 크기를 파악하는 용도로, 레이아웃을 만들면서 크기를 시작적으로 확인할 때 사용할 수 있다.
p {
border: 1px dashed salmon;
border-radius: 30px;
box-shadow: 10px 5px 5px red;
}✅ border 속성 순서 : 두께(border-width), 스타일(border-style), 색상(border-color)
+border-radius : 꼿짓점을 둥글게 만드는 속성
+box-shadow : 그림자를 만드는 속성
margin(바깥 여백)
요소와 요소 사이
p {
margin: 10px 20px 30px 40px;
}✅ margin 속성 순서 : 시계방향(top, right, bottom, left)
- 2개만 사용 시 : bottom, left 적용
- 1개만 사용 시 : 모든 방향 적용 +값으로는 음수 사용 가능(다른 요소와 간격이 줄어듦)
padding(안쪽 여백)
요소와 컨텐츠 사이
p {
padding: 10px 20px 30px 40px;
}✅ margin과 동일
overflow
컨텐츠의 크기가 박스의 크기보다 커서 컨텐츠가 박스 밖으로 벗어나는 경우 처리할 수 있는 속성으로 박스 안에 스크롤을 추가하거나 표시하지 않아 크기에 맞게 컨텐츠를 조절해준다.
p {
overflow: auto;
}- auto : 컨텐츠가 넘칠 경우 스크롤 생성
- hidden : 컨텐츠가 넘칠 경우 숨기기
- overflow-x, overflow-y속성을 이용해 방향 지정 가능
border-box
* {
box-sizing: border-box;
}- 모든 박스에서 여백과 테두리를 포함한 크기로 계산
- 일반적으로 HTML 문서 전체에 적용
❗️content-box는 여백, 테두리를 포함하지 않은 크기로 계산하기 때문에 boder-box 계산법을 권장
✅ 선택자 정보 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
