007 CSS 공부 (3) 박스모델

Top

007 CSS 공부 (3) 박스모델

Daily Study/Web Dev

2021. 1. 14.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>boxmodels</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	/* 스타일의 초기화 작업 (전체에 패딩 마진을 다 0으로 적용*/
	.box {
		width: 600px;
		/*border: 5px solid black;*/
		/*padding: 20px;*/
		margin: 30px;
		background-color: lime;
	}
	/*
	boxmodels
		content width / height
		border
		padding 컨텐츠와 보더 사이의 여백
		margin 컨텐츠와 
	*/

	.box2 {
			border: 5px solid black;
			padding: 20px;
	}

	.box3 {
		box-sizing: border-box;
		/*css3에서 추가된 속성*/
		/*내가 지정한 width값에서 padding이나 border가 바뀌어도 유지됨*/
	}
	</style>
</head>
<body>

<div class="box">
	Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque adipisci ducimus quia quis unde ipsum laborum nisi sed. Explicabo similique nihil autem aut adipisci eum mollitia officiis non esse!
</div>

<div class="box box2">
	<!-- 클래스 이름에 띄어쓰기를 하면 box box2 두 가지 클래스의 스타일을 다 적용할 수 있음 -->
	Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque adipisci ducimus quia quis unde ipsum laborum nisi sed. Explicabo similique nihil autem aut adipisci eum mollitia officiis non esse!
</div>

<div class="box box2 box3">
	Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque adipisci ducimus quia quis unde ipsum laborum nisi sed. Explicabo similique nihil autem aut adipisci eum mollitia officiis non esse!
</div>


</body>
</html>

box-sizing: border-box 를 쓰면

컨텐츠랑 패딩 보더두께 등 합쳐서 내가 설정한 width 값에 맞춰짐

이걸 안 쓰면 두 번째처럼 컨텐츠값은 width에 고정되고 패딩값 따로 보더 두께값 따로 적용되서 더 길어짐

세 번째가 box-sizing 적용한 예시

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>boxmodels</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}

	.box {
		display: block;
		/* 인라인 태그로 만든걸 블록형태 박스모델로 쓰려면 display : block 넣어줘야함*/
		margin: 20px;
		padding: 20px;
		/*padding-top: 200px;*/
		/*padding: 100px 50px;*/
		/*padding: 100px 50px 10px;*/
		/*padding: 100px 50px 10px 0;*/
		border: 5px solid black;
		border-style: double;
		background-color: lime;
		/* margin-,padding-,border- top right bottom left*/
		/* 값을 하나만 적으면 네 방향 모두 적용, 두개 적으면 상하/좌우 적용 */
		/* 세 개 적으면 상/좌우/하 적용*/
		/* 네 개 적으면 상우하좌 시계방향으로 값을 적용*/

		/* border-style : solid | dashed | dotted | double | inset | outset | ridge | groove */
		/* border-color : */
		/* border-width : */
	}
	</style>
</head>
<body>

<div class="box">
	Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque adipisci ducimus quia quis unde ipsum laborum nisi sed. Explicabo similique nihil autem aut adipisci eum mollitia officiis non esse!
</div>
<div class="box">
	Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque adipisci ducimus quia quis unde ipsum laborum nisi sed. Explicabo similique nihil autem aut adipisci eum mollitia officiis non esse!
</div>

<div class="box">
	Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Iusto doloremque adipisci ducimus quia quis unde ipsum laborum nisi sed. Explicabo similique nihil autem aut adipisci eum mollitia officiis non esse!
</div>

<span class="box">
	Lorem ipsum dolor sit amet consectetur adipisicing, elit. Molestias non eaque consequatur pariatur, nam ad sequi ut. Delectus tempore voluptatibus saepe quod dolorem repudiandae, ex molestias beatae voluptas iusto laborum.
</span>


</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>background</title>
	<style>
		body {
			background: url(img/twt.png) no-repeat fixed 90% 20px;
			background-attachment: fixed;
			/* 스크롤 고정 */
		}
		.box {
			width: 600px;
			padding: 20px;
			border: 3px solid black;
			background-color: yellow;
			background-image: url(img/twt.png);
			/* background-color를 background보다 나중에 작성해야 값이 삶*/
			background-repeat: no-repeat;
			/* repeat | no-repeat | repeat-x | repeat-y */
			background-position: 50% 50%;
			/* 0~100%, 0%일때 왼쪽 끝, 위쪽 끝을 의미함, 음수로 px도 가능 프레임 밖으로 나가게 */
			

		}
	</style>
</head>
<body>

<div class="box">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi laboriosam, illo, eveniet impedit aut dolore ea, rerum commodi quae corrupti nobis doloremque dolor. Accusantium ad dolorem cumque quaerat at officiis delectus ipsum temporibus architecto! Delectus voluptate nam aliquam asperiores labore atque velit a porro omnis voluptatibus, dolor nulla unde vel eos magnam ex nesciunt odio! Quos, voluptas. Maxime laboriosam tenetur veniam, dicta sunt magni minima unde quibusdam dolore praesentium consequuntur laudantium, autem odit aperiam corrupti soluta. Provident quae, asperiores possimus, numquam animi earum obcaecati sequi dolores ullam accusamus repudiandae, vitae dignissimos, vel id inventore porro rem aperiam dolorem. Eum, aspernatur.
</div>

<div class="box">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi laboriosam, illo, eveniet impedit aut dolore ea, rerum commodi quae corrupti nobis doloremque dolor. Accusantium ad dolorem cumque quaerat at officiis delectus ipsum temporibus architecto! Delectus voluptate nam aliquam asperiores labore atque velit a porro omnis voluptatibus, dolor nulla unde vel eos magnam ex nesciunt odio! Quos, voluptas. Maxime laboriosam tenetur veniam, dicta sunt magni minima unde quibusdam dolore praesentium consequuntur laudantium, autem odit aperiam corrupti soluta. Provident quae, asperiores possimus, numquam animi earum obcaecati sequi dolores ullam accusamus repudiandae, vitae dignissimos, vel id inventore porro rem aperiam dolorem. Eum, aspernatur.
</div>

<div class="box">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi laboriosam, illo, eveniet impedit aut dolore ea, rerum commodi quae corrupti nobis doloremque dolor. Accusantium ad dolorem cumque quaerat at officiis delectus ipsum temporibus architecto! Delectus voluptate nam aliquam asperiores labore atque velit a porro omnis voluptatibus, dolor nulla unde vel eos magnam ex nesciunt odio! Quos, voluptas. Maxime laboriosam tenetur veniam, dicta sunt magni minima unde quibusdam dolore praesentium consequuntur laudantium, autem odit aperiam corrupti soluta. Provident quae, asperiores possimus, numquam animi earum obcaecati sequi dolores ullam accusamus repudiandae, vitae dignissimos, vel id inventore porro rem aperiam dolorem. Eum, aspernatur.
</div>
	
</body>
</html>

background-image: url(이미지파일 경로); 로 배경에 이미지를 넣고

background-position: 50% 50%; 로 컨텐츠 중앙에 이미지가 오게 할 수 있다.

background-position 은 음수값으로도 설정할 수 있는데

자잘한 아이콘 같은 것들은 하나하나 따로 이미지 경로를 설정해주는 게 아니라

하나로 합쳐놓고

음수 값으로 포지션을 지정해서 원하는 위치에서 원하는 아이콘 부분만 나타나게 설정할 수 있다.

여기서 잘라서 사용하듯이 포지션을 음수로 지정해서 지정하는 것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>background</title>
	<style>
		.box {
			width: 200px;
			padding: 20px;
			border: 3px solid black;
			background: url(img/bbssvv.jpg) no-repeat 50% 50%;
		}
		.box2 {
			 /*background-size: 100% auto;*/
			 /*background-size: auto 100%;*/
			 background-size: cover;
			 background-clip: content-box; /*컨텐츠 영역에만 배경 표시*/
			 background-origin: content-box;
		}
	</style>
</head>
<body>

<div class="box">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi laboriosam, illo, eveniet impedit aut dolore ea, rerum commodi quae corrupti nobis doloremque dolor. Accusantium ad dolorem cumque quaerat at officiis delectus ipsum temporibus architecto! Delectus voluptate nam aliquam asperiores labore atque velit a porro omnis voluptatibus, dolor nulla unde vel eos magnam ex nesciunt odio! Quos, voluptas. Maxime laboriosam tenetur veniam, dicta sunt magni minima unde quibusdam dolore praesentium consequuntur laudantium, autem odit aperiam corrupti soluta. Provident quae, asperiores possimus, numquam animi earum obcaecati sequi dolores ullam accusamus repudiandae, vitae dignissimos, vel id inventore porro rem aperiam dolorem. Eum, aspernatur.
</div>

<div class="box box2">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi laboriosam, illo, eveniet impedit aut dolore ea, rerum commodi quae corrupti nobis doloremque dolor. Accusantium ad dolorem cumque quaerat at officiis delectus ipsum temporibus architecto! Delectus voluptate nam aliquam asperiores labore atque velit a porro omnis voluptatibus, dolor nulla unde vel eos magnam ex nesciunt odio! Quos, voluptas. Maxime laboriosam tenetur veniam, dicta sunt magni minima unde quibusdam dolore praesentium consequuntur laudantium, autem odit aperiam corrupti soluta. Provident quae, asperiores possimus, numquam animi earum obcaecati sequi dolores ullam accusamus repudiandae, vitae dignissimos, vel id inventore porro rem aperiam dolorem. Eum, aspernatur.
</div>
</body>
</html>

background-size: cover; 속성을 부여하면

창 크기에 맞게 가로나 세로에 맞춰서 이미지를 잘라서 보여줌

background-clip: content-box; 속성은

컨텐츠가 표시되는 부분에만 배경을 표시함, 배경이미지가 시작하는 부분은 border가 시작되는 부분

background-origin: content-box; 속성은

컨텐츠가 표시되는 부분에서 배경이미지가 시작되게 함

'Daily Study > Web Dev' 카테고리의 다른 글

009 CSS공부(5) 레이아웃 관련 스타일 (0)	2021.01.25
008 CSS 공부(4) 표 관련 스타일 (0)	2021.01.25
006 CSS 공부(2) 폰트 스타일 (0)	2021.01.14
005 CSS 공부(1) (0)	2021.01.11
004 HTML 공부(4) (0)	2021.01.07