[자율학습] 9일차

7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

• 플렉서블 박스 레이아웃 : 1차원 방식으로 효과적으로 레이아웃 설계하도록 고안된 스타일 속성
  • 1차원 방식 : 가로, 세로 중 한 방향으로만 레이아웃 설계하는 방식

7.1.1 플렉스 박스 레이아웃 살펴보기

• 구성 요소
  • 주축 : 플렉스 박스의 진행 방향과 수평한 축
  • 교차축 : 주축과 수직한 축
  • 플렉스 컨테이너 : display 속성값으로 flex나 inline-flex가 적용된 요소
  • 플렉스 아이템 : 플렉스 컨테이너의 자식 관계를 이루는 태그 구성 요소

7.1.2 플렉스 박스 레이아웃의 기본 속성

• display 속성
  • 속성값을 flex나 inline-flex로 지정하는 것에서 시작
  • flex는 적용된 요소의 다음 요소가 항상 줄바꿈됨
  • inline-flex는 다음 요소가 주변에 배치되게 함

display:flex; /*inline-flex*/

• flex-direction 속성
  • 플렉스 박스 레이아웃의 주축 방향 결정

flex-direction:<속성값>;

• 속성값
  • row : 주축 방향을 왼쪽에서 오른쪽으로
  • row-reverse : 주축 방향을 오른쪽에서 왼쪽으로
  • column : 주축 방향을 위쪽에서 아래쪽으로
  • column-reverse : 주축 방향을 아래쪽에서 위쪽으로

• flex-wrap 속성
  • 플렉스 아이템이 플렉스 컨테이너 영역 벗어날 때 처리 방식 결정
  • flex-wrap 속성값이 nowrap으로 기본 적용됨

flex-wrap:<속성값>;

• 속성값
  • nowrap : 플렉스 아이템이 플레스 컨테이너를 벗어나도 무시
  • wrap : 플렉스 아이템이 컨테이너 벗어나면 줄 바꿈
  • wrap-reverse : 컨테이너 벗어나면 wrap의 역방향으로 줄바꿈

• flex-flow 속성
  • flex-direction 속성과 flex-wrap 속성을 한 번에 사용

flex-flow:<flex-duration> <flex-wrap>;

7.1.3 플렉스 박스 레이아웃의 정렬 속성

• justify-content 속성
  • 플렉스 아이템을 주축 방향으로 정렬할 때 사용하는 속성

justify-content:<속성값>;

• 속성값
  • flex-start : 주축 방향의 시작을 기준으로 정렬
  • flex-end : 주축 방향의 끝을 기준으로 정렬
  • center : 주축 방향의 중앙 정렬
  • space-between : 플렉스 아이템 사이의 간격이 균일하도록 정렬
  • space-around : 플렉스 아이템의 둘레가 균일하도록 정렬
  • space-evenly : 플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬
• align-items, align-content, align-self 속성
  • 플렉스 아이템을 교차축 방향으로 정렬할 때 사용

align-items:<속성값>;

• 속성값
  • stretch : 교차축 방향으로 플렉스 아이템의 너비나 높이가 늘어남
  • flex-start : 교차축 방향의 시작을 기준으로 정렬
  • flex-end : 교차축 방향의 끝을 기준으로 정렬
  • center : 교차축 방향의 중앙을 기준으로 정렬
  • baseline : 플렉스 아이템의 baseline을 기준으로 정렬

7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기

• 그리드 레이아웃 : 웹 페이지에서 2차원 방식으로 레이아웃 설계할 수 있도록 고안된 스타일 속성

7.2.1 그리드 레이아웃 살펴보기

• 구성 요소
  • 행, 열
  • 그리드 셀 : 행과 열이 만나 이루어지는 하나의 공간
  • 그리드 갭 : 그리드 셀과 그리드 셀 사이의 공간
  • 그리드 아이템 : 그리드 셀 안에서 표현되는 콘텐츠 의미
  • 그리드 라인 : 그리드 행과 열을 그리는 선
  • 그리드 넘버 : 그리드 라인에 붙는 번호
  • 그리드 컨테이너 : 그리드 레이아웃의 전체 내용을 담고 있는 최상위 부모 요소

7.2.2 그리드 레이아웃의 기본 속성

• display 속성
  • 속성값을 grid나 inline-grid로 지정

display:grid; /*inline-grid*/

• grid-template-columns와 grid-template-rows 속성
  • 행과 열 생성

grid-template-columns:<1열값> <2열값> ...;
grid-template-rows:<1행값> <2행값> ...;

• row-gap과 column-gap 속성
  • 행과 열이 만나 이루어지는 그리드 셀과 그리드 셀 사이의 간격

row-gap:<크기>;
column-gap:<크기>;

7.2.3 그리드 레이아웃의 정렬 속성

• align-items와 align-self 속성
  • 그리드 셀의 높이가 그리드 아이템보다 클 때 각 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬 가능
  • 속성 값
    • stretch : 그리드 아이템이 그리드 셀을 꽉 채우도록 크기 늘림
    • start : 그리드 아이템을 그리드 셀의 맨 위에 배치
    • center : 그리드 아이템을 그리드 셀의 세로 방향 중간에 배치
    • end : 그리드 아이템을 그리드 셀의 아래에 배치

• justify-items와 justify-self 속성
  • 그리드 아이템을 각 그리드 셀의 가로 방향으로 정렬
  • 속성값
    • stertch : 그리드 아이템을 그리드 셀이 꽉 차도록 늘림
    • start : 그리드 아이템을 그리드 셀의 왼쪽 끝 배치
    • center : 그리드 아이템을 그리드 셀의 가로 방향 중간에 배치
    • end : 그리드 아이템을 그리드 셀의 오른쪽 끝에 배치
• place-items와 place-self 속성
  • align, justify 속성을 한 번에 사용 가능 하게 함

place-itmes:<align-items> <justify-items>;
place-self:<align-self> <justify-self>;

/

7.2.4 그리드 레이아웃의 배치 속성

• grid-template-areas와 grid-area 속성
  • 그리드 레이아웃의 행과 열을 이름으로 지정 가능

grid-area:<행과 열 이름>;

• grid-column-start, grid-column-end, grid-row-start, grid-row-end 속성

  • 그리드 라인 : 그리드 컨테이너를 구성하는 행과 열을 그리는 선
  • 그리드 넘버 : 그리드 라인의 고유 번호

• grid-column과 grid-row 속성

  • 단축 속성

grid-column:<start> <end>;
grid-row:<start> <end>;

grid-column:<start>/span <열 개수>;
grid-row:<start>/span <행 개수>;

7.3 반응형 웹을 위한 미디어 쿼리 사용하기

7.3.1 미디어 쿼리

• 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술

7.3.2 뷰포트 알아보기

• 뷰포트 : 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기 의미

7.3.3 미디어 쿼리의 기본 문법

@media <not/only> <mediatype> and (<media feature>) <and/or/not> (<media feature>) {
  /*css 코드*/
}

• not/only
  • not : 뒤에 오는 모든 조건 부정
  • only : 미디어 쿼리를 지원하는 기기만 미디어 쿼리 해석
• mediatype
  • 미디어 쿼리가 적용될 미디어 타입 명시. 생략 가능
  • 타입
    • all : 모든 기기
    • print : 인쇄 장치
    • screen : 컴퓨터 화면 장치, 스마트 기기
    • speech : 스크린 리더기 같은 보조프로그램으로 웹 페이지를 소리 내어 읽어 주는 장치
• media feature : 미디어 쿼리가 적용될 미디어 조건
  • 조건
    • min-width : <화면 너비> : 미디어 쿼리 적용 최소 너비
    • max-width : <화면 너비> : 미디어 쿼리 적용 최대 너비
    • orientation : portrait : 세로 모드
    • orientation : landscape : 가로 모드