7장 효과적인 레이아웃을 위한 CSS 속성
7.1) 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기
1차원 방식 : 가로(row)나 세로(column) 중 한 방향으로만 레이아웃을 설계하는 방식
7.1.1 플렉스 박스 레이아웃
* 구성요소
- 주축(main axis) : 플렉스 박스의 진행 방향과 수평한 축
- 교차축(cross axis) : 주축과 수직한 축
- 플렉스 컨테이너 : display 속성값으로 flex나 inline-flex가 적용된 요소
- 플렉스 아이템 : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소
* 레이아웃 확인 방법
개방자 도구 - Elements탭
html 요소 옆에 flex 아이콘, 클릭시 해당 요소의 플렉스 박스 레이아웃을 시각적으로 확인 가능
7.1.2 플렉스 박스 레이아웃의 기본 속성
* display
display : flex | inline-flex ;
- flex : 다음 요소가 항상 줄 바꿈됨
- inline-flex : 다음 요소가 주변에 배치됨
- display 속성이 지정된 요소를 플레스 컨테이너 , 자식 요소는 플렉스 아이템
- 플렉스 박스 레이아웃의 기본 특징 : 플렉스 아이템이 수직(세로)에서 수평(가로)로 배치됨, 플렉스 아이템의 원래 박스 성격(인라인, 블록)은 무시됨
* flex-direction : 플렉스 박스 레이아웃의 주축 방향 결정
flex-direction : 속성값 ;
- row : 왼쪽에서 오른쪽, 기본값
- row-reverse : 오른쪽에서 왼쪽
- column : 위쪽에서 아래쪽
- column-reverse : 아래쪽에서 위쪽
* flex-wrap : 플렉스 아이템이 플렉스 컨테이너 영역을 벗어날 때 처리 방법 지정
flex-wrap : 속성값 ;
- nowrap : 기본값, 영역을 벗어나도 무시
- wrap : 영역을 벗어나면 줄 바꿈
- wrap-reverse : 영역을 벗어나면 wrap의 역방향으로 줄 바꿈
* flex-flow : flex-direction과 flex-wrap을 한 번에 사용할 수 있는 단축 속성
flex-flow : flex-direction flex-wrap ;
7.1.3 플렉스 박스 레이앗웃의 정렬 속성
* justify-content : 플렉스 아이템을 주축 방향으로 정렬
justify-content : 속성값 ;
- flex-start : 주축 방향의 시작을 기준으로 정렬
- flex-end : 주축 방향의 끝을 기준으로 정렬
- center : 주축 방향의 중앙에 정렬
- space-between : 플렉스 아이템 사이의 간격이 균일하게 정렬
- space-around : 플렉스 아이템의 둘레가 균일하게 정렬
- space-evenly : 플렉스 아이템 사이와 양끝의 간격이 균일하게 정렬
* align-items : 플렉스 아이템 교차축 방향으로 정렬
align-items : 속성값 ;
- stretch : 교차축 방향으로 플렉스 아이템의 너비나 높이 늘어남, 기본값
- flex-start : 교차축 방향의 시작을 기준으로 정렬
- flex-end : 교차축 방향의 끝을 기준으로 정렬
- center : 교차축 방향의 중앙에 정렬
- baseline : 플렉스 아이템의 baseline 기준으로 정렬
* align-content : 플렉스 아이템을 교차축 방향으로 정렬, flex-wrap때문에 두 줄 이상이 됐을 때 사용
* align-self : 플렉스 아이템을 한 번에 정렬하지 않고 각각 정렬할 때 사용
7.2) 그리드 레이아웃으로 2차원 레이아웃 설계하기
2차원 방식 : 가로(row)와 세로(column)를 같이 사용해 레이아웃을 설계하는 방식
7.2.1 그리드 레이아웃
* 구성 요소
- 행 : 그리드 레이아웃에서 가로줄
- 열 : 그리드 레이아웃에서 세로줄
- 그리드셀 : 행과 열이 만나 이루어지는 하나의 공간
- 그리드 갭 : 그리도 셀과 그리드 셀 사이의 간격
- 그리드 아이템 : 그리드 셀 안에서 표현되는 콘텐츠
- 그리드 라인 : 그리드 행과 열을 그리는 선
- 그리드 넘버 : 그리드 라인에 붙는 번호
- 그리드 컨테이너 : 그리드 레이아웃의 전체 내용을 담고 있는 최상위 부모 요소, 그리드와 관련된 모든 내용은 컨테이너 안에 표현됨
* 레이아웃 확인 방법
개발자 도구 - Elements탭
html 요소 옆에 grid 아이콘, 웹 브라우저에서 그리드 레이아웃 구성 요소 시각적으로 확인 가능
7.2.2 그리드 레이아웃의 기본 속성
* display : 이 속성이 지정된 요소는 그리드 컨테이너가 됨, 자식요소는 그리드 아이템
display : grid | inline-grid ;
* grid-tamplate-columns 와 grid-template-rows : 그리드의 행과 열 생성, 속성값은 공백으로 구분
grid-tamplate-columns : 1열값 2열값 ... ;
grid-template-rows : 1행값 2행값 ... ;
- 사용 가능한 단위 :px, fr(나누어서 균등하게 배치)
- 속성값 auto : 해당하는 행과 열의 크기를 그리드 컨테이너에 맞춰 자동으로 지정
- repeat( ) 함수 : 두 열이나 행이 같은 크기일 때
- minmax( ) 함수 : 열 또는 행 크기의 최솟값과 최댓값 지정
- 두 함수를 함께 사용할 수 도 있음
* row-gap 과 colums-gap : 행과 행 사이, 열과 열 사이에 그리드 갭 생성, EI에서는 지원X
row-gap : 크기 ;
colums-gap : 크기 ;
7.2.3 그리드 레이아웃의 정렬 속성
* align-items : 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬
align-items : 속성값 ;
- stretch : 그리드 아이템이 그리드 셀을 꽉 채우도록 크기를 늘림
- start : 그리드 아이템을 그리드 셀의 맨 위에 배치
- center : 그리드 아이템을 그리드 셀의 세로 방향 중간에 배치
- end : 그리드 아이템을 그리드 셀의 맨 아래에 배치
- align-self : 그리드 아이템을 각각 정렬하고 싶을 때 사용
* justify-items : 그리드 아이템을 각 그리드 셀의 가로 방향으로 정렬
justify-items : 속성값 ;
- stretch : 그리드 아이템이 그리드 셀을 꽉 채우도록 크기를 늘림
- start : 그리드 아이템을 그리드 셀의 왼쪽 끝에 배치
- center : 그리드 아이템을 그리드 셀의 가로 방향 중간에 배치
- end : 그리드 아이템을 그리드 셀의 오른쪽 끝에 배치
- justify-self : 그리드 아이템을 각각 정렬하고 싶을 때 사용
* place-items : align-items 와 justify-items 속성을 한 번에 사용할 수 있는 단축 속성
place-items : align-items justify-items ;
place-self : align-self justify-items ;
7.2.4 그리드 레이아웃의 배치 속성
*
- grid-template-areas : 그리드 레이아웃의 행과 열 이름 지정
- grid-area : 이름 지정 후 grid-area 속성으로 이름을 그리드 아이템에 배치
*
- grid-column-start, grid-column-end
- grid-row-start, grid-row-end
: 그리드 넘버(각 그리드 라인의 고유한 번호)를 이용해 그리드 아이템의 열시작 위치와 종료 위치, 행시작 위차와 종료 위치 지정
4가지 속성을 조합해 그리드 아이템의 배치를 지정할 수 있음
* grid-column과 grid-row : 단축 속성
grid-column : start / end ; or grid-column : start / span 열갯수 ; (시작 번호부터 몇 개의 그리드 셀을 차지할지)
grid-row : start / end ; or grid-row : start / span 행갯수 ;
※ 그 외 그리드 속성은 MDN사이트 참고
7.3) 반응형 웹을 위한 미디어 쿼리 사용하기
7.3.1 미디어 쿼리 : 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술
7.3.2 뷰포트 : 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기
html문서는 어떤 기기에서 접속하더라도 기본으로 980px크기를 기준으로 보여줌
기기의 해상도를 인식 할 수 있게 HTML코드로 뷰포트 설정 = meta 태그의 viewport값
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width : HTML 문서의 너비(width)를 기기의 너비(device-width)로 설정
- content 속성값
- width : 뷰포트의 너비 설정, 보통 device-width
- height : 뷰포트의 높이 설정, 잘 사용x
- initial-scale : 뷰포트 초기 배율 설정, 1일 기본값, 1보다 작으면 축소값, 1보다 크면 확대값
- minimum-scale : 뷰포트의 최소 축소 비율 설정, 기본 0.25
- maximum-scale : 뷰포트의 최대 확대 비율 설정, 기본 5.0
- usuer-scalable : 뷰포트의 확대 또는 축소 여부 설정, yes 또는 no (화면 확대축소 못함)로 지정
7.3.3 미디어 쿼리 기본 문법
@media <not | only> <mediatype> and (<media feature>) <and | or | not> (<media feature>) { css코드 }
* not | only
- not 뒤에 오는 모든 조건 부정
- only 미디어 쿼리를 지원하는 기기만 미디어 쿼리를 해석하라는 의미
* mediatype : 미디어 쿼리가 적용될 미디어 타입 명시, 생략 시 all로 인식, 생략하지 않으면 반드시 다음에 and 연산자가 와야함
- all : 모든 기기
- print : 인쇄 장치
- screen : 컴퓨터 화면 장치 또는 스마트 기기
- speech : 스크린 리더기 같은 보조 프로그램으로 웹 페이지를 소리 내어 있어 주는 장치
* media feature : 적용될 미디어 조건
- (min-width : 화면 너비) - 미디어 쿼리가 적용될 최소 너비
- (max-width : 화면 너비) - 미디어 쿼리가 적용 될 최대 너비
- (orientation : portrait) - 세로모드, 뷰포트의 세로 높이가 가로 너비보다 큰 경우
- (orientation : landscape) - 가로모드, 뷰포트의 가로 너비가 세로 높이보다 큰 경우
- 사용할 수 있는 조건은 총 18가지
'인천일보아카데미 > - 학습일지' 카테고리의 다른 글
| [학습일지]JAVA교육일지 13일차 (0) | 2022.05.29 |
|---|---|
| [학습일지]JAVA교육일지 12일차 (0) | 2022.05.29 |
| [학습일지]JAVA교육일지 9일차 (0) | 2022.05.27 |
| [학습일지]JAVA교육일지 8일차 (0) | 2022.05.27 |
| [학습일지]JAVA교육일지 7일차 (0) | 2022.05.27 |
