[HTML/CSS] Wireframe, Flexbox

FMA·2024년 3월 30일

HTML/CSS/JS

목록 보기

3/9

1. 와이어프레임 : 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계

아주 단순하게 레이아웃과 제품의 구조를 보여주는 용도

2. 목업(Mock-up) : 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성 (하드코딩)

3. HTML 구성하기 : 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름에 따라 작업 진행

수직 분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
수평 분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있음

4. 레이아웃 리셋 : HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되는 경우, 기본 스타일을 제거해 줌.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

1. Flexbox : 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

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

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

flex-direction : 정렬 축 정하기

ain {
	display: flex;
	**flex-direction : row;**
}

flex-wrap : 줄 바꿈 설정하기

main {
	display: flex;
	**flex-wrap : nowrap;**
}

justify-content : 축 수평 방향 정렬

align-items : 축 수직 방향 정렬

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

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

flex 속성의 값 : 세 가지 값을 지정해줄 수 있음.

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

grow(팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지. / 팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지
shrink(수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지 / flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방함.
basis(기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지 / flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지
기본값 :

flex: 0 1 auto;