박스 모델
- content, padding, border, margin으로 이루어짐
1. content
- 내용이 들어있는 상자
- 가로를 width, 세로를 height로 조절
2. padding
- content와 테두리(border) 사이의 공간
3. border
- 테두리
- border : 1px solid green(굵기 스타일 색상);으로 표현
- border : none - 테두리를 없게 하고 싶을 때
- border-radius : 4px - 모서리 부분이 둥글어짐
: 50% - 테두리가 완전히 원형이 됨
border-top-left-radius : 10px : 테두리의 위쪽의 왼쪽이 둥글어짐
4. margin
- 요소와 요소 사이 간격
- margin-top : 10px
cf>shorthand : 속기형
- padding : top right bottom left 순으로 작성
ex) padding : 10px 10px 10px 10px
- 상하좌우로 10px씩 칸 부여됨
padding : 20px 40px
- 상하에 20px, 좌우에 40px
padding : 10px 20px 40px
-상에 10px, 좌우에 20px, 하에 40px
margin : 0px auto;
- 상하는 0px, 좌우는 자동으로(즉, 가운데 정렬)
box-sizing
- content-box
css는 기본적으로 box-sizing이 content-box로 설정되어 있음
width, height이 content의 길이가 됨
- 즉, padding이 달라지면 border의 길이가 달라짐
- border-box
width, hieght가 border의 길이가 됨
- 즉, padding이 달라져도 border의 길이는 그대로
대부분은 처음에 스타일링할 때
*{
box-sizing : border-box;
}를 입력하고 시작함
box-sizing:border-box;
display : box type를 결정하는 css의 속성
box type
block(길막)(영역을 잡기 위해 사용)
- 별도로 width를 선언하지 않으면, width = 부모의 content-box의 100%
- 따로 width를 선언하면, 남은 공간은 margin으로 자동으로 채워줌
- 주의 : 위로 인해 생긴 margin은 개발자 도구에 나오지 않음
->즉, 다른 요소가 같은 줄에 오지 못하도록 함
- 따로 부모의 height를 선언하지 않으면, 부모의 height = 자식 요소의 height 값의 총합
inline(흐름)(content를 옆으로 흐르게 하기 위해)
- width, height, -top, -bottom 사용 불가
- inline이 줄 간격에 맞춰서 흐르려고 하는 흐름을 방해하기 때문
inline block(block + inline)
- inline처럼 전후 줄바꿈 없이 한 줄에
다른 요소와 나란히 배치 가능 +
inline에서 쓰지 못했던 width, height, -top, -bottm 사용 가능
- 대표적 요소 : <button>, <input>, <select>
cf) display : box type를 결정하는 css의 속성
ex)
div:last-child{
display:inline-block;
}
span{
display : block;
}