레이아웃

레이아웃이란?

각의 요소를 목적에 맞게 배치하는 것을 레이아웃

와이어프레임

• 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다.
• 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이며 레이아웃과 제품의 구조를 보여주는 용도이다.

목업

일반적으로 목업은 실물 크기의 모형을 뜻하며, 웹 또는 앱에서는 실제 작동하는 모습과 동일하게 HTML 문서를 작성하면 된다. ex) 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩

💡 하드코딩이란?
하드코딩은 상수나 변수에 들어가는 값을 소스코드에 직접 쓰는 방식을 말한다.

<div class="writer">김코딩</div>
<div class="content">SNS는 인생의...</div>

Flexbox

flex란?

display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다.
Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다.

부모 요소 적용 속성

flex-direction

자식 요소들을 정렬할 정렬 축을 정한다.

• row : 왼쪽에서 시작하는 가로 정렬(기본값)
• column : 위에서 시작하는 세로 정렬
• row-reverse : 오른쪽에서 시작하는 가로 정렬
• column-revcer : 아래에서 시작하는 세로 정렬

flex-wrap

하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정하는 속성이다. 설정해 주지 않으면 줄 바꿈을 하지 않는다.

• nowrap : 줄 바꿈하지 않음(기본값)
• wrap : 정렬 축에 따라 줄바꿈
• wrap-reverse : 정렬 축 반전에 따라 줄바꿈(가로 정렬이면 상하 반전 세로 정렬이면 좌우 반전)

justify-content

자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다.

• flex-start : 수평 축이 시작하는 방향부터 정렬
• flex-end : 수평 축이 끝나는 방향부터 정렬
• center : 수평 축의 가운데 방향으로 정렬
• space-between : 자식 요소들 사이(between)에 균일한 간격을 만들어줌
• space-around : 자식 요소들 둘레(around)에 균일한 간격을 만들어줌 참고

align-items

자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.

• stretch : 자식 요소가 수직축 방향으로 늘어난다(기본값)
• flex-start : 수직 축이 시작하는 방향부터 정렬
• flex-end : 수직 축이 끝는 방향부터 정렬
• center : 수직 축의 가운데 방향으로 정렬
• baseline : 텍스트 베이스라인 기준으로 정렬

자식 요소 적용 속성

부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간과 관련있다.

flex 속성

// 설정해주지 않으면 기본값이 적용된다(0 1 auto)
flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

• grow(팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지 의미

• shrink(수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지 의미

• basis(기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기를 의미

grow

grow(팽창 지수)는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이라고 생각하면 된다.

위와 같이 요소들이 있을 때 grow를 1 : 0 : 0을 주면 box1이 모든 공간을 차지하고, 1 : 1 : 0을 주면 box1과 box2가 1:1로 공간을 나눠 가지고, 1 : 1 : 1을 주면 세 요소가 1:1:1로 공간을 나눠 가진다.

shrink

shrink(수축 지수)는 grow와 반대로 설정한 비율만큼 박스 크기가 작아진다(비율이 클수록 더 많이 줄어듬)

📌 주의
flex-grow와 flex-shrink를 함께 사용하지 않는 것이 좋다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: grow 1 auto와 같이 grow 속성에 변화를 주는 방식이 좋다.

flex-shrink는 width나 flex-basis에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문이다. flex-grow로 비율을 변경하는 경우 flex-shrink는 기본값인 1로 두는 것이 좋다.

basis

basis(기본 크기) 는 자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다. flex-grow 가 0일 때 basis 크기를 지정하면 그 크기는 유지된다.

grow를 0 : 1 : 1 로 설정하고 첫번째 요소에 flex-basis : 50px를 설정하면 브라우저 크기가 달라져도 첫번째 요소의 크기는 변하지 않는다.

📌 주의
flex-grow의 값이 0인 경우에만 flex-basis 속성의 값이 유지된다. flex-grow의 값이 양수일 경우 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있다.

💡 참고

• width와 flex-basis를 동시에 적용하는 경우 flex-basis가 우선된다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우 width가 정확한 크기를 보장하지 않는다.
• flex-basis를 사용하지 않는다면 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해 width 대신 max-width를 쓸 수 있다.