[CSS] CSS 박스모델

WEB-Front end/*CSS

by 주초위왕 2023. 4. 22. 23:58

크기 단위

CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등

이 중에서 많이 쓰이는건

1. 백분율 단위(%)

2. 배수 단위(em)

3. 픽셀 단위(px)

백분율 단위(%)는 기본 쿠기를 100%로 놓고, 그에 대한 상대적인 크기를 설정.

배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 성대적인 크기를 설정합니다.

픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적이 크기를 설정합니다.

<style>
        #large { font-size: 200%; }
        #small { font-size: 0.7em; }
        #fixed { font-size: 20px; }
</style>
</head>
<body>
    <h1>CSS에서의 크기 단위입니다.</h1>
	<p id="large">글꼴의 크기를 200% 으로 변경합니다.</p>
	<p>글꼴의 기본 크기인 100% 입니다.</p>
	<p id="small">글꼴의 크기를 0.7em 으로 변경합니다.</p>
	<p id="fixed">글꼴의 크기를 20px 로 변경합니다.</p>
</body>

1배 = 1em = 100%을 의미

크기 조절

CSS에서 크기 조절을 위해 사용할 수 있는 속성

1. height

2. width

<style>
	div {
		height: 200px;
		width: 500px;
		border: 2px solid lightsalmon;
		}
</style>
</head>

<body>
	<h1>height와 width 속성</h1>
	<div>이 div 요소의 높이는 200px이고 너비는 500px입니다.</div>
</body>

height를 100px로 해주는 경우

박스 모델(box model)

모든 html요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다.

패딩(padding)

테두리(border)

마진(margin)

내용(content)

<style>
	div {
		background-color: black;
		color: white;
		width: 400px;
		padding: 50px;
		border: 20px solid deeppink;
		margin: 50px;
	    {
</style>
</head>
<body>
	<h1>CSS 박스 모델</h1>
	<div>CSS 박스 모델입니다.<br><br>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis nibh eu finibus posuere. Duis vehicula ipsum quis purus eleifend mollis. Mauris ut tincidunt felis. Donec commodo justo elit. Praesent eget erat leo. Fusce vitae metus molestie, cursus lorem ullamcorper, fringilla erat. Vivamus turpis massa, dictum vitae ligula ut, eleifend iaculis nunc. In hac habitasse platea dictumst. Fusce eleifend tellus vulputate convallis cursus.
	</div>
	<p>패딩(padding)과 마진(margin)값을 변경하며 눈에 보이지 않는 속성의 존재를 느껴보세요!</p>
</body>

'WEB-Front end > *CSS' 카테고리의 다른 글

[CSS] Google 앞 페이지 따라만들기 (0)	2023.05.24
[CSS] 깃허브 클론코딩 (1) (0)	2023.05.13
[CSS] Padding(패딩) 속성 (0)	2023.04.22
[CSS] 여백(margin)속성 (0)	2023.04.21
[CSS] CSS font-size에 대해서 알아보자. (0)	2023.04.20