이번엔 CSS를 통해서 레이아웃을 알아보자
레이아웃(layout)
이번에도 역시 레이아웃의 의미에 대해서 먼저 알아보자면
레이아웃(layout)
컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일을 의미한다.
레이아웃이 왜 중요하냐?
우리가 볼 수 있는 화면은 한정적이고 공간이 많지 않기에, 충분히 활용해야 효과를 높일 수 있을 뿐만 아니라 레이아웃을 통해서 기본적인 컨셉 또한 파악할 수 있기 때문이죠.
특히 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 하는데 훌륭한 와이어프레임을 보면, 어떤 목적을 가진 프로그램인지 유추하는 것이 가능합니다.
와이어프레임(Wireframe)
와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다.
내가 어떠한 실제 작동하는 웹 에플레이케이션을 만들기 위해서는 HTML 문서를 통해 화면을 다 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵습니다. 마치 설계도 없이 건물을 짓는 것과 같죠.
레이아웃 기술은 여러가지가 있지만 이번엔 그 중에서 다룰 기술은 다음과 같다.
Flexbox
flexbox의 flex(flexible)는 "잘 구부러지는, 유연한"이라는 뜻이며 flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다.
flexbox는 행과 열 형태로 항목 무리를 배치하는
일차원 레이아웃 메서드입니다.
이렇게 단어만 말하면 "엥 그게 뭐가 어려운 일이라고?" 라고 할 수 있지만
flexbox는 많은 레이아웃 작업을 훨씬 쉽게 만들어 줍니다.
그렇지만 Flexbox 속성을 사용할 때 유의해야할 점이 있습니다. 바로 속성을 지정해주는 위치입니다.
Flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있습니다.
일단 flexbox로 레이아웃할 요소를 지정하고 이를 위해 영향을 주고 싶은 요소의 부모 요소에 특별한 display 속성값을 지정합니다.
display: flex;display: flex이 설정된 부모 요소를 일컬어
flex container라고 합니다.
그렇다면 먼저 flex container에 적용해야하는 속성들부터 알아보도록 하겠습니다.
flex-direction : 정렬 축 정하기
flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.
flex-wrap : 줄 바꿈 설정하기
flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다.
justify-content : 축 수평 방향 정렬
align-items : 축 수직 방향 정렬
justify-content 속성은 자식 요소들을 축의 수평 방향 align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다.
justify-content 속성값으로는 flex-start , flex-end, center, space-between, space-around
align-items 속성값으로는 stretch , flex-start , flex-end , center , baseline
이 있습니다.
실제로 어떻게 동작하는지 속성 값으로 다 하나씩 확인 해보라고 권장드리고 싶습니다.
이렇게 부모 요소에 적용해야하는 속성을 알아보았으니 이번엔 자식 요소에 적용해야 하는 Flexbox 속성을 알아봐야겠죠?
flex : 팽창 지수, 수축 지수, 기본 크기
flex 속성에는 세 가지 값을 지정해줄 수 있습니다. 각 값이 의미하는 것은 다음과 같습니다.
flex: <grow(팽창 지수)>,<shrink(수축 지수)>,<basis(기본 크기)>기본 값은 순서대로 flex: 0 1 auto;으로 설정되어 있으며
다음과 같이 각 값을 따로 지정해줄 수 있습니다.
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;해당 값에 대해서 설명을 하자면
grow : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
shrink : 요소의 크기를 줄여야 할 때 얼마나 줄어들 것인지
basis : grow나 shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
라고 할 수 있습니다.
그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다.
비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장합니다. flex-shrink 속성은 width나 basis에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다.
▶︎ 그리고 width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
이처럼 Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정할 수 있고, 부모 요소에 적용해야 하는 속성들은 자식요소의 정렬과 관련이 있고 자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련이 있음을 알 수 있습니다.
이렇게 간단하게 레이아웃과 와이어프레임 그리고 Flexbox를 설명해보았는데요
이번에 한번 Flexbox로 레이아웃이나 와이어프레임을 작성해보면 어떨까요
읽어주셔서 감사합니다.
