🐧박스모델 관련 스타일 속성-1
🎨박스모델(BoxModel) : 텍스트 또는 이미지를 출력하기 위해 태그를 이용하여 생성한 사각형 모양의 영역
📌margin-top : 박스모델과 박스모델의 간격 관련 스타일 속성
→ margin-top, margin-right, margin-bottom, margin-left
◈ 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기)초기값
─────────────────────────────────────margin-top: 15px;
─────────────────────────────────────margin-right: 15px;
─────────────────────────────────────margin-bottom: 15px;
─────────────────────────────────────margin-left: 15px;
─────────────────────────────────────margin: 15px 15px 15px 15px;※ top >> right >> bottom >> left
─────────────────────────────────────margin: 15px 15px;※ top&bottom right&left
─────────────────────────────────────margin: 15px;※ top&bottom&right&left
📌border-style : 박스모델 외곽선의 모양 관련 스타일 속성
→ border-style-top, border-style-right, border-style-bottom, border-style-left
◈ 속성값 : none(기본), solid(실선), dotted(점선), double(이중선) 등border-style: solid;─────────────────────────────────────
📌border-width : 박스모델 외곽선의 굵기 관련 스타일 속성
→ border-width-top, border-width-right, border-width-bottom, border-width-left
◈ 속성값 : px, 키워드(thin, medium, thick 등)border-width: 2px;─────────────────────────────────────
📌border-color : 박스모델 외곽선의 색 관련 스타일 속성
→ border-color-top, border-color-right, border-color-bottom, border-color-left
border-color: red;─────────────────────────────────────
📌border : 박스모델 외곽선 관련 모든 스타일 속성값 설정 */
border: 2px solid red;─────────────────────────────────────
📌padding : 박스모델 외곽선과 콘텐츠(Content) 영역의 간격 관련 스타일 속성 */
→ padding-top, padding-right, padding-bottom, padding-left /
◈ 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) /padding: 10px;
📃24_box1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> /* 박스모델(BoxModel) : 텍스트 또는 이미지를 출력하기 위해 태그를 이용하여 생성한 사각형 모양의 영역 */ div { /* margin-top : 박스모델과 박스모델의 간격 관련 스타일 속성 */ /* → margin-top, margin-right, margin-bottom, margin-left */ /* 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) */ margin-top: 15px; margin-right: 15px; margin-bottom: 15px; margin-left: 15px; margin: 15px 15px 15px 15px; /* top >> right >> bottom >> left */ margin: 15px 15px; /* top&bottom right&left */ margin: 15px; /* top&bottom&right&left */ /* border-style : 박스모델 외곽선의 모양 관련 스타일 속성 */ /* → border-style-top, border-style-right, border-style-bottom, border-style-left */ /* 속성값 : none(기본), solid(실선), dotted(점선), double(이중선) 등 */ border-style: solid; /* border-width : 박스모델 외곽선의 굵기 관련 스타일 속성 */ /* → border-width-top, border-width-right, border-width-bottom, border-width-left */ /* 속성값 : px, 키워드(thin, medium, thick 등) */ border-width: 2px; /* border-color : 박스모델 외곽선의 색 관련 스타일 속성 */ /* → border-color-top, border-color-right, border-color-bottom, border-color-left */ border-color: red; /* border : 박스모델 외곽선 관련 모든 스타일 속성값 설정 */ border: 2px solid red; /* padding : 박스모델 외곽선과 콘텐츠(Content) 영역의 간격 관련 스타일 속성 */ /* → padding-top, padding-right, padding-bottom, padding-left */ /* 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) */ padding: 10px; } .size1 { /* width : 박스모델 폭 관련 스타일 속성 */ /* 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) */ width: 400px; /* height : 박스모델 높이 관련 스타일 속성 */ /* 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) */ /* → 박스모델의 높이를 변경할 경우 태그 내용은 박스모델 중앙(middle)에 미출력 */ /* → 박스모델의 높이보다 태그내용이 큰 경우 박스모델의 높이는 자동 변경 */ height: 50px; /* vertical-align : 세로 방향 정렬 관련 스타일 속성 */ /* 속성값 : top(기본), bottom, middle 등 */ vertical-align: middle; } .size2 { width: 50%; height: 50px; } </style> </head> <body> <h1>박스모델 관련 스타일 속성</h1> <hr> <div class="size1">Box Model-1</div> <div class="size2">Box Model-2</div> </body> </html>
🐧박스모델 관련 스타일 속성-2
🎨border-radius : 박스모델 외곽선 모서리 관련 스타일 속성
📌border-radius : 박스모델 외곽선 모서리 관련 스타일 속성
속성값 : px, % - 박스모델 외곽선의 모서리에 원을 그려 둥글게 표현
.radius1 { border-radius: 10px; }
─────────────────────────────────────.radius2 { border-radius: 30px; }
─────────────────────────────────────.radius3 { border-radius: 50%; }
─────────────────────────────────────.radius4 { border-top-left-radius: 20px; border-top-right-radius: 20px; }
─────────────────────────────────────.radius5 { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
─────────────────────────────────────.radius6 { /* 가로/세로 : 타원 */ border-radius: 30px/10px; }
📃25_box2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> div { width: 100px; height: 100px; border: 1px solid black; margin: 10px 30px; background: green; } /* border-radius : 박스모델 외곽선 모서리 관련 스타일 속성 */ /* 속성값 : px, % - 박스모델 외곽선의 모서리에 원을 그려 둥글게 표현 */ .radius1 { border-radius: 10px; } .radius2 { border-radius: 30px; } .radius3 { border-radius: 50%; } .radius4 { border-top-left-radius: 20px; border-top-right-radius: 20px; } .radius5 { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .radius6 { /* 가로/세로 : 타원 */ border-radius: 30px/10px; } </style> </head> <body> <h1>박스모델 관련 스타일 속성</h1> <hr> <div class="radius1"></div> <div class="radius2"></div> <div class="radius3"></div> <div class="radius4"></div> <div class="radius5"></div> <div class="radius6"></div> </body> </html>
🐧박스모델 관련 스타일 속성-3
🎨box-shadow : 박스모델 그림자 관련 스타일 속성
📌box-shadow : 박스모델 그림자 관련 스타일 속성
◈ 속성값 : 가로 세로 범짐 확장 색상
.shadow1 { box-shadow: 10px 10px 5px 5px black; }
─────────────────────────────────────
◈ inset 속성값을 사용하여 박스모델 내부로 그림자 효과 제공.shadow2 { box-shadow: 10px 10px 5px 5px black inset;
📃26_box3.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> div { width: 200px; height: 100px; border: 1px solid black; background: green; margin: 50px; } /* box-shadow : 박스모델 그림자 관련 스타일 속성 */ /* 속성값 : 가로 세로 범짐 확장 색상 */ .shadow1 { box-shadow: 10px 10px 5px 5px black; } /* inset 속성값을 사용하여 박스모델 내부로 그림자 효과 제공 */ .shadow2 { box-shadow: 10px 10px 5px 5px black inset; } </style> </head> <body> <h1>박스모델 관련 스타일 속성</h1> <hr> <div class="shadow1"></div> <div class="shadow2"></div> </body> </html>
