13. CSS / 속성 - 박스 모델

 

CSS 의 속성 

  

   width - 요소의 가로 너비를 지정

             속성값 

             값 auto, px, em, cm 기본값으로 auto 

 

 

            블럭요소는 (width)가로 100% (height)세로 0 으로 초기값이 되어있다.

         

초기값으로 세로크기가 0이므로 div태그 안에 아무 것도 없으므로 출력이 안되는데 height를 100px로 설정을 하면 화면에 100px만큼의 세로 사이즈를 가지는 화면이 출력된다.

 

 

         인라인요소는 (width)가로크기 (height)세로크기가 0 에서 출발한다. 하지만 이 크기의 값을 설정을 해도 적용이           안되는데 그 이유는 인라인 요소는 text만을 위한 요소이기때문에 text가 없으면 크기를 가지지 않는다.

 

 

   max-width ( 요소의 최대 가로 너비를 지정 ) 

   min-width ( 요소의 최소 가로 너비를 지정 ) 

   max-height ( 요소의 최대 세로 너비를 지정 )

   min-height ( 요소의 최소 세로 너비를 지정 )

최대가 400이고 최소가 200이라 부모가 100px가로 여도 200 밑으로 줄지가 않는걸 확인 할 수 있다.

 

 

margin - 요소의 '외부 여백'을 지정 (단축,개별 속성 가능 margin-top등 한쪽만 지정가능)

 

              margin 50% 추가

   

%사용시 부모요소의 '가로사이즈'의 50% 만큼이 자식에 margin에 사용이 됨

시계방향으로 돈다 !

 

 

 마진 중복 - 마진의 특정 값들이 중복되어 합쳐지는 현상

 

             1. 형제 요소들이 가로로 top bottom이 만났을 때 아님! 

이 상활 일때는 가로 사이즈가 겹치지 않고 20 20 = 40이 magin이 형성된걸 확인 할 수 있다.

            형제 요소들의 bottom과 top이 만났을 경우

 

중복이 되어 20 사이즈의 margin만 나온다.

 

 

                   2.부모요소의 margin-top과 자식요소의 margin-top이 만났을 때

magin 중복이되어 부모도 같이 50px 만큼 떨어지는걸 확인 할 수 있다.

 

 

 

padding - 요소의 내부 여백을 지정 ( 사용법은 margin과 같다 ) 

 

크기증가 - 추가된 padding 값만큼 요소의 크기가 커지는 현상 !!! 

가로 세로 100px로 설정했지만 padding을 설정함에 따라 크기가 140으로 변경이 되었다.

 

크기가 커지지 않도록 자동 계산 하는 법

padding을 추가 해도 가로세로 100px은 변하지 않는다.

 

 

border - 요소의 테두리 선 을 지정 ex) border : 두깨 종류 색상; 

값들의 개별속성도 가능 border-witfh : 위 우 아래 좌;  border-style : 위 우 아래 좌; (스타일을 각 위치마다 다르게 적용 )

      크기증가 - border의 크기에 따라 요소의 크기가 같이 커진다. 해결 -> box-sizing : border-box; 추가 

 

 

 

display - 요소의 박스 타입을 설정 ( block or inline or inline-block )

 

display:none -> 완전히 요소가 사라지는 기능 

 

      inline-block 

inline 요소이지만 가로세로 값을 가질수 있고 margin과 padding 또한 가질수 있다.

 

 

 

overflow - 요소의 크기 이상으로 내용이 넘쳤을 때, 내용의 보여짐을 제어

scroll 은 좌우 스크롤 바도 생성이 되버림.

 

 

opacity - 요소의 투명도를 지정  ( 0~1 까지 입력 가능 기본값은 1 , 0은 투명)