02_css -작심 10시간! 나만의 웹사이트 기획하고 만들기

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