스타일시트 CSS margin 을 주는 방법
CSS style중에 가장 많이쓰는 것은 CSS style margin입니다. CSS margin속성은 요소 주위에 공간을 생성하는데 사용됩니다. margin속성은 경계 외부의 공백의 크기를 설정합니다.CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각면 (상단, 오른쪽, 하단, 왼쪽)의 여백을 설정하기위한 CSS 속성이 있습니다.
Margin - Individual Sides
CSS에는 요소의 각면에 대한 여백을 지정하는 속성이 있습니다.
margin-top / margin-right / margin-bottom / margin-left
모든 margin 속성은 다음 값을 가질 수 있습니다.
- auto - 브라우저가 여백을 자동으로 계산합니다.
- length - px, pt, cm 등으로 여백을 지정 할 수 있습니다.
- % - 포함하는 요소의 너비에 대한 여백을 %로 지정합니다.
- inherit - 부모 요소에서 여백을 상속해야 함을 지정합니다.
팁 : 음수 값이 허용됩니다.
margin 속성은 개체의 바깥쪽 여백을 조절할 수 있습니다. margin 은 백그라운드로 색상을 적용할 수 없으며 투명으로만 처리할 수 있습니다. 4가지 속성값인 margin-top, right, bottom, left 로 각각 적용이 가능하며 한번에 상하 좌우를 적용할 수도 있습니다.
아래 소스는 margin 을 적용한 전체 테스트 소스와 실행한 결과 입니다. 참고하시기 바랍니다.
margin속성 이미지는 이러 합니다.
- margin : 25px 50px 75px 100px; (시계방향이라고 생각하시면 됩니다.) 상단 / 오른쪽 / 하단 / 왼쪽 형태로 값이 적용되고
- margin : 25px 50px 75px; 세가지 정의의 마진은 상단 / 오른쪽 및 왼쪽 / 하단 여백 형식으로 이루어지며 margin속성 중간값(오른쪽 및 왼쪽)은 두개의 값 같이 적용 됩니다.
- margin : 25px 50px; 상단 및 하단 / 오른쪽 및 왼쪽
- margin : 25px; 네가지 모두 마진 적용됩니다.
- margin : auto; margin 속성을 설정하여 auto컨테이너 내에 요소를 가로로 가운데 놓을 수 있습니다.
그러면 요소가 지정된 폭을 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에서 균등하게 분할됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>margin-top: 100px / margin-bottom: 100px; / margin-right: 150px; / margin-left: 80px;</div>
</body>
</html>
[홈페이지만들기] - CSS 링크의 color와 background-color
[홈페이지만들기] - Vantage무료테마 기능 Home - Home Page Slider
[홈페이지만들기] - vertical-align와 text-align CSS 활용하여 정렬하기
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| 2017의 새로운 10종류의 무료 글꼴 / 무료폰트 (0) | 2017.04.20 |
|---|---|
| html 슬라이딩 소스 참고하세요. (2) | 2017.04.18 |
| CSS 링크의 color와 background-color (0) | 2017.02.13 |
| CSS style 컬러 기본설정 (0) | 2017.02.09 |
| vertical-align와 text-align CSS 활용하여 정렬하기 (2) | 2017.02.03 |
