목차
- margin-inline 예제 - 인라인방향 양쪽 끝에 마진 주기
- margin-inline 정의
- margin-inline 구문
- margin-inline 예제 - 인라인방향을 상하로 변경 (writing-mode 속성 사용)
- margin-inline 예제 - 인라인방향을 우좌로 변경 (direction 속성 사용)
margin-inline 예제 - 인라인방향 양쪽 끝에 마진 주기
※ 인라인 앞뒤 마진이 동일값인 경우, 값을 1개만 지정해도 됨.
<style>
div {
background-color: pink;
width: 25%;
height: 100px;
float: left;
}
#hz {
background-color: lightblue;
border: 1px solid black;
margin-inline: 50px;
}
</style>
<div>홈짱닷컴</div>
<div id="hz">Homzzang.com</div>
<div>그누보드 코딩 강의</div>
결과보기
margin-inline 정의
요소의 인라인방향 시작마진과 끝마진의 값을 일괄 지정.
(즉, margin-inline-start 속성과 margin-inline-end 속성을 한번에 지정한 셈.)
1. 속성값 개수가 1개냐 2개냐에 따라 의미 다름.
- 속성값 개수가 1갱이면, 시작마진과 끝마진을 동일하게 일괄 지정한 것임. (예) margin-inline: 50px; // 시작마진 50px, 끝마진 50px
- 속성값 개수가 2개이면, 시작마진과 끝마진을 각각 지정한 것임. (예) margin-inline: 10px 50px; // 시작마진 10px, 끝마진 50px
2.
margin-inline 및 margin-block 속성은 블록 및 인라인 방향에 따라 달라집. 반면, margin-top, margin-bottom, margin-left and margin-right 속성은 방향 고정임.
3.
writing-mode 및 direction 속성 이용해 인라인방향 변경 가능.
4.
- 기본값: auto
- 상속여부:X
- 애니가능: O
- CSS버전:CSS3
- JS구문: object.style.marginInline="10px 50px"
5.
IE 제외한 주요 최신 브라우저 모두 지원.
6. MDN margin-inline 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline
margin-inline 구문
selector {margin-inline: auto|value|initial|inherit;}
[속성값]
auto
요소의 기본 인라인방향 마진값. (기본값)
value
px, pt, cm 등 길이 단위 사용해 절대 길이로 표현 (음수값 허용)하거나 % 단위 사용해 부모 너비에 대한 상대 길이로 지정 가능.
- 값이 1개인 경우 - 인라인 시작마진과 끝마진이 동일. (예) 50px
- 값이 2개인 경우 - 앞값은 시작마진, 뒷값은 끝마진. (예) 10px 50px
initial
이 요소의 기본값 사용.
inherit
부모요소의 속성값 상속.
margin-inline 예제 - 인라인방향을 상하로 변경 (writing-mode 속성 사용)
<style>
#box {
width: 60%;
}
#box > div {
writing-mode: vertical-rl;
block-size: 100%;
box-sizing: border-box;
}
#box > div:not(#hz) {
background-color: pink;
inline-size: 20%;
}
#hz {
background-color: lightblue;
inline-size: 30%;
border: 1px solid black;
margin-inline: 10px 50px;
}
</style>
<div id="box">
<div class="both">홈짱닷컴</div>
<div id="hz">Homzzang.com</div>
<div class="both">그누보드 코딩 강의</div>
</div>
결과보기
margin-inline 예제 - 인라인방향을 우좌로 변경 (direction 속성 사용)
<style>
div {
background-color: pink;
width: 25%;
height: 100px;
float: left;
}
#hz {
background-color: lightblue;
border: 1px solid black;
margin-inline: 10px 50px;
direction: rtl;
}
</style>
<div>홈짱닷컴</div>
<div id="hz">Homzzang.com</div>
<div>그누보드 코딩 강의</div>
결과보기
