containing block/initial value/box-sizing/negative margin

---

• CSS의 기초 컨셉 알아보기
• Cascading Stylesheet
• Intial value
• Inheritance
• CSS Box-modal
• Margin collapse
• Negative Margins
• display

 

 

css  기초 컨셉

• User-agent Stylesheet
• Casecade
• inhertiance : 부모 요소에 있는 속성(property) 가 자식요소에 모두 상속되는가? 아니오!
• Selectors( 선택자) : class, 가상class(Pesudo Class), 가상요소 (Pesudo Element)

 

0 순위 개념

• CSS box-model
  -  margin과 padding 구분하고 적절히 활용하기

 - width와 height의 초기값 이해하기(프로퍼티에 물려있는 것)

 - margin 의 특수성 이해하고 활용하기

 - margin collapsing

 - negative margins

• box-sizing

 

1순위 개념

• display

  - block leverl elements

  - inline element와 inline-block

 

• Flexbox Layouts

 - justify-contents

 - align-items

 - flex-grow

 - flex-shrink

 - flex-wrap

 

2순위 개념

• position과 float

  float 원래 용도로 활용하기

  position의 기본과 응용단계

 

3순위

• Units(단위)

 auto   px   vw

  %       em  vh

            rem

 

4순위

• typography(글자)

 

 

 

---

 

' * ' 유니버셜 셀렉터: 생략가능

  ex) * .classname : ### ;   <- 유니버셜 셀렉터가 생략된 것.

.class명_.class명  : 셀렉터와 셀렉터 사이에 들어가는 것을  '콤비네이터'

  -> 띄어쓰기(하위 콤비네이터), +, >(직계 자식 콤비네이터)

 

 

  블럭레벨 엘리먼트일때

auto 값 (사용 가능한 모든 공간을 활용 - 블럭요소가 사용가능한 크기/자식요소가 사용 가능한 크기)

containing block(부모 요소가 자식요소에게 제공한 사용 가능한 공간!)- 특정요소를 지칭하지 않는 개념적인 것.

부모 요소가 영향을 주는것이지 상속하는 것은 아님. initial value(초기값)

모든 프로퍼티는 초기값을 가진다.

** height : auto -> 기재하지 않아도 이게 기본값

 

** width: %

   padding: % (상하좌우)

   margin : %

1. 직계 부모가 제공하는 컨테이닝 블럭 크기의 % 
2. 아주 특별한 예외는 position : absoulte일때 position : relative 가 부여된 조상 요소가 제공하는 컨테이닝 블럭크기의 % 
3. 조상 요소나 부모 요소가 없으면 view port가 제공하는 컨테이닝 블럭 크기의 %

 

 

*** 초기값 ->

background-color : transparent(투명)

background-img : none

diplay : inline (user-agent shtylesheet 이 기본적으로 block으로 주기때문에 편의상 이 속성을 그대로 사용한다)

position: static

 

속성 : initial (초기값) -> 간혹 사용함. ex) 모바일로 변경할 때.써주긴 함. pc에서 부여 된 가로/세로가 있으면 모바일에서 제대로 표현하기 위해 초기값으로 변경해줘야하니까~~~

margin: auto ->  사용 가능한 공간을 여백으로 취하는 것 (좌우만)

width: auto -> 사용 가능한 공간을 너비로 취하는 것.

 

 

• 컨테이닝 블럭 기준으로(부모 요소가 제공해주는 사용 가능한 컨텐츠 영역)

width: _%

margin: _%

padding: _%

 

• 어느 기준일지 확인해보기!

height : _%

 

• 본인 기준으로

transform : _%

 

 

• box-sizing ( 기본 값은 content-box)

박스 모델의 사이즈가 결정되는 원리

box-sizing : border-box

-> 너비와 패딩 보더까지 지정된 너비를 안에 다 넣는 속성과 값.

 

1. 컨테이닝 박스를 새로 지정해주는(html마크업을 새로)것으로  https://jsp0422.tistory.com/120
2. 너비를 auto로 주고 마진 좌우를 지정하여 처리
3. calc( )속성을 이용하여..
4. box-sizing 을 통해서.

 

 

• negative margin

margin은 차지하는 공간의 크기이다.

마진의 좋은 점은 주변 환병에 영향을 줘서 자연스러운 유지보수가 될 수 있도록 해줌. 

margin-left:-50px 

이런거 되면. 흘러넘침. 보이긴 하지만 공간차지는 하지 않는다~