CSS / selector 정리

학습강의

nomadcoders.co/kokoa-clone/lobby

 

block : not come to the next

- 높이와 너비가 있음

- 특징 : margin, padding, border

 

inline : in the same line

- 대표: <span>, <a>, <img>

- 높이와 너비를 가질 수 없음

- padding은 상하좌우 적용 가능

- margin은 좌우만 적용

 

margin: vertical horizontal

margin: top right bottom left

 

collapsing margin

- 두 박스의 경계가 같을 때 두 박스의 경계를 하나로 봄

- 수직 방향으로만 일어남

 

id는 unique 해야함

class는 여러 곳에서 사용 가능

 

inline-block

- block처럼 높이 너비 margin 모두 적용 가능하면서

- inline처럼 옆에 올 수 있다.

- 요소 사이에 빈 공간이 생기는 문제

- 반응형 디자인 지원 X

 

flexbox

- 자식 엘리먼트아닌 부모 엘리먼트에만 얘기함

- 부모 엘리먼트에 display : flex;

   - 부모의 부모가 flex인지의 여부는 자식 엘리먼트에 영향을 미치지 않음

- main axis is by default horizontal, cross axis is by default vertical

- justify-content(works on main axis) : center, flex-start(default), flex-end, space-evenly, space-between 등

- align-items(works on cross axis)

- 반응형 디자인 지원

- flex-direction: default by row

- flex-wrap

   - nowrap : flexbox들을 같은 줄에 있게 하기위해 width와 상관없이 크기를 바꿈. width는 초기 사이즈로만 여김

   - wrap : width를 고려하여 한 줄에 들어가는 만큼만 넣고 아니면 다음 줄로 넘김 

 

 

position:fixed

- 스크롤과 상관없이 항상 그 자리에 머묾

- top, left, right, bottom 중 하나만 수정해도 다른 요소를 상관 않고 명시된 대로 따름

   - 서로 다른 레이어(앞쪽 레이어)에 위치하기 때문

 

position: static

- default

- 레이아웃이 박스를 처음 위치하는 곳에 두는 것

 

position: relative

- 현재 위치한 곳을 기준으로 조금 옮기고 싶을 때 유용

- top, left, right, bottom

 

position:absolute

- position:relative 를 가진 가장 가까운 부모 엘리먼트 기준으로 이동. 아닐 시에는 body 기준으로 이동

 

pseudo seletor

-div:first-child

-span:nth-child(2)

-span:nth-child(even)

 

combinators

- div  span : children

- div > span : direct children

- p+span : direct brother

- p~span : brother

 

attribute

- input:required

- input[type="password"]

 

state

:actove, :hover, :focus, :visited, :focus-within