TIL#2 | CSS

CSS

margin

margin-top: a;
margin-right: b;
margin-bottom: c;
margin-left: d;
margin: a b c d; 로 순서대로 적용 가능 (시계방향)

border

너비, 스타일, 색깔 순서로 기재

flex

1. 자식 element에게는 어떤 것도 적어서는 안된다
2. 주축(main axis) = 수평 = justify-content
   교차축(cross axis) = 수직 = align-items
   flex-drection: row;(기본값) /주축전환시? column;
column-reverse (상하반전 1,2,3 → 3,2,1 순서)

Position

1. fixed
-스크롤해도 항상 제자리에 머무른다. 처음 만들어진 자리에 고정
-단, top left right bottom 중 하나만 수정해도 서로 다른 레이어에 위치하게 되어 원래 위치가 무시된다.
-position fixed를 이용하면 가장 위에 위치하게 된다.(맨 앞)
2. static(default)
-처음 위치한 곳에 두는 것
3. relative
-element가 처음 생성된 위치를 기준점으로, top bottom left right으로 위치를 조금씩 수정할 수 있다.
4. absolute
-가장 가까운 relative 부모의 위치를 기준점으로 이동.
-position: relative; 를 해주면 부모가 된다.
-단 relative 부모가 아무도 없는 경우 body가 기준점

pseudo seletor

-:hover,:visited 등 어떤 상태를 만족해야만 실행
-좀 더 세부적으로 element를 선택해주는 것(기존 방법? 태그, id w/#, class w/.) → 선택의 복잡한 과정을 단순하게 처리 가능.
-class나 id를 만드는 것 보다 html을 건드리지 않고 쉽게 처리가능한 좋은 방법임

💡 Seletor 자체에 우선순위가 있어서 높은 쪽이 낮은쪽을 무시하고 실행(casacading 무시) (https://specificity.keegan.st/) 여기서 우선순위 계산가능

부모, 형제 element 지정하기

1. 부모 밑 자식에서 찾아서 효과주는 방법
-div span {}
: div 밑에 있는 모든 span이 효과를 가진다. 직접적 부모가 아니어도 밑에 있는 것들은 모두 css가 찾는다
2. 부모의 바로 밑 자식만 찾는 방법
-div > span {}
: div의 바로 밑 자식들만 찾게된다.
3. 형제를 찾아 효과를 주는 방법
-div + span {}
:div와 동등한 위치에 있는 span. 바로 옆에 위치하는=코드 상 바로 밑에 있는 span

1. *= is 'contains'
   :"hello" 라고 하면 ㅁㄴㄴㅇㄹhelloㅁㄴㄹ 라고 줘도 선택가능
   2. ~ = is 'exactly'
      :"hello" 하면 앞뒤에 공백이 있는 상태에서 hello 인 경우만 선택`