강잇
강이의 개발블로그
강잇
전체 방문자
오늘
어제
  • 분류 전체보기 (102)
    • Langauge (32)
      • Java-basic (29)
      • Java (3)
    • SpringBoot (7)
    • Algorithm (5)
      • BAEKJOON (5)
    • WEB (7)
      • HTML & CSS (7)
    • DB (1)
      • MySQL (1)
    • OS (17)
      • Mac (2)
      • Linux (4)
      • Terminal Command (11)
    • Computer Science (7)
      • Hard ware (1)
      • Database (1)
      • Data structure (2)
      • Algorithm (2)
      • Network (1)
    • Git (5)
      • 개념 (1)
      • 활용 (1)
      • Trouble Shooting (2)
    • ETC. (13)
      • Install (6)
      • IntelliJ (1)
      • Eclipse (2)
      • Error (3)
      • Tip (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • til
  • CSS 속성
  • 자바
  • 메서드
  • 백준
  • CSS 박스 크기 설정
  • 메소드
  • 알고리즘 공부

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
강잇

강이의 개발블로그

[CSS] 박스 모델 (Box Model) : 요소의 크기
WEB/HTML & CSS

[CSS] 박스 모델 (Box Model) : 요소의 크기

2022. 6. 30. 19:33

박스 모델

박스 모델이란?

CSS는 HTML 요소를 화면에 표시하기 위해 요소별로 아래와 같은 박스를 생성한다.

따라서 HTMl 요소의 크기는 컨텐츠의 크기, padding, border, margin에 의해 결정되며, 이를
'CSS 박스 모델(Box Model)'이라고 한다.

  • content : 요소의 콘텐츠가 표시되는 영역
  • padding : content 영역과 border 사이의 안쪽 영역
  • border : padding 영역과 margin 사이의 테두리
  • margin : border 기준으로 바깥쪽 여백

 

저작자표시 (새창열림)

'WEB > HTML & CSS' 카테고리의 다른 글

[CSS] CSS 선택자 종류와 우선순위 (작성중)  (0) 2022.06.28
[CSS] Flexbox : 자식 박스의 방향과 크기 설정  (0) 2022.06.28
[CSS] box-sizing : 박스 크기 방식 설정  (0) 2022.06.28
[CSS] CSS란?  (0) 2022.06.28
[HTML] 시멘틱 태그(Semantic Tag)  (0) 2022.06.27
    'WEB/HTML & CSS' 카테고리의 다른 글
    • [CSS] CSS 선택자 종류와 우선순위 (작성중)
    • [CSS] Flexbox : 자식 박스의 방향과 크기 설정
    • [CSS] box-sizing : 박스 크기 방식 설정
    • [CSS] CSS란?
    강잇
    강잇
    학습한 내용을 정리 및 기록하는 블로그

    티스토리툴바