모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됩니다.
박스는 항상 직사각형으로, 너비(width)와 높이(height)를 가집니다.
- 너비(width, height) 속성
요소의 가로/세로 너비는 width, height 속성을 이용합니다.
기본값(요소에 이미 들어있는 속성의 값)
:auto
로 해당하는 요소가 block 요소 혹은 inline 요소 인지에 땨라 브라우저가 너비를 계산합니다.
단위
: px, rem 등
max-width
와max-height
속성은 요소가 커질 수 있는 최대 가로/세로 너비를 의미하며, 속성의 기본값은none
으로 제한이 없습니다.min-width
와max-width
속성은 요소가 작아질 수 있는 최소 가로/세로 너비를 의미하며, 속성의 기본값은0
으로 제한이 없습니다.
줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)
줄 바꿈이 되는 박스는 block 박스, 줄바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부릅니다.
줄 바꿈이 일어나지 않고 자체적으로 고유의 크기를 가지는 박스는 inline-block 박스라고 부릅니다.
block 요소의 대표적인 예는 <div>
, <p>
입니다.
inline 요소의 대표적인 예는 <span>
입니다.
block, inline-block, inline의 특징
-- | block | inline-block | inline |
---|---|---|---|
줄바꿈 여부 | 줄바꿈이 일어남 | 줄바꿈이 일어나지 않음 | 줄바꿈이 일어나지 않음 |
기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
width, height 사용 가능 여부 | 가능 | 가능 | 불가능 |
border: 선-두께(border-width) 선-종류(border-style) 선-색상(border-color)
입니다.border-top
, border-right
, border-left
, border-bottom
로 방향만 바꿔서 적용할 수 있습니다./* 선-종류: 실선 */
border: solid;
/* 선-두께 | 선-종류: 점선 */
border: 2px dotted;
/* 선-종류: 파선 | 선-색 : 투명
border: dashed transparent;
/* 선-두께 | 선-종류: 점선 | 선-색 */
border: medium dashed green;
/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
- box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다.
그림자를 명확하게 보기 위해서는 background 속성이 불투명(transparent)해야합니다.
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
0
: 외부 여백 없습니다.
auto
: 브라우저가 여백을 계산합니다.
-> 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용합니다.
단위
: px, em, vw 등 단위로 지정합니다.
각각의 값은 top, right, bottom, left로 시계방향입니다.
바깥 여백에는 음수 값을 지정할 수 있습니다. 여백에 음수 값을 지정하면 다른 요소들과의 간격이 줄어듭니다.
/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;
/* 세로방향(top, bottom) | 가로방향(left, right) */
margin: 5% auto;
/* 위(top) | 가로방향(left, right) | 아래(bottom) */
margin: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;
0
: 내부 여백 없습니다.
단위
: px, em, vw 등 단위로 지정합니다.
%
: 부모 요소의 가로 너비에 대한 비율로 지정합니다.
특징
: 내부 여백이 커지면서 요소의 크기가 커집니다.
각각의 값은 top, right, bottom, left로 시계방향입니다.
/* 네 면 모두 적용 */
padding: 1em;
/* 세로방향(top, bottom) | 가로방향(left, right) */
padding: 5% 10%;
/* 위(top) | 가로방향(left, right) | 아래(bottom) */
padding: 1em 2em 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;
overflow
속성은 요소의 크기 이상으로 내용이 넘쳤을때, 보여짐을 제어하는 단축 속성입니다.visible
로 넘친 내용을 그대로 보여줍니다.hidden
속성값은 넘친 내용을 잘라냅니다.auto
속성값은 넘친 내용이 있는 경우에만 잘라내고 스크롤바를 생성합니다.p {
height: 40px;
overflow: auto;
}
overflow
속성의 auto
값은 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다. 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 경우 hidden
값을 적용합니다.
box-sizing
속성은 요소의 크기 계산 기준을 지정하는 속성입니다.content-box
는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box
를 권장합니다.// *는 모든 요소를 선택하는 셀렉터입니다.
* {
box-sizing: border-box;
}