[CSS] Position, Flex

SeSac 교육 2주차에 접어들었다.

CSS에 대해 다양한 속성들에 대해 접해볼 수 있었다.

지난 블로깅과 마찬가지로 속성들이 어떻게 구현되는지 Codepen을 활용하여 정리해보겠다.

position

position 속성은 문서 상에서 요소들을 배치하는 방법입니다.

static, relative, absolute, fixed 중 1가지를 사용할 수 있으며 아래와 같은 방식으로 구현됩니다.

static

static은 position 속성의 기본값입니다. 일반적인 문서 흐름에 따라 문서를 요소를 배치하며, 속성들로 인해 영향을 미치지 않습니다.

See the Pen CSS 속성 by 권구호 (@pkrbmbjb-the-solid) on CodePen.

 

relative

일반적인 문서의 흐름에 따라 배치되지만 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.

기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 자기 자신을 기준으로 주어진 픽셀만큼 이동했습니다.

See the Pen CSS 속성 by 권구호 (@pkrbmbjb-the-solid) on CodePen.

absolute

relative와 달리 부모 요소에 의해 영향을 받습니다. 기존 static 속성을 가지고 있지 않고 조상 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

See the Pen CSS 속성 by 권구호 (@pkrbmbjb-the-solid) on CodePen.

 

fixed

뷰포트의 초기 블록을 기준으로 배치하는 것으로 일반적인 문서 흐름과 페이지 레이아웃에 공간을 배정하지 않습니다.

포지션을 부여한 대로 항상 특정 위치에 고정시킬 때 사용됩니다.

See the Pen CSS 속성 by 권구호 (@pkrbmbjb-the-solid) on CodePen.

sticky

fixed와 마찬가지로 스크롤을 계속해서 따라오는 요소를 생성하는데에 사용됩니다.

See the Pen CSS 속성 by 권구호 (@pkrbmbjb-the-solid) on CodePen.

fixed 요소와 공통점이 있지만 구현 결과에서 볼 수 있듯이 차이점이 존재합니다.

컨테이너 블록이 플로우 루트에서 지정한 임계값에 스크롤될 때까지만 상대 위치를 접는다는 점입니다. 

 

Flex

flex는 disply 속성 중 하나로 박스 레이아웃을 작성할 때 사용되는 방법 중 하나입니다.

flexible box, flexbox라고도 불리며, 일반적으로 부모 요소와 자식 요소로 구분됩니다.

부모 요소를 Flex Container(플렉스 컨테이너), 자식 요소를 Flex Item(플렉스 아이템)이라고 부르며, 부모에 설정된 속성에 따라 각각의 자식 요소들이 배치됩니다.

 

flex-direction

아이템들이 배치되는 축의 방향을 결정하는 속성들입니다.

가로는 row, 세로는 column으로 구현하고, 필요에 따라서 reverse를 통해 반대로 배치하기도 합니다

See the Pen CSS 속성 by 권구호 (@pkrbmbjb-the-solid) on CodePen.

flex-wrap

아이템 줄 바꿈을 어떻게 할지 결정하는 요소로 기본값은 nowrap입니다

See the Pen CSS 속성 by 권구호 (@pkrbmbjb-the-solid) on CodePen.

justif-content

메인 축 방향으로 아이템들을 정렬하는 속성입니다.

주로 쓰이는 속성은 flex-start, flex-end, center, space-between, space-around, space-evenly 등의 속성이 있으며 원하는 정렬 방식에 따라 부여해주면 됩니다.

See the Pen CSS 속성 by 권구호 (@pkrbmbjb-the-solid) on CodePen.

이 외에도 flex와 관련된 것들은 무궁무진합니다~

https://flexboxfroggy.com/#ko

Flexbox Froggy

개구리의 도움을 받아 css에 대한 이해도를 높여봅시다..!

참고

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex - CSS: Cascading Style Sheets | MDN

회고

1. 1주차에 비해 생각해야할 요소들이 많아졌다. 단순하게 html 요소를 뷰포트에 보이도록은 할 수 있지만, 배치해야할 요소들의 기본 구상과 어떤 속성들을 사용해야하는지 사전에 생각을 해보는 연습을 길러야겠다.

2. 러닝메이트를 모집하는데 관심 분야인 코딩테스트 관련 모집을 했는데 생각보다 많은 사람들이 관심을 가져주었다. 다들 시간이 소중하니 공부 방향이 모두에게 긍정적일 수 있도록 고민하고 진행해야겠다.