[부트캠프] TIL - CSS(margin,padding)

7월 5일부로 내일배움캠프에 정식합류하게되었다.

상당히 늦게 합류하게 된 상황에서, 사전캠프 커리큘럼을 보고 면담도 진행해 보며 생각해 본 결과,

이거를 처음부터 다 해서 따라가기에는 무리가 있을것으로 판단하여 개인적으로 강의에서 필요한 부분을 들으면서

CODEKATA 등을 풀며 배우고 느낀부분에 대해 TIL을 작성하는것이 맞다고 생각이 들었다.

1. CSS(margin, padding)

---

웹개발 종합반 스파르타플릭스 프로젝트 강의를 수강하며, css활용법에 대하여. 정확하게 알지 못한 부분들이 있어서 몇가지 체크를 한다.

 

• margin

margin은 요소의 경계(border)와 요소 바깥의 다른 요소 사이의 외부 여백을 설정하는 값,

margin은 강당에 의자를 일렬로 배치할 때 의자들 사이의 일정한 간격으로 이해해도 될것같다.

• padding

padding은 요소의 콘텐츠와 요소의 경계(border) 사이의 내부 여백을 설정하는 값,

padding은 요소의 경계와 요소 안의 컨텐츠 사이의 간격을 의미한다.

margin과 padding에 대해서는 둘다 여백을 설정하는 값이라는 점에 공통점이 있지만, 어떤 경계를 기준으로 어떤 것과

(margin은 경계의 바깥요소, padding은 경계의 내부요소) 여백을 둘 것이냐에 차이점이 있다는 것을 명심하자.

 

margin과 padding을 직접 타이핑 하며 확인 할 수 있었다.

 

 

<style>
.mycards {
	background-color: green;
    width: 1000px;
    margin: 20px auto 0px auto;
}
</style>

 

CSS에서 margin은 요소의 외부 여백을 나타냅니다, marign : 6px; 이렇게 하나의 값을 선언함으로서

상하좌우 4방향의 값을 동시에 선언할 수 있지만, 위와 같은 방법으로 4가지의 값을 선언할 수도 있는데.

이때는 (상, 우, 하, 좌)의 순서를 의미합니다. 따라서 mycards 클래스를 포함한 태그의 위쪽 여백을 20px

오른쪽과 왼쪽 여백을 auto, 아래쪽 여백을 0px로 선언한다는 의미.

 

*여기서 auto란 요소의 해당 여백을 자동으로 설정한다는 의미인데, 단순히 그게 끝이 아니라 

요소를 수평방향에서 가운데 정렬 할 때 사용되기도 한다, 무슨 의미냐면. 

만약 mycards 클래스를 포함한 요소의 너비값이 고정값이라면? -> 이 경우엔 width가 1000px로 고정

해당 요소를 포함하고 있는 컨테이너의 크기가 1000px 보다 큰 경우, 나머지 여백을 좌 우 균등하게 자동으로 배분하겠다는 의미이다.

결국 수평방향에 있어서 가운데 정렬이 된다는 뜻.