2022.08.24 수 - Flexbox, 와이어프레임

📄 학습내용

HTML 구조

• CSS로 화면 구분 
  • 수직 분할 : 수직으로 화면을 분할하는 방식, 세로 방향으로 요소들을 배치
  • 수평 분할 : 수평으로 화면을 분할하는 방식, 가로 방향을 요소들을 배치
• 레이아웃 : 화면을 나누는 방법
• 레이아웃 리셋 : HTML의 기본 스타일이 레이아웃을 잡는 것에 방해가 되어서 초기화하는 것

 

Flexbox

• 박스의 크기를 유연하게 설정할 수 있는 레이아웃 방식
• display: flex : 부모 박스 요소에 적용해서 자식 박스 요소의 방향 및 크기에 영향을 주는 레이아웃 방식
• flexbox 속성들을 이용해서 요소 정렬(부모 요소에 적용) 및 차지하는 공간(자식 요소에 적용) 설정 가능
• 부모 요소에 적용해야하는 속성
  • flex-direction : 정렬 축 정하기
    • row : 가로방향 정렬, 왼쪽→오른쪽(기본값)
    • column : 세로방향 정렬, 위→아래
    • row-reverse : 가로방향 역정렬, 오른쪽→왼쪽
    • column-reverse : 세로방향 역정렬, 아래→위
  • flex-wrap : 줄 바꿈 설정
    • nowrap : 줄바꿈 하지 않음(기본값)
    • wrap : 줄바꿈, .위→아래
    • wrap-reverse : 줄바꿈, 아래→위
  • justify-content : 축 수평 방향 정렬
    • flex-start : 정렬 시작 방향으로 정렬
    • flex-end : 정렬 시작방향 반대편으로 정렬
    • center : 축 방향으로 중앙 정렬
    • space-between : 자식 요소들이 일정한 간격으로 거리를 두고 정렬, 양쪽 정렬
    • space-around : 자식 요소들이 일정한 간격으로 거리를 두고 정렬, 중앙 정렬
  • align-items : 축 수직 방향 정렬
    • stretch : 축의 수직 방향의 크기만큼 박스가 늘어나서 공간을 채우는 방식
    • flex-start : 축의 수직 방향에서 시작 부분으로 정렬
    • flex-end : 축의 수직 방향에서 끝 부분으로 정렬
    • center : 축의 수직 방향에서 중앙 정렬
    • baseline : 축의 수직 방향을 기준으로 정렬
• 자식 요소에 적용해야 하는 속성
  • flex : grow shrink basis
    • flex-grow : 자식 박스의 늘어남 정도, 비율이 커질수록 늘어남, 기본값 = 0
    • flex-shrink : 자식 박스의 줄어듦 정도, 비율이 커질수록 줄어듦, 기본값 = 1
    • flex-basis : 박스의 기본 크기, flex-grow: 0인 경우에만 속성값이 유지됨

 

와이어프레임

• 개발을 할 때, 레아아웃 등의 구조를 그려서 보여주는 단계
• 기능 등의 UX를 와이어프레임에 포함되지 않는다.

 

Mock-up(목업)

• 실물 크기의 모형
• SW에서는 목업이란? 기능이 없이 레이아웃만 구현해서 페이지만 만들어 놓은 상태

 

HTML 문서에서 id 또는 class를 사용해야하는 경우

• id 사용하는 경우 : 고유한 이름을 붙이는 경우
• class 사용하는 경우 : 여러 번 반복해서 사용되는 경우

 

⭐ 공부 난이도

Flexbox ☆☆☆☆★

와이어프레임 ☆☆☆☆★

 

🌕 느낀점

  어제는 HTML과 CSS를 복습하는 느낌이었고, 오늘은 추가 내용을 배우는 느낌이었다. 그래서 크게 어려운 것은 없이 진도가 잘 나가졌다. 특히 개구리 게임을 통해서 flexbox를 실습하는 것은 무척 재미있었다. 덕분에 다양한 속성들과 속성값들이 어떻게 화면에 뿌려지는지 쉽게 이해할 수 있었다. oven 사이트에서 와이어프레임 만들기는 조금 어려웠다. 생각대로 그려지지 않았고, 생각보다 없는 기능이 많았다. 이건 내가 못찾은걸지도...  일단 할 수 있는데까지 하였다. 결과는 아래와 같다.