css
CSS에서 너비(width)와 높이(height) 는 웹 요소의 크기를 지정하는 데 사용되는 웹 개발에 중요한 속성입니다.
width: 50%; 는 부모 요소의 반을 차지하는 너비를 가지도록 요소를 설정합니다.border (테두리) 를 설정하고 width 200px 과 height 150px 을 설정했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
text-align: center; /* 텍스트 가운데 정렬 */
border: 2px solid black; /* 테두리 설정 */
width: 200px; /* 너비 200px */
height: 150px; /* 높이 150px */
}
</style>
<title>예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML너비가 200px , 높이가 150px 인 박스가 만들어졌습니다.
이번에는 크기를 키워서 width 300px 과 height 200px 로 설정하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
text-align: center; /* 텍스트 가운데 정렬 */
border: 2px solid black; /* 테두리 설정 */
width: 300px; /* 너비 300px */
height: 200px; /* 높이 200px */
}
</style>
<title>예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML너비가 300px , 높이가 200px 인 박스가 만들어졌습니다.
백분율(%) 단위를 사용하여 상위 요소에 대한 상대적인 너비를 설정했습니다.
비교를 위해 body 에 border 를 주었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
border: 2px solid yellow; /* 테두리 설정 */
}
.box {
text-align: center; /* 텍스트 가운데 정렬 */
border: 2px solid black; /* 테두리 설정 */
width: 50%; /* 너비 50% */
height: 200px; /* 높이 200px */
}
</style>
<title>예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML너비를 50%로 설정했고, box는 부모 요소인 body 에 절반 크기가 되었습니다.
auto 값을 사용하면 내용에 따라 자동으로 크기가 조절됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
text-align: center; /* 텍스트 가운데 정렬 */
border: 2px solid black; /* 테두리 설정 */
width: 300px; /* 너비 300px */
height: auto; /* 높이 auto */
}
</style>
<title>예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML너비가 300px , 높이가 auto 인 박스가 만들어졌습니다.
높이는 p태그의 크기만큼 자동으로 조절 되었습니다.
CSS의 너비와 높이 속성은 웹 디자인에서 중요한 역할을 하며, 다양한 설정을 통해 화면에 적절한 레이아웃을 구성할 수 있습니다.
들어가며 소프트웨어가 처리해야 하는 데이터 양이 늘어날수록, 단순히 기능 구현만으로는 성능과 효율을 보장하기 어렵습니다. 특히…
들어가며 소프트웨어를 구현할 때 성능 최적화나 안정성을 높이려면, 단순히 고수준 코드만 신경 쓰는 것을 넘어…
들어가며 소프트웨어가 복잡해질수록, 단순히 알고리즘의 시간복잡도만으로는 모든 문제를 해결할 수 없습니다. 특히 운영체제 수준에서는 다중…
들어가며 복잡한 소프트웨어가 원활히 동작하려면 단순히 코드만 잘 짜는 것으로는 부족합니다. 트랜잭션 처리나 대규모 데이터…
들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…
들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…