Size 속성과 Position 속성이란?
Size 속성은 요소의 크기를 지정하는 데 사용됩니다. 다양한 측정 단위(px, %, em, rem)를 활용하여 요소의 너비와 높이를 설정할 수 있습니다. 이를 통해 웹 페이지의 레이아웃을 제어하고 다양한 장치 및 화면 크기에 대한 반응형 디자인을 구현할 수 있습니다.
Position 속성은 요소의 위치를 조정하는 데 사용됩니다. position 속성을 설정하여 요소를 상대적이거나 절대적인 위치에 배치할 수 있습니다. 상대적인 위치는 요소의 원래 위치를 기준으로 배치되며, 절대적인 위치는 문서의 상대적인 위치가 아닌 특정한 좌표값에 따라 배치됩니다. 이를 통해 요소들을 정확한 위치로 배치하고 원하는 레이아웃을 구성할 수 있습니다.
CSS size 속성 이해하기
- width 속성: 요소의 너비를 설정합니다. 너비는 픽셀(px), 퍼센트(%), 또는 다른 상대적인 단위로 지정할 수 있습니다. 예를 들어, width: 300px;는 요소의 너비를 300픽셀로 설정합니다.
- height 속성: 요소의 높이를 설정합니다. 너비와 마찬가지로 픽셀, 퍼센트 등의 단위를 사용하여 지정할 수 있습니다. 예를 들어, height: 200px;는 요소의 높이를 200픽셀로 설정합니다.
- min-width와 max-width 속성: 요소의 최소 너비와 최대 너비를 설정합니다. 이를 통해 요소의 크기를 범위로 제한할 수 있습니다. 예를 들어, min-width: 100px; max-width: 500px;는 요소의 너비가 100픽셀에서 500픽셀 사이로 유지되도록 합니다.
- min-height와 max-height 속성: 요소의 최소 높이와 최대 높이를 설정합니다. 이를 사용하여 요소의 높이를 제한할 수 있습니다.
예제:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.box-1 {
width: 300px;
}
.box-2 {
height: 300px;
}
.box-3 {
min-width: 150px;
max-width: 400px;
}
.box-4 {
min-height: 150px;
max-height: 400px;
}
</style>
</head>
<body>
<div >기본 박스</div>
<div >너비 300px</div>
<div >높이 300px</div>
<div >너비 150px에서 400px 제한</div>
<div >높이 150px에서 400px 제한</div>
</body>
</html>
위의 예제 코드는 기본적인 박스(.box)를 만들고, 다양한 CSS size 속성을 적용한 추가적인 박스들을 보여줍니다. 각 박스에 설정된 속성을 확인하고, 그 결과를 브라우저에서 확인할 수 있습니다.
이를 통해 width, height, min-width, max-width, min-height, max-height 등의 속성이 어떻게 동작하는지 실습해보세요.
size 속성에 사용되는 다양한 측정단위
size 속성에서는 다양한 측정 단위를 활용하여 요소의 크기를 지정할 수 있습니다. 이 측정 단위들은 각각 특정한 용도와 특성을 가지고 있습니다. 다음은 널리 사용되는 네 가지 측정 단위에 대한 설명입니다:
- 픽셀(px): 픽셀은 가장 일반적으로 사용되는 측정 단위로, 고정된 크기를 지정할 때 주로 활용됩니다. 예를 들어, width: 300px;는 요소의 너비를 300픽셀로 설정합니다.
- 퍼센트(%): 퍼센트는 부모 요소의 크기에 상대적으로 크기를 지정할 때 사용됩니다. 예를 들어, width: 50%;는 요소의 너비를 부모 요소의 50%로 설정합니다.
- EM(em): EM은 상대적인 크기를 지정할 때 사용되며, 요소의 폰트 크기를 기준으로 설정됩니다. 예를 들어, font-size: 1.2em;은 요소의 폰트 크기의 1.2배로 크기를 설정합니다.
- REM(rem): REM은 루트 요소인 <html> 요소의 폰트 크기를 기준으로 상대적인 크기를 지정합니다. 예를 들어, font-size: 1.2rem;은 루트 요소의 폰트 크기의 1.2배로 크기를 설정합니다.
다음은 css에서 size 속성에 사용되는 다양한 측정 단위를 연습할 수 있는 예시 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
background-color: lightblue;
margin-bottom: 20px;
}
.box-percent {
width: 50%;
height: 150px;
background-color: lightgreen;
margin-bottom: 20px;
}
.box-em {
font-size: 20px;
width: 10em;
height: 100px;
background-color: lightyellow;
margin-bottom: 20px;
}
.box-rem {
font-size: 16px;
width: 15rem;
height: 120px;
background-color: lightpink;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div >이 박스의 너비는 300px이고 높이는 200px입니다.</div>
<div >이 박스의 너비는 부모 요소의 50%이고 높이는 150px입니다.</div>
<div >이 박스의 너비는 폰트 크기를 기준으로 10em이고 높이는 100px입니다.</div>
<div >이 박스의 너비는 루트 폰트 크기를 기준으로 15rem이고 높이는 120px입니다.</div>
</body>
</html>
위 코드를 HTML 파일로 저장하고 웹 브라우저에서 실행하면, 각 박스의 크기가 다른 측정 단위를 사용하여 지정되어 있는 것을 확인할 수 있습니다. 각 박스는 다른 배경 색상을 가지고 있어 시각적으로 구분됩니다. 측정 단위에 따라 크기가 어떻게 다르게 표현되는지 확인해보세요!
요소의 초과된 내용을 처리하는 방법
CSS에서 size 속성을 사용하여 요소의 크기를 조정하는 동안, 때로는 요소의 내용이 지정된 크기를 초과할 수 있습니다. 이럴 때는 overflow 속성을 사용하여 초과되는 내용을 처리할 수 있습니다.
overflow 속성은 요소 내의 내용이 요소의 경계를 넘어갈 때 어떻게 처리할지 지정합니다. 주로 다음과 같은 값들을 가집니다:
- visible: 내용이 요소의 경계를 넘어가더라도 숨기지 않고 보여줍니다.
- hidden: 내용이 요소의 경계를 넘어가면 숨깁니다.
- scroll: 내용이 요소의 경계를 넘어가면 스크롤바를 표시하여 스크롤 가능하도록 합니다.
- auto: 내용이 요소의 경계를 넘어가는 경우에만 스크롤바를 표시합니다.
아래에는 요소의 size를 조정하고 내용이 초과될 때 overflow 속성을 사용하는 CSS 예제 코드를 제공합니다:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.content {
width: 250px;
height: 250px;
background-color: lightblue;
}
.scroll-container {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: scroll;
}
.scroll-content {
width: 250px;
height: 250px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div >
<div >이 내용은 요소의 크기를 초과합니다.</div>
</div>
<div >
<div >이 내용은 요소의 크기를 초과하지만 스크롤바를 통해 스크롤할 수 있습니다.</div>
</div>
</body>
</html>
위 코드를 HTML 파일로 저장하고 웹 브라우저에서 실행하면, 첫 번째 컨테이너는 내용이 초과되지만 overflow 속성이 hidden으로 설정되어 있어 초과된 부분이 숨겨집니다. 두 번째 스크롤 컨테이너는 내용이 초과되면 스크롤바가 표시되어 내용을 스크롤할 수 있게 됩니다.
이 예제를 통해 overflow 속성을 사용하여 요소 내의 초과된 내용을 어떻게 처리하는지 확인해보세요!
