[html/css] margin 속성 자세히 알아 보기
(margin-top, margin-left, margin-bottom, margin-left 설정 방법)
어제는 border 속성에 대해 자세히 알아보았는데요... border와 함께 자주 사용되는 속성이
border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)
padding과 margin 입니다.
|
padding: 본문 내용과 border 사이의 여백 border : 선 (선 굵기를 다양하게 지정할 수 있으며, 선을 그리지 않을 수도 있음) margin : border와 바깥과의 여백.
|
P-B-M 이라고 외워두시면 좋습니다.
어제 배운 border(선)와 바깥과의 여백을 margin이라고 하는데
오늘 배울 부분이 이 margin 속성 사용법입니다.
[margin 마진 위, 오른쪽, 아래, 왼쪽 따로 따로 지정하기]
CSS란? (HTML과 CSS의 차이, CSS 작성법) 참조해주세요~
*아래 지정값은 px, cm, %로도 지정할 수 있습니다*
*음수값도 지정 가능(예: -10px)
margin-top (상단 여백)
margin-right (오른쪽 여백)
margin-bottom (아래 여백)
margin-left (왼쪽 여백)
사용 예
table {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
[4면 한꺼번에 margin 지정하기]
table {
margin: 5px 7px 3px 0px; (위, 오른쪽, 아래, 왼쪽 순임)
}
[4면이 모두 같을 때 margin 지정하기]
table {
margin: 5px;
}
[위, 오른쪽 & 왼쪽, 아래 margin 지정하기]
table {
margin: 5px 10px 0px:
}
[위 & 아래, 오른쪽 & 왼쪽 margin 지정하기]
table {
margin: 5px 10px;
}
[margin 자동 지정하기]
auto는 브라우저가 자동으로 계산 하는 값입니다.
하지만 margin:auto는 ie8에서는 작동하지 않으므로
문서 타입(DOC TYPE)을 규정해주어야 합니다
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)
table {
margin: auto 0; (위아래 값이 자동, 좌우가 0px임)
}
table {
margin-left: auto;
}
[연습하기]
그럼 지금까지 배운 div 태그 float 속성 border 속성 margin 속성을 이용해 아래 레이아웃을 만들어 보겠습니다
html 작성
|
<!DOCTYPE html> <html> <body> </html> |
margin.css로 저장
|
div#b |
[주의] 전체 너비 계산 식: 본문 너비+사이드바 너비+padding+margin+border
[주의] IE8과 IE 이전 버전에서는 width 값에 padding과 border 값이 포함되어 있습니다.
이 문제를 해결하기 위해 <!DOCTYPE html>을 선언해 주어야 한다고 합니다!
실행 화면입니다
너비 계산 관련 아래 링크를 참조해주세요~
사이드바 너비 조정 방법, 티스토리 본문과 사이드바 간격 조정 방법
'css' 카테고리의 다른 글
| [html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) (2) | 2014.03.31 |
|---|---|
| [html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both) (4) | 2014.03.26 |
| [html/css 기초] border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) (1) | 2014.03.24 |
| DIV 태그를 이용하여 레이아웃 만들기 (1) | 2014.03.19 |
| [css 기초] float 속성에 대하여 (3) | 2014.03.18 |
댓글