02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
Transcript of 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
![Page 1: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/1.jpg)
SULLIVAN PROJECT
![Page 2: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/2.jpg)
목차
1. 오늘 우리가 할 것은?
2. CSS란?
3. CSS를 사용하는 방법
4. Selector(선택자)
5. CSS의 Property들
6. 혼자서 만들어보자!
![Page 3: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/3.jpg)
HTML CSS JAVASCRIPT
Front-end
back-end
![Page 4: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/4.jpg)
HTML CSS JAVASCRIPT
Front-end
back-end
![Page 5: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/5.jpg)
CSS
![Page 6: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/6.jpg)
CSS
![Page 7: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/7.jpg)
Cascading StyleSheets
![Page 8: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/8.jpg)
꾸며주는 놈
![Page 9: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/9.jpg)
Selector { property: value; }
CSS 기본 문법
세미콜론(;)을 붙이는 습관을 기르는 것이 좋아요 (매우 중요)
![Page 10: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/10.jpg)
CSS를 사용하는 방법 3가지
![Page 11: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/11.jpg)
HTML파일 내에서 사용하는 방법
1. style 속성
2. style 태그
<TAG style=“css코드”>
<style> css코드 </style>
보통 head 안에서 쓴다.
![Page 12: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/12.jpg)
.css 파일을 따로 만들고 html 파일로 로드하는 방법
중요(가장 많이 사용됨)
***
<link rel=“stylesheet” href=“css파일경로”>
![Page 13: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/13.jpg)
경로
절대적인 경로값(ex - C:₩어쩌구₩저쩌구)
매우 중요(기본 지식)
********
상대경로
절대경로
상대적인 경로값(ex - ./a.html)
.(현재 폴더), ..(상위폴더)
![Page 14: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/14.jpg)
상대경로 연습
a.html
.(현재 폴더) ..(상위폴더)
HTML
b.css
CSS
One Two
c.css
![Page 15: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/15.jpg)
(다시)CSS 기본 문법
Selector { property: value; }
![Page 16: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/16.jpg)
꾸미고자하는 대상을 가리키는 것
Selector(선택자)
![Page 17: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/17.jpg)
주요 Selector
태그명 { property: value; }
#id { property: value; }
.class { property: value; }
![Page 18: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/18.jpg)
태그명
p { property: value; }
<p id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
![Page 19: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/19.jpg)
id? class?
#id_1 { property: value; }
<p id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
![Page 20: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/20.jpg)
id? class?
.class_1 { property: value; }
<p id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
![Page 21: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/21.jpg)
(또 다시)CSS 기본 문법
Selector { property: value; }
![Page 22: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/22.jpg)
하나씩 쳐보면서 알아보자
![Page 23: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/23.jpg)
text -align
-decoration
font -size
-weight-family
-color
background-color
-size
-position
그냥 사용가능
Selector { property-option: value; }
Option
옵션이라는 용어는 편의상 부르는 말이므로 굳이 용어를 외울 필요는 없음.
![Page 24: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/24.jpg)
color
widthheight
auto...
px
pt
em
Color name
#COLORCODE(HEX)
rgb(red, green, blue)
rgba(red, green, blue, alpha)
align left
center
right
Value
말 그대로 값이다
![Page 25: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/25.jpg)
margin / padding
![Page 26: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/26.jpg)
margin:0px;
마진
상
하
우좌
padding:0px;
패딩
상
하
우좌
![Page 27: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/27.jpg)
margin:10px;
마진
상
하
우좌
padding:10px;
패딩
상
하
우좌
![Page 28: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/28.jpg)
margin:Opx; 마진
margin / padding 사용법
적용방향
O : 숫자
![Page 29: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/29.jpg)
margin:Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자
![Page 30: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/30.jpg)
margin:Opx Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자
![Page 31: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/31.jpg)
margin:Opx Opx Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자
![Page 32: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/32.jpg)
margin-left:Opx;
마진
margin / padding 사용법
적용방향
O : 숫자
margin-right:Opx;
margin-top:Opx;
margin-bottom:Opx;
![Page 33: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/33.jpg)
position
![Page 34: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/34.jpg)
relative absolute fixed
![Page 35: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/35.jpg)
fixed
![Page 36: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/36.jpg)
display
![Page 37: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/37.jpg)
block
inline
inline-block
none
![Page 38: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/38.jpg)
block
inline
inline-block
none
단락을 방해하지 않는다 width와 height를 바꿀 수 없다
![Page 39: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/39.jpg)
block
inline
inline-block
none
단락을 방해하지 않는다 width와 height를 바꿀 수 없다
![Page 40: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/40.jpg)
block
inline
inline-block
none
단락을 방해하지 않는다 width와 height를 바꿀 수 없다
![Page 41: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/41.jpg)
block
inline
inline-block
none
단락을 방해하지 않는다 width와 height를 바꿀 수 없다
대표 inline 태그 - span, a 등
![Page 42: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/42.jpg)
block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
![Page 43: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/43.jpg)
block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
![Page 44: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/44.jpg)
block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
![Page 45: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/45.jpg)
block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
대표 block 태그 - div, header, section, footer 등
![Page 46: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/46.jpg)
block
inline
inline-block
none
생성은 inline처럼!! 크기 변경은 block처럼!!
![Page 47: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/47.jpg)
block
inline
inline-block
none
생성은 inline처럼!! 크기 변경은 block처럼!!
![Page 48: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/48.jpg)
block
inline
inline-block
none
생성은 inline처럼!! 크기 변경은 block처럼!!
![Page 49: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/49.jpg)
block
inline
inline-block
none
안 보 인 다
![Page 50: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/50.jpg)
이것들을 활용해서 직접 만들어보자!
(물론 이것들만으로는 안됨)
![Page 51: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/51.jpg)
![Page 52: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/52.jpg)
![Page 53: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/53.jpg)
350px
100px
350px
padding 5px
![Page 54: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/54.jpg)
![Page 55: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/55.jpg)
HTML CSS JAVASCRIPT
Front-end
back-end
![Page 56: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/56.jpg)
HTML CSS JAVASCRIPT
Front-end
back-end
![Page 57: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/57.jpg)
JAVASCRIPT
![Page 58: 02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.fdocument.pub/reader034/viewer/2022050806/58ed6f4d1a28abb40c8b4661/html5/thumbnails/58.jpg)
JAVASCRIPT