Section1 / Unit4 : HTML/CSS활용

코드스테이츠 수업4일차!

오늘 배운 내용을 복습해보자

와이어프레임

*웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계

*단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것

*레이아웃과 제품의 구조를 보여주는 용도

와이어프레임의 목적

*화면의 영역을 구분

*와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추 가능

display: flex

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

*Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정 가능

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

*flex-direction

->정렬 축 정하기(기본적으로 가로 정렬)

*flex-wrap

->줄 바꿈 설정하기(기본적으로 줄 바꿈X)

*justify-content

->축 수평 방향 정렬(기본값 row)

*align-items

->축 수직 방향 정렬(기본값row)

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

*flex 속성의 값

->flex속성에는 세 가지 값을 지정할 수 있다

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

->>자식 요소에 flex 속성을 따로 설정하지 않으면 아래와 같은 기본값이 적용

flex: 0 1 auto;

->팽창지수(grow)는 [자식 요소의 grow값 / 자식 요소들의 grow값]의 총합 비율