• 회원가입
  • 로그인
  • 구글아이디로 로그인

[box] CSS - margin-inline 속성 - 인라인방향 양쪽 끝 바깥 여백 주기 (= margin-inline속성 = 마진인라인속성)

목차
  1. margin-inline 예제 - 인라인방향 양쪽 끝에 마진 주기
  2. margin-inline 정의
  3. margin-inline 구문
  4. margin-inline 예제 - 인라인방향을 상하로 변경 (writing-mode 속성 사용)
  5. 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>

 

결과보기

 


분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012