Css 각종 특징들 정리

 

 

 

flexbox

 

    1. 자식엘리먼트에 어떤 것도 적으면 안된다. 부모 엘리먼트만 명시한다

    div의 부모인 body에게 display :flex를 주면 body가 div를 조절할 수 있게 된다. 

    

    2. 주축과 교차축

        가로 (justify-content)  세로 (align-items)

 

    top,left,right등 하나라도 바꾸면 서로 완전히 레이어가 달라진다. 그래서 서로 신경을 안쓴다.  

    fixed 한 건은 가장 위에 있다. 

 

 

Position

 

  static 레이아웃이 박스를 처음 위치에 둔다. 

    relative는 element가 처음 위치한 곳을 기준으로 수정한다. 

    relative를 하면 top left right 등 설정가능 

    absolute는 가장 가까운 relative 부모를 기준으로 이동시켜준다. 

    만약 부모중에 relative가 없다면 body를 부모로 삼게 된다. 그렇게 하지 않으려면 

    부모에게 postition:relative 속성을 줘야함 

   

 

pseudo selector +selector

pseudo selector +selector를 사용해서 p tag다음에 오는 tag에 디자인 적용

   +는 바로 뒤에 와야하는데 

   바로 뒤에 오지 않을  때 사용할 수 있는 것이 ~ 이다. 

   ~ 는 형제 + 부모자식 

 

state

 

 state의 종류 

    hover , active(마우스가 클릭하고 있을 때) , focus (어떤 element가 focus되었을때)

    visited , focus-within (focus상태인 자식을 가진 부모 엘리먼트에 적용된다.)

 

 

combinator의 종류 

    space = p span (부모 자식)

    >   = p > span(부모와 직접 자식 )

    +  = p + span (element 바로 다음에 오는 형제관계)

    ~ = p ~ span(꼭 바로 다음에 오지 않아도 되는 형제관계)

 

 

    attribute 

    input [type="password"] password라는 type가진 input만 선택된다. 

    input [type~="password"] 

    끝에 올 경우에는 $ 처음은 ^ (~위치에)