CSS
HTML이라는 뼈대에 피부를 입히기
슬라이드 보는 법
| → / Space | 다음으로 |
| ← | 이전으로 |
| ↓ / ↑ | 같은 주제 안에서 단계 이동 |
| O | 전체 슬라이드 한눈에 보기 |
| F | 전체화면 |
아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다
오늘 끝나면 할 수 있는 것
- HTML 요소를 골라서 스타일을 입힌다 —
id,class - 글자의 크기 · 색 · 정렬을 바꾼다
- 박스의 테두리와 여백을 다룬다
- 여러 요소를 원하는 위치에 배치한다
CSS란?
CSS란?
HTML이라는 뼈대에
피부를 입히는 것
CSS란?
어떤 스타일을 입힐 수 있는지 배우기 전에
먼저 어떻게 입히는지부터 배워봅시다
오늘 배울 것
- id & class — 어디에 스타일을 입힐 것인가
- 다양한 CSS 속성들 — 어떤 스타일을 입힐 것인가
2. 다양한 CSS 속성들
- 2-1. font-size — 글자 크기
- 2-2. color — 색상
- 2-3. text-align — 텍스트 정렬
- 2-4. Box Model — 테두리와 여백
- 2-5. box-sizing — 크기 계산 기준
- 2-6. display — 요소가 쌓이는 방식
- 2-7. flexbox — 가로세로 배치
1. id & class
어디에 스타일을 입힐 것인가
1. id & class
<h1>제목1입니다</h1>
<h1>제목2입니다</h1>
1. id & class
<h1 id="title1">제목1입니다</h1>
<h1 class="title2">제목2입니다</h1>
1. id & class
<h1 id="title1">제목1입니다</h1>
<h1 class="title2">제목2입니다</h1>
#title1 {
/* 여기에 스타일 속성 작성 */
}
.title2 {
/* 여기에 스타일 속성 작성 */
}
1. id & class
<h1 id="title1">제목1입니다</h1>
<h1 class="title2">제목2입니다</h1>
#title1 {
속성이름: 속성값;
}
.title2 {
속성이름: 속성값;
}
1. id & class
<h1 id="title1">제목1입니다</h1>
<h1 class="title2">제목2입니다</h1>
#title1, .title2 {
/* 여기에 스타일 속성 작성 */
}
1. id & class
<h1 id="title1">제목1입니다</h1>
<h1 class="title2">제목2입니다</h1>
#title1, .title2 {
속성이름: 속성값;
}
1. 정리
#이름— id로 고른다. 한 페이지에 하나만.이름— class로 고른다. 여러 개에 붙여도 된다A, B— 콤마로 묶으면 같은 스타일을 한 번에
2. 다양한 CSS 속성들
어떤 스타일을 입힐 것인가
2-1. font-size
글자 크기를 조정하려면
2-1. font-size
불변: px
가변: rem
2-1. font-size
사용자가 브라우저 글자 크기를 바꿨을 때
px는 크기가 그대로인 반면,
rem은 그 설정에 맞춰 함께 조정된다
2-1. font-size
<p class="px">px</p>
<p class="rem">rem</p>
.px {
font-size: 100px;
}
.rem {
font-size: 5rem;
}
2-1. font-size
.px {
font-size: 100px;
}
.rem {
font-size: 5rem;
}
px
rem
2-1. 정리
px— 딱 그 크기로 고정rem— 기준 크기의 배수 (1rem = 16px)- 본문 글자는
rem을 쓰는 편이 좋다
2-2. color
글자에 색상을 지정하려면
2-2. color
tomato색 이름rgb(100, 50, 230)RGB#01A34F헥사코드색을 지정하는 방법은 크게 세 가지
2-2. color
<p>Hello World</p>
p {
/* Hello World의 색상을 빨간색으로 설정하려면 */
}
2-2. color
<p>Hello World</p>
p {
color: red;
}
여기서 color에 red를 넣으면?
2-2. color
<p>Hello World</p>
p {
color: red;
}
Hello World
2-2. color
<p>Hello World</p>
p {
/* Hello World의 색상을 파란색으로 설정하려면 */
}
2-2. color
<p>Hello World</p>
p {
color: blue;
}
여기서 color에 blue를 넣으면?
2-2. color
<p>Hello World</p>
p {
color: blue;
}
Hello World
2-2. color
<p>Hello World</p>
p {
/* 저는 토마토색이 좋은데요 */
}
2-2. color
<p>Hello World</p>
p {
color: tomato;
}
여기서 color에 tomato를 넣으면?
2-2. color
<p>Hello World</p>
p {
color: tomato;
}
Hello World
2-2. color
<p>Hello World</p>
p {
/* 저는 핫핑크로 할래요 */
}
2-2. color
<p>Hello World</p>
p {
color: hotpink;
}
여기서 color에 hotpink를 넣으면?
2-2. color
<p>Hello World</p>
p {
color: hotpink;
}
Hello World
2-2. color
<p>Hello World</p>
p {
/* RGB를 이용하려면 */
}
2-2. color
<p>Hello World</p>
p {
color: rgb(100, 50, 230);
}
여기서 color에 rgb(100, 50, 230)를 넣으면?
2-2. color
<p>Hello World</p>
p {
color: rgb(100, 50, 230);
}
Hello World
2-2. color
<p>Hello World</p>
p {
/* 헥사코드를 이용하려면 */
}
2-2. color
<p>Hello World</p>
p {
color: #01A34F;
}
여기서 color에 #01A34F를 넣으면?
2-2. color
<p>Hello World</p>
p {
color: #01A34F;
}
Hello World
2-2. 정리
red,tomato— 정해진 색 이름rgb(r, g, b)— 빛 삼원색을 0~255로#RRGGBB— 같은 값을 16진수로. 실무 표준
2-3. text-align
텍스트의 위치를 조정하려면
2-3. text-align
<p>Hello World</p>
Hello World
2-3. text-align
<p>Hello World</p>
p {
text-align: center;
}
Hello World
2-3. text-align
<p>Hello World</p>
p {
/* 왼쪽으로 옮기고 싶으면 */
}
Hello World
2-3. text-align
<p>Hello World</p>
p {
text-align: left;
}
Hello World
2-3. text-align
<p>Hello World</p>
p {
/* 오른쪽으로 옮기고 싶으면 */
}
Hello World
2-3. text-align
<p>Hello World</p>
p {
text-align: right;
}
Hello World
2-3. 정리
left— 왼쪽 (기본값)center— 가운데right— 오른쪽
글자를 옮기는 것이지, 상자를 옮기는 것이 아니다
2-4. Box Model
박스를 꾸미고 싶으면
2-4. Box Model
margin
border
padding
content
모든 요소는 이렇게 네 겹으로 되어 있다
2-4. Box Model
<p>Hello World</p>
p {
/* 텍스트 상자에 테두리를 그리려면 */
}
Hello World
2-4. Box Model
<p>Hello World</p>
p {
border: 10px solid red;
}
Hello World
2-4. Box Model
<p>Hello World</p>
p {
border: 10px solid red;
/* 크기를 지정하려면 */
}
Hello World
2-4. Box Model
<p>Hello World</p>
p {
border: 10px solid red;
width: 7rem;
height: 7rem;
}
Hello World
2-4. Box Model
<p>Hello World</p>
p {
border: 10px solid red;
width: 7rem;
height: 7rem;
/* 상자를 조금 떨어뜨리고 싶어요 */
}
Hello World
2-4. Box Model
<p>Hello World</p>
p {
border: 10px solid red;
width: 7rem;
height: 7rem;
margin: 3rem;
}
Hello World
2-4. Box Model
<p>Hello World</p>
p {
border: 10px solid red;
width: 7rem;
height: 7rem;
/* 안쪽에 간격을 주려면 */
}
Hello World
2-4. Box Model
<p>Hello World</p>
p {
border: 10px solid red;
width: 7rem;
height: 7rem;
padding: 2rem;
}
Hello World
2-4. 정리
border— 테두리padding— 테두리 안쪽 여백margin— 테두리 바깥쪽 여백
2-5. box-sizing
박스의 크기를 조정하려면
2-5. box-sizing
가로세로를 똑같이 줬는데도
테두리 두께 때문에 실제 크기가 달라질 수 있다
2-5. box-sizing
<div class="small">small</div>
<div class="large">large</div>
.small, .large {
width: 10rem;
height: 5rem;
margin: 5px;
}
.small {
border: 10px solid red;
}
.large {
border: 30px solid blue;
}
2-5. box-sizing
.small, .large {
width: 10rem;
height: 5rem;
margin: 5px;
}
.small {
border: 10px solid red;
}
.large {
border: 30px solid blue;
}
2-5. box-sizing
.small, .large {
width: 10rem;
height: 5rem;
margin: 5px;
box-sizing: border-box;
}
.small {
border: 10px solid red;
}
.large {
border: 30px solid blue;
}
?
여기에 box-sizing: border-box를 넣으면?
2-5. box-sizing
.small, .large {
width: 10rem;
height: 5rem;
margin: 5px;
box-sizing: border-box;
}
.small {
border: 10px solid red;
}
.large {
border: 30px solid blue;
}
2-5. 정리
content-box— 기본값. width는 내용만border-box— padding, border까지 포함해서 width- 실무에서는 대부분
border-box로 통일해두고 시작한다
2-6. display
요소가 어떻게 쌓일지 정하려면
2-6. display
지금까지 <p>를 여러 개 쓰면
항상 세로로 쌓였습니다. 왜 그럴까요?
2-6. display
block— 한 줄을 통째로 차지 (div, p, h1 …)inline— 글자 크기만큼만 차지 (span, a, strong …)
모든 요소는 기본 display 값을 가지고 있다
2-6. display
<div>block 1</div>
<div>block 2</div>
block 1
block 2
2-6. display
<span>inline 1</span>
<span>inline 2</span>
inline 1 inline 2
2-6. display
span {
width: 10rem;
height: 5rem;
border: 3px solid orange;
}
inline
2-6. display
span {
width: 10rem;
height: 5rem;
border: 3px solid orange;
/* 크기는 주고 싶은데 줄바꿈은 싫어요 */
}
inline
2-6. display
span {
width: 10rem;
height: 5rem;
border: 3px solid orange;
display: inline-block;
}
inline-block inline-block
2-6. display
.hidden {
display: none;
}
보이는 상자
보이는 상자
2-6. 정리
block— 줄 전체를 차지, 크기 지정 가능inline— 글자만큼만, 크기 지정 불가inline-block— 옆으로 붙으면서 크기도 가짐none— 자리까지 통째로 사라짐
2-7. flexbox
여러 요소를 원하는 위치에 배치하려면
2-7. flexbox
inline-block으로 가로 배치는 됐지만
가운데 정렬과 간격 조절은 여전히 번거롭습니다
2-7. flexbox
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.box {
/* 자식들을 가로로 세우려면 */
}
1
2
3
2-7. flexbox
.box {
display: flex;
}
1
2
3
2-7. flexbox 가로 정렬
.box {
display: flex;
justify-content: center;
}
1
2
3
2-7. flexbox 가로 정렬
.box {
display: flex;
justify-content: space-between;
}
1
2
3
2-7. flexbox 세로 정렬
.box {
display: flex;
height: 8rem;
align-items: center;
}
1
2
3
2-7. flexbox 간격
.box {
display: flex;
gap: 2rem;
}
1
2
3
2-7. flexbox 정가운데
.box {
display: flex;
justify-content: center;
align-items: center;
height: 10rem;
}
가운데
2-7. 정리
display: flex— 부모에게 준다justify-content— 가로 방향 정렬align-items— 세로 방향 정렬gap— 자식들 사이 간격
3. 정리
오늘 배운 것
어떻게 입히는가
#id— 한 요소를 콕 집어서.class— 여러 요소를 묶어서
무엇을 입히는가
| font-size | 글자 크기 — px 고정 / rem 가변 |
| color | 글자 색 — 이름 / rgb / 헥사코드 |
| text-align | 글자 정렬 — left / center / right |
| border, padding, margin | 박스의 테두리와 안팎 여백 |
| box-sizing | border-box로 크기 계산 통일 |
| display | block / inline / inline-block / none |
| flex | justify-content, align-items, gap |
4. 실습
직접 만들어봅시다
4. 실습 과제
- 프로필 카드 하나 — 이름, 한 줄 소개, 테두리
- 카드 3개를 가로로 나란히, 사이 간격은
gap - 화면 정가운데로 —
justify-content+align-items
오늘 배운 속성만으로 전부 만들 수 있습니다
더 볼 것
- MDN CSS 문서 — 속성이 기억 안 날 때
- Flexbox Froggy — flex를 게임으로
- CSS Grid — flex 다음 단계
끝
수고하셨습니다