페이지 레이아웃 및 웹 앱 화면 설계하기

페이지 레이아웃

✔ 개요

• 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
• 레이아웃을 위한 HTML을 만들 수 있다.
• 다음의 속성들에 대한 이해를 바탕으로 Flexbox를 이용해 레이아웃을 만들 수 있다.
  • 방향: flex-direction
  • 얼마나 늘릴 것인가?: flex-grow
  • 얼마만큼의 크기를 갖는가?: flex-basis
  • 수평 정렬: justify-content
  • 수직 정렬: align-items 

레이아웃을 위한 HTML을 만들 수 있다.

HTML 구성하기

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

다음의 속성들에 대한 이해를 바탕으로 Flexbox를 이용해 레이아웃을 만들 수 있다

• 방향: flex-direction
• 얼마나 늘릴 것인가?: flex-grow
• 얼마만큼의 크기를 갖는가?: flex-basis
• 수평 정렬: justify-content
• 수직 정렬: align-items 
• 개별적으로 정렬 : align-self

 

justify-content : 가로선 상에서 정렬한다.

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

 

align-items : 세로선 상에서 정렬한다.

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• baseline:요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

 

flex-direction : 정렬할 방향을 지정한다.

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

 

flex-wrap : flex요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다.

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

 

flex-flow : flex-direction, flex-wrap 합쳐서 사용 가능한 속성

• flex-flow : flex-direction flex-wrap 으로 사용한다

 

align-content : 여러 줄 사이에 간격을 조절한다

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

 

flex-grow, flex-basis

• 얼마나 늘릴 것인가?: flex-grow
• 얼마만큼의 크기를 갖는가?: flex-basis

 

flex: grow shrink basis -> flex: 0 1 auto 로 사용한다.

 

웹 앱 화면 설계하기

✔ 개요

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
• 와이어프레임만 보고 HTML로 코딩할 수 있다.
• div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.
• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

 

만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.

https://ovenapp.io/view/09GiYwGYlT958BSYof6M0r09dxholP2y/

Untitled (1 of 3)

div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.

구분을 해야 따로 설정 및 무엇이 제목인지 중요한건지 알 수 있다.

 

HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

id와 class의 차이점
id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류에 사용