CSS와 박스모델

CSS

CSS와 박스모델

컴맹숙 2022. 11. 13. 00:02

1. 블록 레벨 & 인라인 레벨

블록 레벨 : 태그를 사용했을 때 혼자 한 줄을 차지하는 것

해당 요소의 너비가 100%

h1~6, div, p 태그 등

인라인 레벨 : 태그를 사용했을 때 콘텐츠만큼만 영역을 차지하는 것

나머지 공간에 다른 요소가 올 수 있음

span, img, strong 태그 등

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블록레벨, 인라인레벨</title>
    <style>
        body  * {
				border:1px solid blue;
			}
		.accent {
			color:red;
			font-weight:bold;
		}
    </style>
</head>
<body>
    <h2>두 번 세 번 피곤하게</h2>
    <div>자꾸 질문하지마 <p class="accent">내 장점</p>이 뭔지 알아</div> <!--p는 블록-->
    <p>바로 <br>솔직한거야</p>
    <hr>
    <h2>두 번 세 번 피곤하게</h2>
    <div>자꾸 질문하지마 <span class="accent">내 장점</span>이 뭔지 알아</div> <!--span은 인라인-->
    <p>바로 <br>솔직한거야</p>
</body>
</html>

2. 박스 모델 기본 구성

블록 레벨의 요소를 박스 모델이라고 칭한다.

콘텐츠 영역, 패딩, 테두리, 마진으로 구성되어 있다.

(패딩 : 박스와 콘텐츠 영역 사이 여백

마진 : 여러 박스 모델 사이의 여백)

3. 콘텐츠 영역의 크기 width, height

박스 모델의 콘텐츠 영역 크기를 지정할 땐

너비 width, 높이 height를 사용

px, em, %, auto 값을 사용할 수 있다.

(%는 부모 요소가 기준)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>박스 모델 너비 지정하기</title>
    <style>
        body{background-color: pink;}
        div {
            border:2px solid #000;
            margin-bottom: 20px;
        }
        .box1 { /*너비, 높이 고정*/
            width:400px;
            height:100px;
        }
        .box2 { /*부모 요소 body, 즉 브라우저 크기에 따라 가변너비*/
            width:50%;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

4. 박스 모델 그림자 효과 box-shadow

box-shadow의 속성값

수평 거리(필수) : 양수는 오른쪽, 음수는 왼쪽에 그림자 생성

수직 거리(필수) : 양수는 아래, 음수는 위에 그림자 생성

흐림 정도 : 클수록 부드러운 그림자

번짐 정도 : 양수는 그림자 커짐, 음수는 그림자 축소

색상

inset : 안쪽 그림자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>박스모델에 그림자 효과</title>
    <style>
        div {
			width:200px;
			height:100px;
			display:inline-block;
			margin:15px;
			border:1px solid blue;
			border-radius:20px;
		}
        .box1 {box-shadow:2px -2px 10px 5px pink;}
        .box2 {box-shadow: 5px 5px 50px 5px skyblue;}
    </style>
</head>
<body>
    <div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.

'CSS' 카테고리의 다른 글

여백 조절하기 (0)	2022.11.15
테두리 스타일 지정하기 (0)	2022.11.13
표 스타일 (2)	2022.11.12
목록 스타일 (0)	2022.11.12
텍스트 관련 스타일 (0)	2022.11.12

현재글CSS와 박스모델

컴공과 컴맹숙 🐾