블록 레벨 요소
요소를 삽입했을 때 혼자 한 줄을 차지하는 요소.
인라인 레벨 요소
줄을 차지하지 않는 요소
화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간은 다른 요소가 온다.
박스 모델
실제 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성된다.
웹에서 F12키로 확인 가능하다.
width, height 속성
실제 콘텐츠 영역의 크기
px단위의 크기와 백분율로 지정 가능. auto 값도 속성값에 들어갈 수 있다.
display 속성
블록 레벨 요소를 인라인 레벨 요소로,
인라인 레벨 요소를 블록 레벨 요소로 바꿔주는 속성
none, contents, block, inline, inline-block, table, table-cell등
특히 inline-block은 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정해준다.
border-style 속성
기본 값이 none이다. -> 화면에 테두리 표시 안됨!
테두리 스타일을 지정하는 속성
border-width 속성
테두리 두께
thin, medium, thick
border-color 속성
테두리 색상 지정
border 속성
테두리 속성을 묶어 나열하여 지정할 수 있다.
border-radius 속성
박스 모서리 부분을 둘글게 처리
크기, 백분율로 지정할 수 있다. (반지름 원형)
가로크기 / 세로크기 (타원일경우)
border-(top-left-right-bottom)-속성이름
box-shadow 속성
선택 요소에 그림자 효과
box-shadow: 수평거리 수직거리 흐림정도 번짐정도 색상;
margin
현재 요소 주변의 여백
top, right, bottom, left (시계방향순)
마진 중첩 현상 : 요소를 세로로 배치할 경우, 마진 값이 큰 쪽으로 겹쳐진다.
가로는 중첩되지 않음.
padding
콘텐츠 영역과 테두리 사이의 여백(테두리 안쪽 여백)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스 모델</title>
<style>
div {
width: 200px; /* 너비 */
height: 100px; /* 높이 */
margin: 15px; /* 영역간 마진 */
display: inline-block; /* 가로로 배치 */
border: 2px solid black;
background: #ffd800;
}
.round1 {
border-top-left-radius: 100px 50px; /* 왼쪽 위 라운딩 */
}
.round2 {
border-bottom-right-radius: 50% 30%;
}
.round3 {
border-top-right-radius: 50px;
}
</style>
</head>
<body>
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스 모델</title>
<style>
div {
width: 200px;
height: 100px;
display: inline-block;
margin: 15px;
border: 2px solid;
border-radius: 20px;
}
.box1 {
box-shadow: 2px -2px 5px 0px black;
}
.box2 {
box-shadow: 5px 5px 15px 5px gray;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>display 속성</title>
<style>
div {
margin: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
#inline img {
margin: 10px;
}
#block img {
display: block;
margin: 10px;
}
</style>
</head>
<body>
<div id="inline">
<img src="images\image_dog1.jpg">
<img src="images\image_dog2.jpg">
<img src="images\image_cat.jpg">
</div>
<div id="block">
<img src="images\image_dog1.jpg">
<img src="images\image_dog2.jpg">
<img src="images\image_cat.jpg">
</div>
</body>
</html>
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #10 : 시맨틱 태그(semantic tag) (0) | 2022.12.13 |
|---|---|
| HTML & CSS #09 : CSS Layout (0) | 2022.12.13 |
| HTML & CSS #07 : 색상과 배경 (0) | 2022.12.13 |
| HTML & CSS #06 : 텍스트 스타일 (0) | 2022.12.13 |
| HTML & CSS #05 : CSS 기본 (0) | 2022.12.13 |
댓글