02_css -작심 10시간! 나만의 웹사이트 기획하고 만들기
TRANSCRIPT
SULLIVAN PROJECT
목차
1. 오늘 우리가 할 것은?
2. CSS란?
3. CSS를 사용하는 방법
4. Selector(선택자)
5. CSS의 Property들
6. 혼자서 만들어보자!
HTML CSS JAVASCRIPT
Front-end
back-end
HTML CSS JAVASCRIPT
Front-end
back-end
CSS
CSS
Cascading StyleSheets
꾸며주는 놈
Selector { property: value; }
CSS 기본 문법
세미콜론(;)을 붙이는 습관을 기르는 것이 좋아요 (매우 중요)
CSS를 사용하는 방법 3가지
HTML파일 내에서 사용하는 방법
1. style 속성
2. style 태그
<TAG style=“css코드”>
<style> css코드 </style>
보통 head 안에서 쓴다.
.css 파일을 따로 만들고 html 파일로 로드하는 방법
중요(가장 많이 사용됨)
***
<link rel=“stylesheet” href=“css파일경로”>
경로
절대적인 경로값(ex - C:₩어쩌구₩저쩌구)
매우 중요(기본 지식)
********
상대경로
절대경로
상대적인 경로값(ex - ./a.html)
.(현재 폴더), ..(상위폴더)
상대경로 연습
a.html
.(현재 폴더) ..(상위폴더)
HTML
b.css
CSS
One Two
c.css
(다시)CSS 기본 문법
Selector { property: value; }
꾸미고자하는 대상을 가리키는 것
Selector(선택자)
주요 Selector
태그명 { property: value; }
#id { property: value; }
.class { property: value; }
태그명
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>
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>
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>
(또 다시)CSS 기본 문법
Selector { property: value; }
하나씩 쳐보면서 알아보자
text -align
-decoration
font -size
-weight-family
-color
background-color
-size
-position
그냥 사용가능
Selector { property-option: value; }
Option
옵션이라는 용어는 편의상 부르는 말이므로 굳이 용어를 외울 필요는 없음.
color
widthheight
auto...
px
pt
em
Color name
#COLORCODE(HEX)
rgb(red, green, blue)
rgba(red, green, blue, alpha)
align left
center
right
Value
말 그대로 값이다
margin / padding
margin:0px;
마진
상
하
우좌
padding:0px;
패딩
상
하
우좌
margin:10px;
마진
상
하
우좌
padding:10px;
패딩
상
하
우좌
margin:Opx; 마진
margin / padding 사용법
적용방향
O : 숫자
margin:Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자
margin:Opx Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자
margin:Opx Opx Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자
margin-left:Opx;
마진
margin / padding 사용법
적용방향
O : 숫자
margin-right:Opx;
margin-top:Opx;
margin-bottom:Opx;
position
relative absolute fixed
fixed
display
block
inline
inline-block
none
block
inline
inline-block
none
단락을 방해하지 않는다 width와 height를 바꿀 수 없다
block
inline
inline-block
none
단락을 방해하지 않는다 width와 height를 바꿀 수 없다
block
inline
inline-block
none
단락을 방해하지 않는다 width와 height를 바꿀 수 없다
block
inline
inline-block
none
단락을 방해하지 않는다 width와 height를 바꿀 수 없다
대표 inline 태그 - span, a 등
block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
대표 block 태그 - div, header, section, footer 등
block
inline
inline-block
none
생성은 inline처럼!! 크기 변경은 block처럼!!
block
inline
inline-block
none
생성은 inline처럼!! 크기 변경은 block처럼!!
block
inline
inline-block
none
생성은 inline처럼!! 크기 변경은 block처럼!!
block
inline
inline-block
none
안 보 인 다
이것들을 활용해서 직접 만들어보자!
(물론 이것들만으로는 안됨)
350px
100px
350px
padding 5px
HTML CSS JAVASCRIPT
Front-end
back-end
HTML CSS JAVASCRIPT
Front-end
back-end
JAVASCRIPT
JAVASCRIPT