반응형
|
스타일시트 CSS margin 을 주는 방법 |
margin 속성은 개체의 바깥쪽 여백을 조절할 수 있습니다. margin 은 백그라운드로 색상을 적용할 수 없으며 투명으로만 처리할 수 있습니다. 4가지 속성값인 margin-top, right, bottom, left 로 각각 적용이 가능하며 한번에 상하 좌우를 적용할 수도 있습니다.
▼ 아래 각각의 샘플은 margin-top, margin-right, margin-bottom, margin-left 를 div 에 적용한 결과입니다. 한쪽만 적용했을 때 다른 div 개체와 함께 어떤 식으로 표현이 되는지 쉽게 이해가 가실 겁니다.
▼ 이렇게 각각 한쪽만 표현하거나 한번에 margin 속성으로 표현할 수도 있습니다. 아래 샘플처럼 margin: 30px 30px 30px 30px 로 값을 셋팅 하시면 4방향 모두 30px 씩 적용이 됩니다. 방향은 시계 방향으로 첫 번째 값이 top 이며 마지막이 left 입니다. 중간에 적용시키고 싶지 않은 영역이 있다면 0 을 표현하시면 되겠죠.
▼ 아래 소스는 margin 을 적용한 전체 테스트 소스와 실행한 결과 화면입니다. 참고하시기 바랍니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title> 정렬 </title>
<style type="text/css">
.vi{
border-radius: 5px;
background-color: #2e5b86;
border-style: solid;
border-color: #5d5d5d;
border-width: 1px;
color: #FFFFFF;
padding:15px
}
.top { margin-top: 30px; }
.right { margin-right: 30px; }
.bottom { margin-bottom: 30px; }
.left { margin-left: 30px; }
.margin-all {margin: 30px 30px 30px 30px}
body {margin: 0px 0px 0px 0px}
</style>
</head>
<body>
<div id="" class="top vi">
They are arguing that it should be legal for migrant
workers to be paid less than the legally-binding hourly
wage for Korean nationals.
</div>
<div id="" class="right vi">
They are arguing that it should be legal for migrant
workers to be paid less than the legally-binding hourly
wage for Korean nationals.
</div>
<div id="" class="bottom vi">
They are arguing that it should be legal for migrant
workers to be paid less than the legally-binding hourly
wage for Korean nationals.
</div>
<div id="" class="left vi">
They are arguing that it should be legal for migrant
workers to be paid less than the legally-binding hourly
wage for Korean nationals.
</div>
<div id="" class="margin-all vi">
They are arguing that it should be legal for migrant
workers to be paid less than the legally-binding hourly
wage for Korean nationals.
</div>
</body>
</html>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 (0) | 2020.01.05 |
|---|---|
| 스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기 (0) | 2020.01.04 |
| 스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 (1) | 2020.01.03 |
| 스타일시트 CSS text-align 을 이용한 정렬 방법 (1) | 2019.12.29 |
| 스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 (0) | 2019.04.08 |
| 스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법 (0) | 2019.04.02 |
| 스타일 시트 CSS gradient 종류 중 linear-gradient 그라데이션 적용하는 방법 (0) | 2019.03.17 |
| 스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기 (0) | 2019.03.06 |
