[CSS] 패딩과 마진 (padding, margin 속성을 통한 레이아웃 구성)

패딩과 마진(매우 중요)

border 기준으로 안쪽 여백은 padding

바깥 여백은 margin이다.

개발자 도구로 마우스를 올렸을 때 초록과 주황으로 구분할 수 있다.

---

F12로 접속 후 Element에서 영역 포인터 아이콘 선택 혹은
Ctrl + Shift + C로 개발자 도구의 마우스 포인터를 사용할 수 있다.

스타일 시트에서 p 태그에 패딩을 넣어보겠다.

<style>

        p {

            border: 1px solid #777;

            width: 300px;

            height: 100px;

            padding: 10px; /* 전부 */

            padding: 10px 20px; /* 위아래, 좌우 */

            padding: 10px 20px 30px 40px; /* 12시부터 시계방향 */

        }

    </style>

 

전부 10px, 초록색 패딩 영역 확인 가능

위아래 10, 좌우 20px 적용 확인 가능

위, 우, 밑, 좌 12시부터 시계방향 적용 확인 가능

padding right, left 등을 사용하여 하나하나 적용해도 된다.

마진을 세 번째 줄 패딩 방법처럼 적용한 사진

패딩과 사용 방법이 같다.

박스와 박스 간격 사이 참고

마진은 겹쳐진다.
현재 사진에서 위로 10px 적용

위에서는 아래로 16px 적용, 16px 간격만 벌어져있는 것을 확인할 수 있다.

 

 

확대 화면(왼쪽), css 박스정렬 적용(오른쪽)

스타일 시트에서 margin: 0(위아래) auto(양 옆 자동) 조정하여 화면을 어떤 크기로 두어도 가운데로 오는 것을 확인할 수 있다.

 

쿠팡 광고 예제

 

배운 것을 활용하여 광고 페이지를 만들어보았다.

첫 번째 목록은 가상 선택자 hover 사용하여 마우스가 올라가 있는 상태 때 저렇게 표현했다.

.gnb ul li a:hover{

            border-top: 3px solid #fff;

            border-bottom: 3px solid #fff;

        }

탑, 바텀에만 3px씩 border를 주었다.

% 와 max-width 등을 활용하여 확대 축소해도 같은 이미지 크기로 보존된다.

200%로 줌 한 모습. 이미지는 그대로인 것을 볼 수 있다.

 

마진을 통해 글씨들이 이미지와 간격을 이루고

border 라인 박스 내부 패딩 적용으로 본문 내용과 border 선과 거리가 있다.

 

버튼 또한 픽셀 크기를 만지지 않고도 패딩을 통해 구현 가능하다.

---