기초) 여백(padding/margin)과 선(border) 정리

 

 

 

여백

 

 

 

1️⃣padding

안쪽 여백

 

 

 

- 적용 방향 -

 

padding : 20px 30px 40px 50px;

상 / 우 / 하 / 좌

 

padding : 20px 30px 40px;

상 / 좌우 / 하

 

padding : 20px 30px;

상하 / 좌우

 

padding : 20px ;

상하좌우 전 방향

 

 

---

 

2️⃣Margin

바깥 여백

 

 

 

-적용 방향-

 

margin : 20px 30px 40px 50px;

상 / 우 / 하 / 좌

 

margin : 20px 30px 40px;

상 / 좌우 / 하

 

margin : 20px 30px;

상하 / 좌우

 

margin : 20px ;

상하좌우 전 방향

 

 

---

 

*TIP*

코드 양을 줄이자!

 

 

여백 값을 한 방향으로 만 줄 수 있는데,

 

 

예) padding-top: 20px

혹은

padding-top:20px padding-bottom: 20px;

 

 

위처럼 적는 것보다 차라리,

 

 

padding: 20px 0 0 0 ;

혹은

padding : 20px 0 20px;

 

 

이렇게 적으면 훨씬 깔끔하고 보기 좋다.

 

 

margin도 똑같이 적용!

 

---

 

*TIP*

{margin: 0 auto;}

 

 

html의 요소들은

두 가지 성격이 있는데

 

 

하나는

Block level element

 

 

다른 하나는

inline level element

 

 

div는 블럭 요소들 중 하나이고

 

 

위 코드를 해석하자면

위아래는 여백이 없고

좌우 값은 auto,

 

 

즉 화면의 정 중앙으로

정렬 시킬 때 많이 사용한다

 

 

---

 

 

선

 

 

1️⃣boarder

적용 방향

 

 

{border: 1px solid red;}

상하좌우 전 방향에 적용,

선의 굵기 /선의 종류 /색상

 

 

한 방향으로 주고 싶다면

border-top:

border-right

border-bottom:

border-left:

로 입력하여 적용 가능

 

 

 

2️⃣border 값 변경

 

 

방향 별

선의 굵기 /종류 /색

세 가지의 값들 또한

별도로 설정 가능

 

 

border-width: 2px 3px 4px 5px;

border-style: solid double dotted dashed;

border-color : red blue black orange;

 

 

모두 상 우 하 좌 방향.

 

---

 

*Border 선의 특징*

 

 

보더의 굵기(width)를

굵게 하여 들여다보면

재미있는 부분이 있는데

 

 

바로

선과 선이 만나는 부분이

직전이 아닌 대각선으로

되어 있다는 것!

 

 

 div {border: 100px solid;
      border-color: red blue black green;}

 

 

 

대각대각

 

 

위 특성을 활용하면

다양한 모양을 만들어 낼 수 있는데

한 번 삼각형을 만들어 보자.

 

 

두 가지 방법.

 

 

 

1️⃣ 기본 설정 속성들을 사용!

 

div: { width: 1px; height:2px;
             border-width: 300px;
             border-style: solid;
             border-color: red transparent transparent transparent;}

 

 

 

2️⃣ 가상 선택자인

div:after{ content:"";

를 사용!

    div:after {content:"";
             border-width: 300px;
             border-style: solid;
             border-color: red transparent transparent transparent;}

 

 

 

*색상 값은

투명을 뜻하는

transparent라는 값을 사용.