뇌운동일지

[CSS3] CSS 박스 모델 본문

CSS

[CSS3] CSS 박스 모델

purpleduck 2020. 4. 13. 10:22

margin 어떤 요소의 바깥쪽 

width, height, border 필수요소 

border를 기준으로 안쪽을 padding, 바깥쪽을 margin

div 태그를 쓰면 중첩을 시킬 수 있다 

padding 내용물과의 간격조절, 테두리 안쪽의 여백 

 

<브라우저에서 F12>

 element - 디자인이 올바른 위치에 있는지

 source - javascript오류를 잡을 때 쓴다

 

CSS를 안쓰면 html 태그를 이용하는 것이 좋다

화면을 분할하는 내용 

 

width:300px;

box-sizing:content-box; /* 콘텐츠 영역이 300 */

box-sizing:border-box; /* 박스 전체 테두리의 가로가 300 */

 

contents padding border margin

 

position : relative; /*요소가 겹쳐질 수 있음*/

 

'CSS' 카테고리의 다른 글

[CSS3] 연결 선택자, 속성 선택자  (0) 2020.04.16
[CSS3] 색상, 배경  (0) 2020.04.09
[CSS3] CSS기초지식  (0) 2020.04.08
Comments