TIL - [HTML/CSS 기초]

와이어프레임(Wireframe)

 : 레이아웃의 뼈대를 그리는 단계를 말한다.

 

와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다. 와이어프레임은 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이다. 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다.

 

 

목업(Mock-up)

웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성한다.

 

 

Flexbox로 레이아웃 잡기

Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.

 

 

display: flex 분석하기

display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다.

 

부모 요소에 적용해야하는 Flexbox 속성들

Flexbox 속성중에서는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있다.

 

1. flex-direction : 정렬 축 정하기

2. flex-wrap : 줄 바꿈 설정하기

• flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다.

3. justify-content : 축 수평 방향 정렬

4.align-items : 축 수직 방향 정렬

주요 속성값으로는 stretch , flex-start , flex-end , center , baseline이 있다.

 

 

자식 요소에 적용해야 하는 Flexbox 속성

flex 속성의 값

flex 속성에는 세 가지 값을 지정해줄 수 있다.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

• grow(팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
• shrink(수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
• basis(기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지

자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용된다.

flex: 0 1 auto;

위의 코드를 따로 지정해줘도 상관없다.

 

 

1. grow : 자식 박스는 얼마나 늘어날 수 있을까?

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

2. shrink : 자식 박스는 얼마나 줄어들 수 있을까?

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

3. basis : 이 박스의 기본 크기는 얼마일까요?

flex-basis는 Flex 아이템의 기본 크기를 설정한다(flex-direction이 row일 때는 너비, column일 때는 높이).

 flex-basis의 값으로는 우리가 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있고, 기본값 auto는 해당 아이템의 width값을 사용한다. width를 따로 설정하지 않았다면 컨텐츠의 크기가 됨.

auto값을 주게되면 자동으로 콘텐츠 내용에 맞춰 변하고 자식박스모두 basis에 0을 주면 콘첸츠 길이와 상황없이 부모 컨테이너 크기 안에서 동일한 너비를 나눠갖는다.

flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지된다.

ex)

 

.item {
	flex-basis: 100px;
}

원래 100px이 안되는 AAA 와CCC는 늘어났고 100px이 넘는 BBB는 그대로 유지된다.

.item {
	width: 100px;
}

반면에, width를 설정하면, 원래 100px이 넘는 BBB도 100px로 맞춰진다.