TIL

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

DevelopJJong 2022. 4. 28. 16:06

페이지 레이아웃

✔ 개요

  • 다양한 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)

 

ovenapp.io

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

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

 

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

id와 class의 차이점
id class
#으로 선택 .으로 선택
한 문서에 단 하나의 요소에만 적용 동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용 스타일의 분류에 사용
저작자표시 (새창열림)