1. CSS 박스 모델
1) 블록 레벨 요소와 인라인 레벨 요소
🍒 블록 레벨 block-level 요소
- 화면의 가로(폭) 길이 (100%)를 차지, 뒤에 오는 요소는 줄 바꿈이 일어나며
여러 개의 <div> 태그를 나열하면 수직 방향으로 정렬이 됨
▶️ 대표적인 태그 : div, p, h1~h6, ul, ol, form, table, blockquote~
<body>
<div>HTML5-WEB</div>
<div>HTML5-WEB</div>
<div>HTML5-WEB</div>
<div>HTML5-WEB</div>
<div>HTML5-WEB</div>
</body>
🍒 인라인 레벨 inline-level 요소
- 해당 태그의 컨텐츠 만큼 공간을 차지(폭이 컨텐츠의 양에 비례), 글자와 같이 옆으로 나열되며 나타남
- 줄 바꿈이 일어나지 않기 때문에 <span></span> 이라고 나열하면 수평 방향으로 정렬
- width, height, margin-top, margin-bottom이 적용되지 않음
- 태그 종류 : a, img, span, sub, sup, i, b, em(글자를 꾸미는 태그 종류), input
<head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<span>SPAN-inline</span>
<span>SPAN-inline</span>
<span>SPAN-inline</span>
<span>SPAN-inline</span>
<span>SPAN-inline</span>
</body>
span에 margin 적용 시 margin-left, margin-right는 적용되어서 나오는 예시
<head>
<style>
* {
padding: 0;
margin: 0;
}
span {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<span> inline 성격의 태그</span>
<span> inline 성격의 태그</span>
</body>
2) 박스 모델의 기본 구성
🍒 박스모델 box model 요소
- 박스 형태인 요소를 말함
- 콘텐츠 영역 ▶️ 패딩 padding ▶️ 테두리 border ▶️ 마진 margin 으로 구성
- 마진이나 패딩은 웹 문서에서 다른 콘텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념
💡 박스의 실제 넓이와 높이 공식
- 한개의 박스에 margin + border + padding 값이 모두 적용되었다는 가정
- width 속성과 height 속성은 텍스트가 들어가는 영역(contents)의 넓이와 높이를 지정
* 전체 넓이 : width + 2 * (margin + border + padding)
* 전체 높이 : height + 2 * (margin + border + padding)
3) 콘텐츠 영역의 크기를 지정하는 width, height 속성
| 종류 | 설명 |
| <크기> | 너비나 높이의 값을 px이나 em 단위로 지정 |
| <백분율> | 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%) 로 지정 |
| auto | 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정된다. 기본값. |
🍒 넓이 / width : 크기 | 백분율 | auto
🍒 높이 / height : 크기 | 백분율 | auto
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px; /* 고정 넓이 */
height: 100px; /* 고정 높이 */
background-color: blue;
}
#box2 {
width: 50%; /* 가변 넓이 - 현재 브라우저 창 너비의 50%를 유지 */
height: 100px; /* 고정 높이 */
background-color: green;
}
</style>
</head>
<body>
<div class="box1">BOX-1</div>
<div id="box2">BOX-2</div>
</body>
4) box-sizing 속성
🍒 width 속성과 height 속성은 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 가리킨다
🍒 웹 문서에 여러 가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야 함
💡 box-sizing은 박스 모델의 크기를 쉽게 계산하기 위해 지정하는 속성
| 종류 | 설명 |
| boder-box | 테두리까지 포함해서 너빗값을 지정 |
| content-box | 콘텐츠 영역만 너빗값을 지정. 기본값. |
<head>
<style>
div {
width: 300px;
height: 300px;
border: 10px solid black; /* 테두리 스타일 */
padding: 30px; /* 안쪽 여백 공통 지정 */
}
.box1 {
box-sizing: border-box;
/* 박스의 테두리와 여백을 박스의 넓이와 높이에 포함. 넓이가 300px */
}
.box2 {
box-sizing: content-box;
/* 기본값과 동일. 넓이: 300 + 20 + 60 = 380px */
}
</style>
</head>
<body>
<div class="box1">01</div>
<div class="box2">02</div>
</body>
5) box-shadow 속성
🍒 사진 주변에 그림자를 추가하는 속성
🍒 수평 거리와 수직 거리는 필수로 지정 ▶️ 그림자의 위치는 수평 거리와 수직 거리의 값에 따라 움직이기 때문
box-shadow: <수평거리> <수직거리> <흐림 정도> <번짐 정도> <색상> inset
| 종류 | 설명 |
| <수평 거리> | 그림자가 가로로 얼마나 떨어져 있는지 나타냄. 양수는 오른쪽 / 음수는 왼쪽 |
| <수직 거리> | 그림자가 세로로 얼마나 떨어져 있는지 나타냄. 양수는 아래쪽 / 음수는 위쪽 |
| <흐림 정도> | 생략하면 0을 기본값으로 하여 진한 그림자를 표시. 값이 커질수록 부드러운 그림자를 표시하며 음수는 사용불가. |
| <번짐 정도> | 양수는 모든 방향으로 그림자가 퍼져 박스보다 그림자가 크게 표시. 음수는 모든 방향으로 그림자가 축소되어 보임. 기본값은 0 |
| <색상> | 한 가지만 지정할 수도, 공백으로 구분해서 여러 개 색상 지정 가능 기본값은 검정색 |
| inset | 이 키워드를 함께 표시하면 안쪽 그림자로 그린다. |
2. 테두리 스타일 지정
1) 박스 모델의 방향
🍒 박스 모델은 상하좌우 4개의 방향이 있어 테두리나 마진, 패딩 등을 지정할 때 한꺼번에 똑같이 지정하거나
모두 다르게 지정할 수도 있다.
🍒 맨 윗 부분은 top ▶️ 오른쪽은 right ▶️ 아래쪽은 bottom ▶️ 왼쪽은 left (시계 방향)
2) 테두리 스타일을 지정하는 border-style 속성
| 종류 | 설명 |
| none | 기본값. 테두리가 없다. |
| hidden | 테두리를 감춘다. 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않는다. |
| solid | 테두리를 실선으로 표시 |
| dotted | 테두리를 도트형태의 점선으로 표시 |
| dashed | 테두리를 직선형태의 점선으로 표시 |
| double | 테두리를 이중선으로 표시. 두 선 사이의 간격이 border-width값이 된다. |
| groove | 테두리를 창에 조각한 것처럼 표시. 홈이 파인 듯 입체 느낌이 난다. |
| inset | 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시 표에서 border-collapse: collapse일 경우 groove와 똑같이 표시 |
| outset | 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시 표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시 |
| ridge | 테두리를 창에서 튀어나온 것처럼 표시 |
<style>
#box1 { border-style:solid; } /* 실선 */
#box2 { border-style:dotted; } /* 점선 */
#box3 { border-style:dashed; } /* 짧은 직선 */
</style>
3) 테두리 두께를 지정하는 border-width 속성
border-width: <크기> | thin | medium | thick
🍒 속성 값이 1개 ▶️ 4개 방향 테두리 모두 같은 값 적용
🍒 속성 값이 2개 ▶️ 첫 번째 값은 top, bottom 테두리 / 두 번째 값은 left, right 테두리 적용
🍒 속성 값이 3개 ▶️ top, right, bottom 순으로 적용 / left 값은 마주보는 right 속성값과 똑같이 적용
🍒 속성 값이 4개 ▶️ top, right, bottom, left 순으로 적용
4) 테두리 색상을 지정하는 border-color 속성
🍒 테두리 색상을 지정
➡️ border-color 사용해서 4개 방향의 테두리 색상 한꺼번에 지정
➡️ border-top-color 처럼 테두리 방향을 넣어주면 색상을 하나씩 지정 가능
5) 테두리 스타일 묶어 지정하는 border 속성
🍒 테두리 스타일과 두께, 색상의 속성을 따로 사용하면 소스 길이가 길어짐
▶️ 3가지를 한꺼번에 표현하는 방법이 border 속성을 사용하는 것 ( 속성 값 순서는 상관 없다 )
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px; /* 고정 넓이 */
height: 100px; /* 고정 높이 */
border: green 2px solid; /* 테두리 굵기는 2px, 테두리 스타일 solid, 테두리 색상 green */
}
.box2 {
width: 300px;
height: 100px;
border: red dashed;
border-width: 1px 5px 10px 12px; /* 12시 부터 시계 방향으로 */
}
.box3 {
width: 300px;
height: 100px;
border: blue 1px dotted;
border-bottom-width: 5px; /* 아래 테두리만 따로 지정 */
}
.box4 {
width: 300px;
height: 100px;
border: pink dashed;
border-width: 5px 10px; /* (12시 6시) (3시 9시) */
}
</style>
</head>
<body>
<div class="box1">BOX-1</div>
<div class="box2">BOX-2</div>
<div class="box3">BOX-3</div>
<div class="box4">BOX-4</div>
</body>
6) 둥근 테두리를 만드는 border-radius 속성
border-radius: <크기> | <백분율>
🍒 border-radius 속성을 사용하면 꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리
▶️ 이 때 원의 반지름을 이용하면 둥근 정도를 나타낼 수 있다
🍒 라운드 지정하는 순서는 top-left, top-right, bottom-right, bottom-left
🍒 원 형태로 만들고 싶다면 border-radius 반지름값을 너비나 높이의 50%로 지정하면 된다.
<head>
<style>
div {
width: 300px;
height: 100px;
border: green 10px solid;
margin: 10px;
}
.box1 {
border-radius: 30px ; /* 전체 모서리를 30px로 라운드 지정 */
}
.box2 {
border-radius: 10px 20px 30px 40px;
/* top-left: 10px, top-right: 20px; bottom-right: 30px, bottom-left: 40px 라운드 지정 */
}
.box3 {
border-radius: 10px 40px;
/* top-left: 10px, top-right: 40px; bottom-right: 10px, bottom-left: 40px 라운드 지정 */
}
.box4 {
width: 100px; height: 100px; border-radius: 100px; /* 원모양 */
}
</style>
</head>
<body>
<div class="box1">BOX-1</div>
<div class="box2">BOX-2</div>
<div class="box3">BOX-3</div>
<div class="box4">BOX-4</div>
</body>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'HTML&CSS > CSS' 카테고리의 다른 글
| [CSS] 배경 이미지 지정과 속성 (0) | 2024.03.22 |
|---|---|
| [CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소 (0) | 2024.03.21 |
| [CSS] 수직 중앙 정렬 방법, overflow와 scroll (0) | 2024.03.21 |
| [CSS] display 속성과 사용 예, float, clear, 여백 조절-[margin, padding] (0) | 2024.03.20 |
| [CSS] CSS 스타일, 기본 선택자, 캐스케이딩 스타일 시트 (0) | 2024.03.19 |