CSS 기초 - 박스

block

• 줄바꿈 일어남
• 너비: 100%
• width, height 사용 가능

inline-block

• 줄바꿈 일어나지 않음
• 너비: 글자가 차지하는 만큼
• width, height 사용 가능

inline

• 줄바꿈 일어나지 않음
• 너비: 글자가 차지하는 만큼
• width, height 사용 불가

테두리

• p{border: 1px soild gray;}
• 두께(border-width), 스타일(border-style), 색상(border-color) 추가 가능

바깥 여백(margin)

• p{margin: 10px 20px 30px 40px}
  • 위(top), 오른쪽(right), 아래(botton), 왼쪽(left) 시계방향 순서
• 개발자 도구에서 margin은 주황색으로 표시됨
• 필요한 위치에만 값 지정 가능
  • p{margin: 10px 20px} => 값을 두개만 넣으면 top, bottom 10px / rifht, left 20px
  • p{margin: 10px} => 모든 방향에 여백 적용
  • p{margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;} => 각각의 값 지정 가능
• 음수값 지정 가능 => 다른 엘리먼트와 간격이 줄어든다

안쪽 여백(padding)

• margin과 같은 규칙 적용
• p{padding: 10px 20px 30px 40px; border: 1px soild red; background-color-lightyellow;} => 배경이나 border 적용 가능

박스를 벗어나는 컨텐츠 처리

• p{height: 40px; overflow: auto}
  • overflow를 사용하면 박스보다 큰 콘텐츠에 스크롤 표시
  • overflow: hidden => 넘치는 콘텐츠 숨기기
  • overflow-x, overflow-y로 x축, y축 값 지정 가능

박스 크기

• 박스의 크기는 크기 + 여백
• #container{width: 300px; padding: 10px; border: 2px solid red;}
• 박스의 크기 : 콘텐츠 영역(300px) + 여백(10px + 10px + 2px + 2px)
• {box-sizing: border-box}
  • 모든 박스에서 여백과 테두리를 포함한 크기로 계산됨
  • box-sizing은 HTML 문서 전체에 적용