css의 Box, Box Model, Box-Sizing

※ css의 Box는 크게 Inline Box와 Block Box로 나뉨

-Inline Box

inline 나는 inline입니다 .     나는 inline입니다.   ◎ 한줄에 표시 ◎ <a> , <img>, <span> ◎ 태그로 감싸진 내용만큼만 영역을 차지  ◎ width와 heght로 요소의 크기를 조절할 수 없음 ◎ inline은 좌우 margin, padding만 적용 가능

 

 

-Block Box

block 나는 block.입니다.                                         나는 block입니다.                                          ◎ 개별 오소마다 줄을 바꿈 ◎ <h1>, <p>, <div> ◎ width와 height로 요소의 크기를 조절 ◎ 내용과 별개로 자신의 영역을 가짐

inline과 block의 적용방법은?

inline display: inline block display: block

 

block은 가지지만 inlline은 가지지 못한는 것은?

width, height, margin, padding => 웹페이지에서 레이아웃을 설계할 때 다른요소 간의 관계를 결정짓는 것

• inline은 좌우 margin, paddomg만 적용가능
• inline에 적용되는 것처럼 보이는 상하 padding은 레이아웃에 영향을 미치지 못함

 

- inline-block

inline-block inline-block       inline-block         inline-block      ◎ inline과 block의 특징을 모두 포함 ◎ 줄을 바꾸지 않음 ◎ block 처럼 width와 height를 가짐 ◎ 상하 margin, padding이 레이아웃에 유효함

 

inline-block 적용방법은?

inline-block  display: inline-block

Box Model이란?

- Block Box가 가지는 기본 모델 

margin이란?

- 테두리로부터 다른 요소까지의 거리

 margin 적용방법은?

div {
		margin: 20px;
     }
 
/* 상하좌우에 모두 같은 값 적용 */

div {
		margin: 20px, 30px;
     }
   
/* 상하 좌우 margin 설정 */

div {
		margin: 20px 10px 20px 10px;
    }
    
/* 상 우 하 좌 margin 설정 */
/* 위부터 시계방향으로 이동 */

div {
	margin-top: 20px;
        margin-right: 10px;
        margin-bottom: 20px;
        margin-left: 10px;
     }
     
/* 각각의 margin 지정 */

 

border란?

- 내용을 둘러싼 테두리

border 적용방법은?

div {
		border: 6px solid blue;
     }
   
   
/* 6px 두께, 실선, 파란색 */

div {
	border-width: 6px;
        border-style: solid;
        border-color: blue;
    }
    
/* div 태그안에 border 속성을 각각 지정해줄 수 있다 */

 

padding이란? 

- 내용으로부터 테두리까지의 거리

padding 적용방법은?

div {
		padding: 4px;
     }
     
/* 상하좌우에 모두 같은값 적용 */

div {
		padding: 4px 6px;
     }
     
/* 상하는 4px로 좌우는 6px로 지정 */

div {
		padding: 4px 6px 4px 6px
    }
    
/* 상 우 하 좌 각각 지정 */
/* 위쪽부터 시계방향으로 이동 */

div {
	padding-top: 4px;
        padding-right: 6px;
        padding-bottom: 4px;
        padding-left: 6px;
     }
     
 /* div 태그안에 각각 구분하여 지정 */

 

Box sizing이란?

- 박스에 적용된 사이즈의 기준 정하기

기본으로 적용되는 속성은 => content-box

 

패딩과 테두리를 포함한 전체 요소 사이즈는 지정하려면?

* {
	box-sizing: border-box;
   }

css 단위란?

- 스크린 환경에 적합한 단위

- px, %, rem/em등이 있음

 

px란?

- 스크린을 구성하는 작은점

 

%란?

- 부모요소를 기준으로 크기를 설정

div.outer {
			width: 100px;
           }
           
div.inner {
			width: 50px;
           }
           
/* 부모 크기의 무조건 절반크기(50%)로 지정 */

em이란?

- 부모요소의 폰트크기

div.outer {
			font-size: 20px;
           }
        
div.inner {
			width: 2em;
          }
          
/* 상위 요소의 크기값에 em 값을 곱하기 */
/* 20px*2=40px */

rem이란?

- root em

- 루트 요소의 폰트크기

html {
		font-size: 10px;
     {
     
div.inner { 
		10px *5=50px
      }

/* 통일된 기준을 잡기 위해서 rem 사용
/* 10px*5=50px */

 

vh란?

- viewport height의 축약어이며, viewport는 웹에서 보여지는 영역 

- 100vh로 속성값을 설정할 경우 viewport 너비의 100% 만큼 계산

div.expand {
			height: 100vh;
            }
            
/* 내가 지금 보고 있는 브라우저 영역을 꽉채움 */

 

VW란?

- viewport weight의 축약어이며,  viewport는 웹에서 보여지는 영역

- 100vw로 설장할 경우 뷰포트 너비의 100%만큼  계산