-content: 콘텐츠가 표시되는 영역(width, height를 가지고 정의할 수 있음)
-padding: 콘텐츠와 테두리(border) 사이의 여백
-border: padding과 margin 사이의 테두리 (있을수도 있고 없을수도 있음 /설정하지 않으면 0이라 보이지 않음)
-margin: 가장 바깥쪽 레이어로 콘텐츠의 패딩, 테두리를 둘러싸면서 해닥 박스와 다른 요소 사의 공백 역할
<크기>
width height
<divclass="block">
Lorem, ipsum dolor sit amet
</div>
<spanclass="inline">
Lorem, ipsum dolor sit amet
</span>
.block {
width: 300px;
height: 100px;
background-color: wheat;
}
.inline {
width: 300px;
height: 100px;
background-color:yellowgreen;
}
block은 width/height 적용을 받지만 inline 요소는 적용받지 않음
max-width
min-width
설정해놓은 300px에서 더 줄여도 더이상 줄어들지 않는다.
<body>
<divid="container"></div>
50% 유지줄여도 300px 밑으로는 안줄여짐
<body>
<divid="parent">
<divid="child"></div>
</div>
#parent {
width: 300px;
min-width: 300px;
height:300px;
background-color: lightcoral;
}
#child {
width: 50%;
height: 100px;
background-color: lightgreen;
}
#parent {
width: 50px;
height:300px;
background-color: lightcoral;
}
#child {
width: 50%;
min-width:100px;
height: 100px;
background-color: lightgreen;
}
부모요소가 자식요소 (100px)보다 작아지더라도 min-width를 100px로 써서 유지 할수 있음
max-height
min-height
margin
margin-top, margin-right, margin-bottom, margin-left 의 단축 속성. (short hand)
자식요소에게 상속되지 x
초기값: 0
<divid="parent">
<divid="child"></div>
</div>
#parent {
width: 300px;
height: 200px;
border: 5pxsolidblue;
}
#child {
width: 50px;
height: 50px;
margin:10px;
border: 5pxsolidtomato;
}
magin을 px 이나 em 으로 표현한다면 상하좌우 네면 모두 적용하게 됨.
#parent {
width: 300px;
height: 200px;
border: 5pxsolidblue;
}
#child {
width: 50px;
height: 50px;
margin:10px20px;
border: 5pxsolidtomato;
}
1번은 처음에 썼던 10px, 2번째는 마지막에 쓴 20px (스페이싱을 통해 구분)
#child {
width: 50px;
height: 50px;
margin:40px20px30px20px;
border: 5pxsolidtomato;
}
압력순대로 시계방향으로 돌게됨.
만약에 3개만 적을 경우 margin 40px 20px 30px;
top 40px, right, left 20px, bottom 30px 로 설정됨.
-부모가 마진을 설정을 안했는데 자식으로 마진이 %로 설정하게 된다면 부모의 width
margin collapsing (마진상쇄)
(= 마진상쇄, 마진겹침, 마진중복으로 불림)
여러블록(block) 요소들의 위/아래 margin이 겹칠 경우 가장 큰 크기를 가진 margin 으로 결합(상쇄)되는 현상
인접상쇄
1. 인접형제
-두 형제 요소의 위/아래 여백이 만나 상쇄
<divclass="box"></div>
<divclass="box"></div>
<divclass="box"></div>
body {
margin: 0;
}
.box {
width: 50px;
height: 50px;
background-color: tomato;
margin-top: 10px;
margin-bottom: 20px;
}
2. 부모-자식요소 간
- 부모블록에 border, padding, inlin content가 없어서 부모와 자식의 margin-top이 만나는 경우
-부모 블록에 border, padding, inling content가 없고
부모-자식을 분리할 height 값이 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우
<divid="parent">
<divid="child"></div>
</div>
body {
margin: 0;
}
#parent {
width: 100px;
height: 100px;
margin-top: 30px;
background-color: cadetblue;
}
#child {
width:30px;
height: 30px;
margin-top: 40px;
background-color: indianred;
}
#parent {
width: 100px;
height: 100px;
margin-top: 30px;
padding: 1px;
background-color: cadetblue;
}
padding과 같이 끊어낼 수있는 요소가 1px 이라도 있으면 collapsing은 일어나지 않음
3.빈블록
-border, padding, content 가 없고 height 또한 존재하지 않으면 해당 블록의 margin-top 과 margin-bottom 이 상쇄된다.
padding
padding top, padding right, padding bottom, padding left 의 단축속성
margin 과 비슷하긴 하나 padding 상쇄는 일어나지 않음.
- 음수값을 사용 할 수 있음
%를 사용하게 되면 부모의 가로 길이 (width) 의 %로 표현됨.
<divid="parent">
<divid="child"></div>
</div>
#parent {
width: 200px;
height: 200px;
padding: 30px10px;
background-color: skyblue;
}
#child {
width: 50px;
height: 50px;
background-color: red;
}
border style
border style
-기본값: none 이기 떄문에 설정하지 않으면 눈에 보이지 x
border-width (두께)
테두리의 너비, <length> 또는 thin (얇은테두리), medium (중간테두리), thick (굵은 테두리) 로 표현될 할 수 있음.
-----------> 브라우저마다 다르기 때문에 정확히 몇 px 인지는 딱 정할 순 없음.
border-color
<divclass="box"></div>
.box{
width: 300px;
height: 300px;
border-style: dottedsolid;
border-width: 10px;
border-color: redblue;
background-color: rgb(red, green, blue);
}
border short hand
-border width, border-style, border-color 의 값을 설정
-style을 지정하지 않으면 기본값인 none으로 테두리가 보이지 x
(아무리 color나 width를 설정한다 하더라도 보이지 않음)
-순서는 상관 없음(일관성만 지키자!)
<divclass="box"></div>
.box{
width: 300px;
height: 300px;
border: 5pxreddotted;
background-color: rgb(red, green, blue);
}
border-radius
요소 테두리 경계의 꼭짓점을 둥글게 만듦
%를 사용하면 가로축값은 요소 박스 너비에 대한 백분율, 세로축 값은 박스의 높이에- 대한 백분율
입력값이 최대 4가지로 시계방향으로 적용 할 수도 있음.
<divclass="box"></div>
.box {
width: 300px;
height: 300px;
border: 5pxsolidred;
border-radius: 30px;
background-color: skyblue;
}
모서리에 원의 반지름이 30px
box-sizing
요소의 너비와 높이를 계산 하는 방법을 지정 할수 있음
<divclass="box">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, tempora voluptates quisquam placeat consequuntur, nihil eius labore ex architecto, repudiandae minima. Aliquam alias nisi ab quidem id officiis nemo magni.</span>
<h3>안녕하세요</h3>
</div>
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 30pxsolidblue;
box-sizing: content-box;
background-color:skyblue
}
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 30pxsolidblue;
box-sizing: border-box;
background-color:skyblue
}
<content-box>
-초기 기본값, width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백(padding) 과 테두리(border) 는 포함하지x
