[2주차] css selector - 6일차

1. css selector

코드스테이츠 유알클래스 css selector 개념학습

다음 페이지에 있는 퀴즈를 모두 이해할 때까지 css selector 복습해야 한다.

완전 중요하다고 생각한다.

2. margin, border, padding, content

2. 1. margin 과 padding을 구분하는 방법

• margin에서만 음수값과 margin:auto; 를 적용할 수 있다.

• margin과 다르게 padding은 background-color가 보이고 여백을 주기 위해서 padding을 늘려야 한다.

  

결론

• padding : border 안쪽으로, content를 주위로 여백이 생겨난다.
• margin : border 위쪽 기준으로 여백이 생겨난다.

2. 2. border-box 와 content-box의 차이

• border-box : 모든 박스에서 여백과 테두리를 포함 크기로 계산된다.

    300px (콘텐츠 영역)
  + 10px (padding-left)
  + 10px (padding-right)
  + 2px (border-left)
  + 2px (border-right)

• content-box : 박스의 크기를 측정하는 기본값

결론

대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.

어려웠던 점

1. css selector는 다양한 방법을 사용이 가능한데 각 개념이 무엇인지 알아도 실제 문제를 풀어보면 해당 셀렉터의 범위의 정답 여부를 알 수 없었다.
   차근차근 실습하면서 익혀나가겠지만, 복습이 많이 필요하다고 생각한다.

   실제로 현업 개발자 코치님께서 css.selector를 아예 사용하지 않는 것은 아니지만, 거의 사용하지 않는다고 하셨다. (그래서 공부하지 않겠다는 아니고,, 안심은 된다..ㅎ)

2. 박스를 구성하는 요소 중 padding과 margin을 구분하는 것이 어려웠다. 이 부분도 직접 실습해보면서 이해해야 한다.

결론은 개발을 하다보면 css에 대해 알게되고, 일을 할때도 검색하는 경우가 많다고 한다.