CSS란?

CSS 의미, 정의

CSS(Cascading Style Sheet)

cascading: 위에서 아래로 흐르는 느낌.

Style

• Author Style
  • 우리가 사용하는 CSS 파일
• User Style
  • 사용자의 취향에 맞게 브라우저에서 변환한 Style
• Browser
  • Browser에서 정의한 Style

우선순위: Author > User Style > Browser 

!important 가장 최우선으로 적용

 

Selectors(선택자)

Universal	* (all)
type	Tag
ID	#id
Class	.class
state	:
Attribute	[]

 

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

 

CSS 게임으로 알아보기

CSS Diner

 

스타일링

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

display

inline: 물건 자체만을 꾸며줌. 물건의 크기에 맞춰 변경.

inline-block: 한줄에 여러개 넣는데 상자로 변환되어서 지정한 width, height에 맞춰 표기

block: 한줄에 하나씩 표기되는 상자

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

position

relative: 원래 있어야 하는 아이템에서 옮겨간 것(default)

absolute: 내가 담겨 있는 상자 안에서 옮겨간 것

fixed: 상자를 벗어나서 페이지 상에서 옮겨간 것

sticky: 원래 있어야 하는 아이템 자리 그대로. 스크롤 영향을 받지 않음.

헷갈리는 컨셉

 

CSS 꽃: FlexBox

float

이미지와 텍스트를 어떻게 배치하는 용도

left, center, right

 

container-item

container	item
display flex-direction flex-wrap flex-flow justify-content align-items align-content	order flex-grow flex-shrink flex align-self

 

중심축을 어디에 두냐에 따라 달라짐.

 

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

100%: 부모 높이의 100%

100vh: 부모에 상관없이 보이는 화면의 100%를 사용.

 

display: flex

flex-direction

row(기본값) 왼쪽 -> 오른쪽

row-rverse: 오른쪽 -> 왼쪽

column: 위 ->  아래

column -rverse: 아래 -> 위

 

flex-wrap

nowrap(기본값): 무조건 한줄에 item이 나열됨.

wrap: 화면에 맞게 item들이 나열됨.

wrap-reverse: 아래서부터 화면에 맞게 item들이 나열됨.

 

felx-flow(flex-direction + flex-wrap)

row nowrap

 

jusify-content

flex-end: item 순서는 유지한채 아래에 배치.

space-around

space-evenly

spave-between: 중간에만 공백

 

align-items

baseline

align-content

 

See the Pen Untitled by YoonJung Lee (@YoonJung-Lee) on CodePen.

flex-grow:items이 늘어날때 비율 설정 가능, 0(기본값)

flex-shrink: items이 줄어드는 비율 설정 가능 , 0(기본값)

flex-basis: items 커질때도, 작아질때도, 퍼센트로 설정가능, auto(기본값)

 

align-self: item중 item 개별로 수정하고 싶을때 사용