개발 1도 모르는 사람

[CSS] margin, padding, border 정리 본문

CSS/내가 보려고 만드 문법

[CSS] margin, padding, border 정리

지구젤리귀여워 2023. 11. 5. 05:03
728x90

.


1. margin

개념적으로는 border 의 바깥쪽을 밀어내는 역할을 한다.

필자는 margin을 처음 배울때는
태그를 추가할때마다 style="margin: 0;" 이런식으로 작성하다가 나중가서는
<head> 태그 안에서 <style> 태그를 생성하여 넣어 주었는데 더 나중가서는
CSS 폴더를 따로 만들어서 작성했다.  쓸데없는 말이네

<style>
.클래스명 또는 #아이디명{
margin: 10%;				// 한가지만 쓸경우 전체에 적용이 된다.
margin: 5% 20%;				// 두가지를 쓸경우 상하 좌우 순으로 적용된다.
margin: 5% 20% 10%;			// 세가지를 쓸경우 상 좌우 하 순으로 적용된다.
margin: 5% 20% 10% 30%; 	// 네가지를 쓸경우 상 우 하 좌 순이다 ( 위쪽에서부터 시계방항 )
margin: 0 auto; 			// 중앙 정렬
</style>

 

위 코드를 하나씩 그림으로 본다면 이해가 쉬울 것 이다.

1. margin: 10%;


그림으로 보았을때 모든면이 10%로 일정하게 margin 영역이 펼쳐져 있음을 볼수 있다.


2. margin: 5% 20%;


1번째 그림과는 다르게 이번에는 상 하 부분이 5%의 영역을, 좌 우 부분이 20%정도로
펼쳐져있음을 확인했다. 



3. margin: 5% 20% 10%;



코드에서 설명한 바와 같이  상 5% ,  좌우 20% , 하 10% 로 넓게 펴져있음을 확인.



4. margin: 5% 20% 10% 30%;


이번 그림을 보았을때 margin 을 네개로 나누어 썻을때 시계방향순으로 밀어내는 범위를 정할 수 있다
라는 것을 확인했다.


5. 마지막 margin: 0 auto;


마지막 가운데 자동정렬 까지 확인.

여기 까지 봄으로써 우리는 margin 이 html 에서 어떤 부분을 조절하고 있는지 볼수 있엇다.


우리는 어떤 사이트를 가든 " F12 " 를 누르면 개발자 도구를 열 수 있다. 그때 마다 항상 보이던 것


바로 이부분이다. 필자는 배웠던 내용으로 홈페이지를 원하는 대로 만들어 보려고 했는데
그때마다 부딪힌 부분이 있었다. margin 부분에서 보면 알수 있듯이. 저  연노랑인지
연주황인지 알 수 없는 미지의 색깔의 범위가 나를 미치게 했는데 이게 도대체 뭐길래
내가 원하는대로 내가 생각한대로 태그나 텍스트가 들어가질 않는건가 싶었다
그래서 그때는 margin 을 -10% 이나 -500px 이런식으로 위치를 강제적으로 잡았엇는데.

오늘 의문이 풀렸다.

덤으로 margin, border, padding, 내가 지정한 태그의 넓이에 대한 이해가 조금은 높아졌다.

우선 margin: 20%; 으로 설정을 맞추어 놓았다.



위 사진은 개발자 도구함의 오른쪽 아래 margin 영역으로 마우스를 가져다 댄 화면이다.
아까 위에서 지겹게 스크린샷을 찍은 margin  이다.

개발자 도구함 에서 보면 알 수 있듯이 margin 은 border ( 테두리 선 ) 바깥에 있는 부분을
20% 만큼 밀어내고 있는 것이다. 



2. border

이어서 border 를 보기전에. border는 우리가 태그 안에 넣은 부분들의 테두리 범위를 차지한다.
현재 border의 코드는 border : 10px solid white;  인데 아래 코드를 보면 어떤 부분인지 눈에보인다.

이 부분을 개발자 도구로 살펴 보자.


마우스를 가져다 대자 노란색으로 변하는 부분이 보이는가?
굳이 살펴보지 않아도 알수 있엇지만 마우스를 대보니 더욱 확실하게 알수 있었다.

3. padding

마찬가지로 padding 을 살펴보자
현재 padding 코드는 padding : 50px; 이다.



이 글의 첫 시작 사진부터 padding이 50px로 들어가 있엇는데
글을 읽으며 2. 번항목에 border가 태그의 테두리범위를 맡고 있다고 말했을때
뭔가 이상하지는 않았는가?

만약 이상함을 느꼇다면 그 이유가 바로 이것이다.


뜬금없지만 위 사진에 비유해보겠다. 단순히 좌우로 생각해서 보자면
태그는 장기에 해당한다.
padding 은 내장지방이다.
border 는 복강.
마지막으로 margin은 피하지방 인것이다.

그렇게 어려운 내용이 아니지만 왜인지 모르게 너무 열심히 써버렷다. 좀 과했던거 같다.
갑자기 좀 과하게 설명한 것 같아서 글을 마칩니다. 허허




글 쓸때마다 하나씩 투척!!