box의 단위
넓이(width) 또는 높이(height)를 적용할때 기본적으로 px를 이용하지만 %를 이용하기도 한다.
- px : 고정단위. 브라우저의 넓이나 높이가 달라지더라도 늘 고정된 사이즈를 보여준다.
- % : 상대단위. 브라우저의 넓이나 높이 또는 부모 박스 크기가 달라지면
안에 있는 박스도 같이 줄어들거나 늘어난다.
- auto : 박스 형태의 넓이와 높이 값을 컨텐츠 양에 따라 자동으로 결정되며 기본값이다. css box model
block속성을 가진 태그들은 넓이와 높이를 가질 수 있다.
이렇게 박스의 넓이와 높이가 생겼을때 컨텐츠를 배치하고 레이아웃을 설정할때
css box model을 사용한다.
css box model에서는 컨텐츠를 여유롭게 보여주는 padding영역과
border(테두리)영역과 컨텐츠와 컨텐츠 사이에 여백을 넣어주는 margin영역이 있다.margin : 컨텐츠 사이 여백
컨텐츠 사이 여백으로 padding과 border보다 바깥부분으로 생긴다.
컨텐츠 와 컨텐츠 사이를 벌릴때 사용한다.padding : 안쪽 여백
컨텐츠의 바깥부분에 생기는 여백으로 박스의 안쪽으로
빈 공간을 넣어 컨텐츠를 여유롭게 보여주는 역할을 한다.
padding에 값을 1개만 적을 경우 박스의 상하좌우에 동일한 px만큼 여백이 설정된다.padding 종류
padding-left : 왼쪽에만 지정된 값만큼 안쪽 여백을 적용한다.
padiing-right : 오른쪽에만 지정된 값만큼 안쪽 여백을 적용한다.
padding-top : 위쪽에만 지정된 값만큼 안쪽 여백을 적용한다.
padding-bottom : 아래쪽에만 지정된 값만큼 안쪽 여백을 적용한다.[기본형]
padding : 숫자px;
박스의 왼쪽이나 오른쪽 상 하 처럼 각각 패딩을 적용하고 싶은 경우아래와 같이 쓴다.
padding : 값1 값2 값3 값4;
=> top right bottm left;
padding : 값1 값2 값3;
=> top/bottom left/right;
만약 상하좌우에 값을 각각 한 번에 적용하고 싶다면 아래와 같이 쓴다.
값을 한 번에 4개를 써서 선언할떄에는 공백으로 구분하고 값1(top의 자리)부터 시작하여
시계방향으로 적용된다.
Hi