-
가로, 세로, 모서리 모양
div { width: 200px; background-color: bisque; border-width: 5px; border-style: solid; border-color: black; /* border: 5px solid black; */ /* 위의 세줄을 한줄로 표현하기 */ border-left-width: 10px; border-radius: 5px; /* 모서리를 둥글게 */ /*border-radius: 50%;*/ }패딩 (padding)
콘텐츠와 이를 둘러싼 테두리(border) 사이의 공간
<button>Pad ME</button>
여기에 아래 CSS 를 적용하면
button { padding-left: 50px; /* right, top, bottom */ }
마진 (margin)
콘텐츠를 둘러싼 테두리(border) 간의 공간
h1 { margin-bottom: 40px; /* left, right, top */ }디스플레이 (display) 속성
h1 { background-color: green; display: inline; /* h1 은 default block 이지만 inline 으로 변경해 봄 */ } span { background-color: coral; display: block; /* span 은 default inline 이지만 block 으로 변경해 봄 */ }display 속성에 따라 width, height, padding, margin 등이 제대로 적용되지 않을 수 있다.
- inline
- width & height are ignored.
- margin & padding push elements away horizontally but not vertically.
- block
- breaks the flow of document.
- width, height, margin & padding are respected.
- inline-block
- behave like an inline element except width, height, margin & padding are respected.
- none
- elements 를 화면에 보여주지 않고 감춘다. (공간도 차지하지 않음)
아래의 HTML 로 예제를 만들어 보면
<body> <div></div> <div></div> <div></div> </body>div 를 default block 으로 그대로 두었을 때
div { width: 50px; height: 50px; background-color: olive; border: 5px solid black; margin: 5px; }
div 를 inline-block 으로 변경했을 때
inline 처럼 한줄로 나열되고, block 처럼 margin 이 적용된다.
div { width: 50px; height: 50px; background-color: olive; border: 5px solid black; margin: 5px; display: inline-block; }
'web > css' 카테고리의 다른 글
위치 속성 (position) (0) 2024.01.01 CSS 단위 (0) 2023.12.31 CSS Selector (0) 2023.12.21 색, 텍스트, 글꼴 (0) 2023.12.21 - inline