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의 너비와 높이 속성은 웹 디자인에서 중요한 역할을 하며, 다양한 설정을 통해 화면에 적절한 레이아웃을 구성할 수 있습니다.
Enum이란? Enum은 "enumeration"의 줄임말로, 특정 값들의 집합을 정의할 수 있는 특별한 클래스입니다. 예를 들어, 요일,…
래퍼 클래스(Wrapper Class)란? 자바에서 래퍼 클래스는 기본 데이터 타입(Primitive Data Type)을 객체(Object)로 감싸는 클래스입니다. 자바의…
서론 Java에서 문자열을 다룰 때, 문자열의 변경이 빈번하게 발생하는 경우라면 StringBuilder 클래스를 사용하는 것이 매우…
String 클래스란? 자바에서 String 클래스는 가장 널리 사용되는 클래스 중 하나입니다. 문자열 시퀀스를 나타내며, 문자열을…
불변 객체란? 불변 객체(Immutable Object)는 생성된 이후 그 상태를 변경할 수 없는 객체를 의미합니다. 불변…