[ CSS ] Layout/Display/Position/Flexbox/Grid

ꕥ

저는 백엔드 위주로 개발을 했기 때문에 프론트엔드는 알아볼 수 있을 정도로만 공부했었는데, 업무를 하면서 이미 만들어진 요소들을 알아보고 배치하려니 복잡하더라구요 ㅎㅎ; 그래서 CSS를 살펴볼까 합니다!

ꕥ

• Display : 요소가 HTML 페이지에서 어떻게 배치될지를 정의한다.

• 블록(block) : 항상 새로운 줄에서 시작하며, 가로 폭을 모두 차지한다. 위에서 아래로 배치된다. 기본적으로 너비와 높이 지정이 가능하다.

Ex) <h1>, <div>, <p>

• 인라인(inline) : 한 줄에 이어서 배치되며, 콘텐츠 크기만큼의 폭을 차지한다. 화면이 꽉 차면 다음 줄로 넘어간다. 기본적으로 너비와 높이 지정이 불가능하다.

Ex) <a>, <span>, <img>(예외적으로 너비와 높이 지정 가능)

 

이외에, 화면상에 전개식으로 요소가 배치되는 것이 아닌, 여러개의 요소를 겹쳐서 쌓는 스태킹(Stacking) 혹은 고정 헤더(Stiky Header)처럼 조작 흐름에 구애받지 않고 동작하고 싶을 때, position이라는 속성을 쓴다.

 

• Position : 요소의 위치를 결정한다. HTML의 흐름과 상관없이 배치하고 싶을 때 사용한다.

• static : position 속성의 기본 값. 원래 있어야 할 위치에 배치한다. 일반적인 HTML의 흐름을 따른다. top, right, bottom, left 속성은 적용되지 않는다.
• relative : 요소의 원래 위치를 기준으로 이동된 지점에 배치한다. 이동 후에도 원래 위치의 공간을 차지한다. 
• absolute : 가장 가까운 포지셔닝된 조상 요소를 기준으로 배치한다. relative 포지션과는 다르게 원래 위치의 공간을 차지하지 않는다. 기본 값인 static이 상위 요소라면 포지셔닝이 되지 않은(위치가 계산되지 않은) 속성이기 때문에 건너뛰고, 포지셔닝 된 상위의 조상 요소를 찾아서 배치한다. 포지셔닝된 조상 요소가 없으면 뷰포트를 기준으로 배치한다. 내용만큼 크기를 갖는다.
• fixed : 요소가 화면에 고정되어 스크롤해도 움직이지 않는다. absolute 포지션과 동일하게 원래 위치의 공간을 차지하지 않는다.
• stiky : 요소가 부모 요소 내에서 고정된다. 원래 위치의 공간을 차지한다. 
• z-index : 요소가 쌓이는 앞뒤의 순서를 배치한다. 값이 클수록 화면에 앞쪽에 표시되며, 값이 같으면 HTML 코드에서 뒤쪽에 선언된 요소가 더 앞쪽에 보인다.

개발하다 보면, 위젯바를 양 끝에 배치하고 싶을 때가 있는데, 이때 박스 공간에서 요소를 자유자재로 움직일 수 있는게 flexbox 속성이다. 요소의 개수가 많아져서 넘치면 어떤 형태로 보여줄지 정할 수도 있다.

• Flexbox : 컨테이너 안의 요소를 1차원(가로 또는 세로) 방향으로 배치한다.

• flex-direction : row와 column을 설정해 요소가 가로로 쌓일지, 세로로 쌓일지 배치 방향을 설정한다.
• justify-content : 기본축 방향에서 요소를 정렬한다.
• align-items : 교차축 방향에서 요소를 정렬한다.
• flex-wrap : 컨테이너 공간에서 요소가 넘칠 때 줄바꿈하여 배치한다.
• gap : 요소 사이의 간격을 설정한다.
• flex-grow : 요소를 얼마나 늘릴지 설정한다. 빈공간을 채우고 싶을 때 값을 1로 설정한다.
• flex-shrink : 요소를 얼마나 줄일지 설정한다. 크기를 고정하고 싶을 때 값을 0으로 설정한다.
• flex-basis : 요소의 기본 크기를 설정한다.

• Grid : 요소를 왼쪽에서 오른쪽으로, 위에서 아래로 2방향 2차원으로 배치한다. 바둑판과 같고 그리드라인과 그리드셀이 있다. 그리드의 크기를 바꾸고 그리드 라인 사이에 간격을 줄 수 있다. display를 grid로 설정하면 된다.

• grid-template-columns : 나누는 열의 크기를 설정한다.
• grid-template-rows : 나누는 행의 크기를 설정한다.
• grid-template :  나누는 행과 열의 크기를 한번에 설정한다.
• fr : 그리드 공간을 비율로 나눠 설정한다.
• repeat : 값을 반복하여 설정한다.
• gap : 요소 사이의 간격을 설정한다.
• grid-auto- columns : 행만 설정하고 열은 자동으로 배치한다.
• grid-auto-rows : 열만 설정하고 행은 자동으로 배치한다.
• grid-row : n/m 형식으로 n번째 그리드라인부터 m번째 그리드라인까지 배치한다.
• grid-column : 열 방향으로 공간을 설정한다.
• span : 크기를 설정할 때 사용한다.
• grid-area : 요소에 이름을 지정한다.
• grid-template-areas : 요소의 이름을 사용해 배치한다.