CSS

🔗 참고

1. MDN : margin
2. MDN : padding
3. Github : position
4. MDN : position
5. MDN : flex
6. MDN : grid
7. MDN : CSS box model

📌 margin과 padding

margin

요소의 네 방향 바깥 여백 영역을 설정한다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성이다.

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;

padding

요소의 네 방향 안쪽 여백 영역을 설정한다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성이다.

/* 네 면 모두 적용 */
padding: 1em;

/* 세로방향 | 가로방향 */
padding: 5% 10%;

/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;

/* 전역 값 */
padding: inherit;
padding: initial;
padding: unset;

📌 position

position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.

static

요소를 일반적인 문서 흐름에 따라 배치. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다. default

relative

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.

• 오프셋 : 오프셋(offset)이란 top, left, right, bottom 값을 의미하고 기준이 되는곳으로부터 얼마만큼 떨어져있는지를 나타내기 위해 필요한 속성이다.

absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치. 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, left 값이 지정.

fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치.

• 뷰포트 : 뷰포트(viewport)는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 된다.
• 컨테이닝 블록 : 컨테이닝 블록이란 요소의 위치와 크기를 지정하는 데 사용하는 블록을 의미합니다. 상대적인 값이나, 요소의 위치를 지정하는 기준이 필요할 때 사용한다는 의미힙니다.

sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. 오프셋은 다른 요소에는 영향을 주지 않는다.
static + fixed의 특징을 가진다.

📌 flex와 grid

flex

주로 단일 축 방향의 레이아웃을 구성하는 데 사용되며, 주로 수평 방향으로 레이아웃을 정렬한다. flex는 아이템들의 크기가 자유로워 유동적으로 변할 수 있다. flex는 유동적인 레이아웃 변화를 구성하기 적합하다.

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.

grid

2차원 그리드 시스템을 구성하는 데 사용되며, 수평과 수직 방향으로 모두 레이아웃을 정렬할 수 있다. grid는 아이템들의 크기를 미리 정의하여 각 셀의 크기를 일정하게 유지한다. grid는 미리 정의된 2차원 그리드 구조를 유지하기 때문에 레이아웃 변화가 적은 경우에 적합하다.

📌 CSS box model

CSS에서 박스는 콘텐츠 영역을 포함하며, 이는 텍스트, 이미지, 혹은 HTML 요소들로 이루어져 있습니다. 이 요소들의 각 면은 안쪽 여백, 테두리, 또는 바깥 여백으로 감싸질 수 있습니다. 박스 모델은 이 요소들을 함께 사용함으로써 박스를 CSS로 표현하는 방식을 설명합니다.

즉 box model = 콘텐츠 크기 + padding 값 + border 값 + margin 값 이다.

box-sizing

박스 모델의 크기를 계산한다.

1. content-box : 박스의 콘텐츠 영역의 경계. 기본값
2. padding-box : 안쪽 여백 영역의 경계. 안쪽 여백이 없을 시, content-box과 동일.
3. border-box : 박스 테두리의 경계. 테두리가 없을 시, padding-box과 동일.
   4.margin-box : 바깥 여백의 경계. 바깥 여백이 없을 시, border-box과 동일.
4. stroke-box : SVG의 stroke bounding box. CSS에서는 content-box과 동일.
5. view-box : SVG에서 가장 가까운 SVG 뷰포트 요소의 원점 상자를 의미. 이 상자는 해당 요소에 대한 viewBox 속성에 의해 설정된 초기 SVG 사용자 좌표계의 너비와 높이를 가진 직사각형이다. CSS에서는 border-box와 동일.

🔗 box-sizing에 대한 자세한 내용은 여기!