[새싹x코딩온] 풀스택 개발자 부트캠프 과정 2주차-1 회고 | CSS 마무리

지난 포스팅에서는 HTML과 CSS수업에 관하여 정리를 해보았는데요 이번에는 CSS에서 또 하나의 중요한 개념인

CSS3의 display의 여러가지 속성과 position에 대해 이야기해볼까합니다 display 속성은 사실 이전 포스팅과 간접적인 관련이 있는 속성인데요 바로 block, inline, inline-block 이 세가지가 아주 중요한 개념이라고 말했었습니다 오늘은 display 속성에서 중요한 또 다른 속성들과 css에서빼놓을 수 없는 position속성을 한번 알아보겠습니다

 

display란?

원래 이전포스팅에서 작성해야 했지만 다시 알아보자면 화면 즉 웹페이지(브라우저)에서 어떻게 보여질 것인가 에 대해 결정하는 중요한 속성이라고 볼 수 있는데요 예를들어 2개의 박스가 있을때 이 박스의 특성(블록, 인라인)을 지정하면서 가로로 배치될 것인지 세로로 배치될 것인지 지정하는 속성이었습니다 이번에는 display 속성에서 자주 쓰이는 새로운 속성에 대해 알아보겠습니다

 

Flex

Flex는 레이아웃 시스템 중 하나의 속성으 Flex가 적용된 요소의 자식들을 행과 열로 구성하겠다는 뜻입니다

과거 Flex가 없을때 레이아웃을 잡기 위해선 신경써야할 부분이 굉장히 많았습니다 브라우저별 지원가능한 속성들을 체크하면서 크로스 브라우징 이슈를 최대한 보완하면서 만들어야 했기때문에 굉장히 힘들었습니다 하지만 CSS3의 등장으로 정착이 조금 늦어지긴 했지만 Flex 속성을 통하여 좀 더 수월하고 안정성있게 레이아웃을 잡을 수 있게 되었습니다 이제 Flex의 세부적인 속성들과 구조를 알아보겠습니다

 

 

Flexbox model 구조

developer.mozilla.org 레퍼런스 참조자료

 

Flex는 container(부모)와 item(자식)의 구조로 이루어져있습니다

자식(item)의 기본 축(디폴트축)은 부모의 메인축입니다 가로축을 기준으로 좌측 정렬이 기본값입니다

Flex에서는 이 기본이 되는 축을 변경할 수 있습니다 기본값 가로에서 가로이지만 끝점에서 세로이지만 끝점에서

여기서 끝점이란 위 이미지의 end point를 뜻합니다 기준 축 뿐만 아닌 역방향 정렬도 가능합니다

 

Flex-direction

direction속성은 위에서 말한 기준 축을 변경할 수 있는 속성입니다

기본값은 row값(가로정렬)이며 세로 정렬로 변경할때는 column값으로 변경합니다

 

Flex-wrap

wrap속성은 줄바꿈을 뜻합니다 text가 아니라 엘리먼트가 자식인데 왜 줄바꿈인지 의문이 생길 수 있습니다 Flex는 기본적으로 item이 부모의 크기를 초과해도 자동으로 줄바꿈이 안됩니다 그래서 wrap 속성으로 자동으로 줄바꿈이 될 수 있게 해줘야합니다 이 개념을 이해 하셨다면 wrap 속성을 주지않는다면 좌우 비율이 적용이 안될거라는것을 알 수 있습니다

 

align-items

align-items 속성은 container의 교차축(수직)에 따라 정렬됩니다 값은  stretch, center, start, end가 있으며 stretch는 기본값입니다 자동으로 container 의 크기에 맞춰 정렬됩니다 center는 container 의 교차축을기준으로 가운데 정렬됩니다

start는 container 의 가장자리 start point(시작점)을 기준으로 정렬됩니다 end는 container 의 가장 끝자리 end point(끝 점)을 기준으로 정렬됩니다

 

justify-content

justify-content 속성은 container의 메인축(가로축)을기준으로 정렬하는 속성입니다 속성으로는 start, center, space-between, space-around, space-evenly 등이 있으며  start는 축의 시작점으로 정렬, center는 중심으로 정렬 space-between은 처음과 끝을 기준으로 정렬 space-around는 item을 양쪽 여백의 절반을 나누어 정렬 space-evenly은 item이 서로 간의 동일한 여백으로 정렬됩니다

 

이와같이 레이아웃 작성시 편리하게 정렬 할 수 있는 다양한 속성들이 존재합니다 그리고 Flex뿐만이 아닌 Grid라는 속성도 존재하는데요 이 속성도 차후에 어떠한 CSS속성인지 알아볼 시간이 나면 포스팅해보겠습니다

 

 

---

 

Position

position속성은 display 속성과 비슷하게 화면의 요소의 배치에 관여하는 속성입니다

그런데 성격이 조금 틀린데요 display 속성은 배치에 관여한다면 position 속성은 요소의 위치에 관여하는 속성입니다 어떤 위치에 배치할 것 인가를 결정하는 속성으로 기본 속성은 static이며 relative, absolute, fixed, sticky 정도가 있고 각 속성별로 어떤 역할을 하는지 확인해 보겠습니다

 

static

siatic 속성은 position 의 기본값 이면서 문서의 흐름을 방해하지않습니다

 

relative 

relative 속성은 문서의 흐름을 해치지않고 자신을 기준으로 위치값을 적용합니다 즉 left, right, top, bottom 값을 주게되면 최초 자신이 있던 위치로부터 오프셋을 주게되며 요소가 공간을 차지합니다

 

absolute

absolute 속성은 문서의 흐름을 해치고 요소가 공간을 차지하지 않습니다 즉 사용즉시 요소가 있던 자리는 다음 요소가 차지하게됩니다 absolute 를 사용한 요소의 부모 중 relative를 사용한 요소가 있다면 그 요소를 기준으로 오프셋을 조정합니다

 

fixed

fixed 속성은 absolute와 동일하게 문서의 흐름을 해치고 공간을 차지하지않습니다 다른 점은 부모와 상관없이 뷰포트를 기준으로 오프셋을 조정합니다 이 때문에 스크롤을 하여도 항상 지정한 위치에서 보여지는 특징이 있습니다

 

index-z

index-z 속성은 위의 위치속성을 사용할때 화면상의 우선순위를 지정할 수 있는 속성입니다 쉽게 생각하자면 포토샵의 레이어 기능과 동일합니다 어떠한 요소를 앞으로 보여줄것인지 지정할 수 있는 속성으로 기본값은 auto입니다 그외 속성은 정수로 표현합니다