block과 inline
block : 너비와 높이 지정 가능. 세로로 나열 (줄바꿈 O). 주로 영역을 나누는 용도로 사용.
inline : 너비와 높이 지정 불가능. 가로로 나열(줄바꿈 X). 주로 컨텐츠에 해당. 글자처럼 취급됨.
inline-block : block과 inline의 중간 형태로, 너비와 높이 지정이 가능하면서 가로로 나열(줄바꿈 X)
display : 요소를 배치하는 방식을 지정. 요소에 따라 기본값이 다르다.
.box {
width :100px;
height : 100px;
/* 요소를 block-level로 처리. */
display : block;
/* 요소를 inline-level로 처리. */
display : inline;
/* 요소를 inline-block-level로 처리. */
display : inline-block;
/* 요소를 문서에 표시하지 않는다. *
display : none;
}너비와 높이
width : 요소의 너비를 지정. 기본값 auto
.box {
/* 기본값. block은 부모 요소의 너비 내에서 최대 너비, inline-block은 자신의 컨텐츠 너비만큼 자동으로 계산*/
width : auto;
/* 100px만큼 너비를 지정 */
width : 100px;
/* 부모 요소의 너비에 대해서 50% */
width : 50%; height : 요소의 너비를 지정. 기본값 auto.
/* 기본값. 자신이 가진 컨텐츠의 높이만큼 자동으로 계산 */
height : auto
/* 절대값. 50px만큼 높이 지정. */
height : 50px;
/* 상대값. 부모 높이의 20% 지정. */
height : 20%;
}
여백
margin : 바깥 여백. 너비에 영향 X.
.box {
/* 값이 1개인 경우 : 상,하,좌,우 모두 바깥 여백 지정. */
margin : 10px;
/* 값이 2개인 경우 : 차례대로 상하 5px, 좌우 10px 바깥 여백 지정. */
margin : 5px 10px;
/* 값이 3개인 경우, 차례대로 상 20px, 좌우 10px, 하 5px 지정. */
margin : 20px 10px 5px;
/* 값이 4개인 경우, 상부터 시계방향으로 상 10px, 우 20px, 하 15px, 좌 25px 지정*/
margin: 10px 20px 15px 25px;
/* 방향별로 1개만 지정. */
margin-top : 10px;
margin-right: 20px;
margin-bottom : 15px;
margin-left : 25px;
}padding: 안쪽 여백. 작성법은 margin과 동일. margin과 다르게 너비에 영향 O.
테두리
border : 요소의 테두리 선. 너비에 영향 O.
1) 두께 : 테두리 선의 두께 지정.
2) 선의 종류 : 테두리 선의 종류 지정.
| 값 | 설명 |
|---|---|
| none | 테두리 표시 X (기본값) |
| solid | 실선 |
| double | 실선 두 줄 |
| dotted | 점선 |
| dashed | 직사각형 여러개 |
3) 색상 : 테두리 선의 색상 지정.
.box {
/* 차례대로 테두리 두께, 종류, 색상. 순서 무관 */
border : 1px solid #000;
/* 개별속성 지정. */
border-color: red;
border-width : 2px;
border-style : dotted;
/* 방향별로 지정. */
border-top : 1px solid #000;
border-left :4px dotted tomato;
border-right : 2px dashed white;
border-bottom : 1px double green;
}영역 계산 방법 지정.
box-sizing : 요소의 너비와 높이 계산 방법 지정.
| 값 | 설명 |
|---|---|
| content-box | 너비, 높이 padding, border 미포함 계산 |
| border-box | 너비, 높이 padding, border 포함 계산 |
.box {
width: 100px;
height : 50px;
padding : 10px;
border : 1px solid #000;
/*
width와 height 값 100px, 50px에 padding 10px과 border 두께 1px 추가.
상하, 좌우로 더해지기 때문에 최종적으로 너비 122px, 높이 72px.
*/
box-sizing : content-box;
/*
width와 height가 padding: 10px과 border-width 1px을 포함하여
각각 100px, 50px 되도록 계산.
*/
box-sizing : border-box;
}영역을 넘는 자식 요소 처리 방법
overflow : 넘치는 자식 요소의 처리 방법 지정.
| 값 | 설명 |
|---|---|
| visible | 요소를 자르지 않고 그대로 표시(기본값) |
| hidden | 요소의 넘는 부분을 자르고 표시 |
| scroll | 스크롤 바 생성 |
| auto | 넘치는 경우에만 스크롤 바 생성 |
.box {
/* 기본값. 넘치는 요소를 자르지 않고 그대로 표시.*/
overflow : visible;
/* 자식 요소의 넘치는 부분을 자르고 표시. body 태그에 사용시 스크롤 기능 제거 가능. */
overflow : hidden;
/* 스크롤 바 생성 */
overflow : scroll;
/* 넘치지 않을 때에는 visible처럼 표시. 넘치는 경우 스크롤 바 생성. */
overflow : auto;
/* 상하, 좌우 별도로 지정 가능 */
overflow-y : scroll;
overflow-x : hidden;
}