반응형
CSS 높이,너비, 최대 너비
CSS의 height와 width는 요소의 높이와 너비의 길이를 설정한다.
-> 여기height와 width은 padding, margin, border을 포함하지않는다.
-> 오직 padding, margin, border안의 내부 영역의 높이와 너비를 설정한다.
CSS의 max-width 특성 요소의 너비를 최대의 길이로 설정한다.
CSS 높이,너비 값들
height와 width의 특성들은 다음 값들을 갖는다.
auto: 기본값이다. 브라우저는 높이와 너비를 자동으로 계산한다.
length: px, cm 등으로 높이와 너비를 정의한다.
%: block안에서 몇 % 차지하는지를 정의한다.
initial: 높이, 너비를 기본값을 설정한다.
inherit: 높이, 너비 값이 상위 값에서 상속받는다.
CSS example
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
div{
background-color: lightblue;
height:100px;
width:250px;
}
</style>
</head>
<body>
<h1>CSS 높이와 너비</h1>
<div>div 요소에서 높이를 100px 너비를 250px로 맞출것이다.</div>
</body>
</html>
max-width 설정하기
max-width 속성은 요소의 최대 너비를 설정하는데 사용이된다.
최대 너비를 cm, px, 등과 같은 길이 값이나 %(백분율)로 지정하거나 none으로 지정을 하지 않을수도 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
div{
background-color: lightblue;
height:100px;
max-width:900px;
}
</style>
</head>
<body>
<h1>최대 너비 설정</h1>
<div>동해물과 백두산이 마르고 닳도록 하느님이
보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</div>
<p>윈도우 브라우저의 크기를 조절해보세요</p>
</body>
</html>위의 코드를 직접 실행해보고 브라우저 크기를 조절하여 차이를 알아보는 것을 추천한다.
반응형
'웹프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] Fonts(폰트)의 모든 것 (0) | 2023.09.11 |
|---|---|
| [CSS] 텍스트에 관한 모든 것 (0) | 2023.09.11 |
| [CSS] 다양한 border 속성들 알아보기 (0) | 2023.09.10 |
| [CSS] CSS background-image 배경꾸미기, repeat (0) | 2023.09.10 |
| [CSS] CSS Backgrounds 배경 꾸미는 법 (0) | 2023.09.10 |
댓글