반응형
|
스타일 시트 CSS width 와 height 속성 사용법 |
|
환경: Eclipse Mars, CSS3 |
width 와 height 속성은 단어 의미 그대로 가로 길이, 세로 길이를 의미합니다. 값을 정의하는 방법은 숫자 뒤에 단위를 적으면 됩니다. 단위는 % 와 px 가 있습니다. px 는 픽셀 값을 말하며 % 는 상위 컨테이너에서 차지하는 비율을 말합니다.
▼ width, height 속성은 padding, borders, margins 가 포함된 길이가 아닙니다. padding, borders, margins 과 별개의 넓이와 높이 값입니다. 샘플에는 div 태그에 넓이와 높이를 지정했습니다. 넓이는 100% 이므로 브라우저 끝까지 div 가 넓어집니다. 그리고 높이는 100px 로 셋팅 했으며 border 의 2px 은 별도의 길이 값입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
div {
width: 100%;
height: 100px;
background-color: yellow;
border: 2px solid;
}
</style>
</head>
<body>
<div>width height 적용 </div>
</body>
</html>
▼ 그런데 100% 로 넓이를 적용했는데도 양쪽에 공간이 남죠. 이것은 body 에 기본적인 margin 값이 들어가 있어서 입니다. 그럼 빈 공간을 없애 보도록 하겠습니다. body 의 CSS 속성 값 중에서 margin 을 0 으로 주면 됩니다. 그리고 각 방향 별로 조절할 수 있는 속성은 margin-top:0; margin-left:0; margin-right:0; margin-bottom:0; 입니다. 이 중에서 원하는 방향의 margin 속성을 적용할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
margin: 0;
}
div {
width: 100%;
height: 100px;
background-color: yellow;
border: 2px solid;
}
</style>
</head>
<body>
<div>width height 적용 </div>
</body>
</html>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성 (0) | 2024.02.18 |
|---|---|
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
| 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법 (0) | 2020.01.10 |
| 스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 (0) | 2020.01.05 |
