CSS 여백 _마진 margin, auto

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘

HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘

자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고,

CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다.

자바스크립트는 크로스 플랫폼(cross platform),

객체지향 스크립트 언어로 웹페이지의 동작을 담당한다.

예를 들어 자바스크립트를 이용하면 ‘버튼을 클릭하면 밑에 날짜를 보여줘’라는

식의 명령을 내릴 수 있다.

[네이버 지식백과]

 

 

---

 

 

 

 

 

 

---

css_박스 모델의 구조

---

 

 

 

 

https://www.w3school캡쳐

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

CSS 여백_ margin 속성

---

 

 

CSSmargin 속성은정의된 경계 외부에서 요소 주위에 공간을 만드는 데 사용

 

 

CSS를 사용하면 여백을 완전히 제어할 수 있다.

요소의 각 측면에 대한 여백을 설정하는 속성이 있다

(위쪽, 오른쪽, 아래쪽 및 왼쪽).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

CSS 여백_ margin 속성_종류

---

 

 

 

각 측면에 대한margin을 지정하는 속성이 있다

margin-top

margin-right

margin-bottom

margin-left

 

 

https://www.w3school캡쳐

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

CSS 여백_ margin 속성

---

 

모든 여백 속성은 다음 값을 가질 수 있다

 

auto-브라우저가 마진을 계산

length-px, pt, cm 등의 여백을 지정

%-포함 요소 너비의 여백을 %로 지정

inherit-부모 요소에서 여백을 상속하도록 지정

팁 : 음수 값이 허용

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

CSS 여백_ margin 속성값이 4개일 때

---

 

 

 

margin: 25px 50px 75px 100px;

상단margin은 25px

오른쪽margin은 50px

아래쪽margin은 75px

왼쪽margin은 100px

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

CSS 여백_ margin 속성값이 3개일 때

---

 

margin: 25px 50px 75px;

상단margin은 25px

좌우margin은 50px

아래쪽margin은 75px

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

CSS 여백_ margin: auto 지정

---

 

 

 

auto 컨테이너내에서 요소를 가로로 가운데로 배치하도록 margin 속성을 설정

 

그러면 요소가 지정된 너비를 차지하고 남은 공간이 왼쪽과 오른쪽 여백 사이에서 균등하게 분할된다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

CSS 여백_ margin 축소

---

 

 

margin

요소의 위쪽 및 아래쪽 여백이 두 여백 중

가장 큰 단일 여백으로 축소되는 경우가 있다.

 

 

 

왼쪽 및 오른쪽 여백에서는 발생하지 않는다

위쪽과 아래쪽 여백 만!

 

 

 

 

 

 

 

위의 예에서 <h1> 요소의 아래쪽 여백은 50px이고

<h2> 요소의 위쪽 여백은 20px로 설정되어 있다.

 

 

 

 

상식은 <h1>과 <h2> 사이의 수직 여백이 총 70px (50px + 20px)일 것 같지만

실제로는 마진 축소로 인해 실제 마진은 50px입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

ㅣ읽느라 수고 많으셨어요~ㅣ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

---

 

 

 

 

 

 

 

부족한 글을 읽어주셔서 감사드립니다

 

아직 부족한 게 많으니

틀린 곳이 있다면

조언의 말씀 꼭 부탁드립니다!!!!

 

 

 

 

 

 

 

 

 

 

 

 

---