게으른 나에게

[코딩 자율학습 HTML + CSS + 자바스크립트] 2. CSS로 웹 페이지 꾸미기 - "7장 효과적인 레이아웃을 위한 CSS 속성 다루기" 본문

My Study/서적 공부

[코딩 자율학습 HTML + CSS + 자바스크립트] 2. CSS로 웹 페이지 꾸미기 - "7장 효과적인 레이아웃을 위한 CSS 속성 다루기"

handbefore 2024. 7. 22. 21:41

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

1. 플렉스 박스 레이아웃

플렉스 박스 레이아웃은 1차원 레이아웃 설계를 위해 CSS3에서 추가된 개념. 플렉스 박스 레이아웃의 구성 요소는 다음과 같음.

※ 레이아웃 확인 방법: 웹 브라우저에서 지원하는 방법으로 플렉스 박스 레이아웃 확인 가능. 크롬 브라우저에서는 개발자 도구 사용.

구성요소 설명
주축(main axis) 플렉스 박스의 빈행 방향과 수평한 축
교차축(cross axis) 주축과 수직하는 축
플렉스 컨테이너(flex container) display 속성 값으로 flex나 inline-flex가 적용된 요소
플렉스 아이템(flex item) 플렉스 컨테이너와 자식 관계를 이루는 태그 요소

 

2. 플렉스 박스 레이아웃 기본 속성

속성  설명
display flex, inline-flex 값을 지정하면 해당 요소가 플렉스 컨테이너가 됨
flex-direction 플렉스 박스 레이아웃의 주축 방향을 지정
flex-wrap 플렉스 아이템의 자동 줄 바꿈 여부를 지정
flex-flow flex-direction과 flex-wrap 속성을 한 번에 사용할 수 있는 단축 속성
{ display: flex;	/* inline-flex */ }
{ flex-direction: <row(주축방향을 왼쪽에서 오른쪽)>
	    	  <row-reverse(주축방향을 오른쪽에서 왼쪽)>
                  <column(주축방향을 위쪽에서 아래쪽)> 
                  <column-reverse(주축방향을 아래쪽에서 위쪽)>; }
                  
{ flex-wrap: <no-wrap(플렉스 아이템이 플렉스 컨테이너를 벗어나도 무시)>,
	     <wrap(플렉스 아이템이 플렉스 컨테이너를 벗어나면 줄 바꿈)>,
             <wrap-reverse(플렉스 아이템이 플렉스 컨테이너 벗어나면 wrap의 역방향으로 줄바꿈)>; }
       
{ flex-flow: <flex-direction>, <flex-wrap>; }

flex-direction 속성값에 따른 주축 방향과 플렉스 아이템 배치

 

 

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

속성  설명
justify-content 플렉스 아이템을 모두 주축 방향으로 정렬
align-items 플렉스 아이템을 모두 교차축 방향으로 정렬
align-self 각각의 플렉스 아이템을 교차축 방향으로 정렬
align-content 플렉스 아이템이 두 줄 이상일 때 교차축 방향으로 정렬
{ justify-content: <flex-start(주축 방향의 시작을 기준으로 정렬)>,
		   <flex-end(주축 방향의 끝을 기준으로 정렬)>,
                   <center(주축 방향의 중앙에 정렬)>,
                   <space-between(플렉스 아이템 사이의 간격이 균일하도록 정렬)>,
                   <space-around(플렉스 아이템의 둘레(around)가 균일하도록 정렬)>,
                   <space-evenly(플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬)>; }
                
{ align-items: <stretch(교차축 방향으로 플렉스 아이템의 너비나 높이가 늘어남)>,
	       <flex-start(교차축 방향의 시작을 기준으로 정렬)>,
               <flex-end(교차축 방향의 끝을 기준으로 정렬)>,
               <center(교차축 방향의 중앙을 기준으로 정렬)>,
               <baseline(플렉스 아이템의 baseline을 기준으로 정렬)>; }

 

 

주축의 방향이 row일 때 justify-content 속성값에 따른 정렬 결과

 

 

 

 


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

4. 그리드 레이아웃

그리드 레이아웃은 2차원 레이아웃 설계를 위해 CSS3에서 추가된 개념. 그리드 레이아웃의 구성 요소는 다음과 같음.

구성요소 설명
행(row) 그리드 레이아웃에서 가로줄을 의미
열(column) 그리드 레이아웃에서 세로줄을 의미
그리드 셀(grid cell) 행과 열이 만나서 이루어지는 하나의 공간
그리도 갭(grid gap) 그리드 셀과 그리드 셀 사이의 간격
그리드 아이템(grid item) 그리드 셀 안에 포함되는 콘텐츠
그리드 라인(grid line) 그리드 행과 열을 그리는 선
그리드 넘버(grid number) 그리드 라인에 붙는 번호 의미
그리드 컨테이너(grid container) 그리드 아이템을 묶는 부모 요소

 

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

그리드 레이아웃의 핵심은 행과 열.

속성 설명
display 속성의 값을 grid, inline-grid로 지정하면 그리드 레이아웃을 만들 수 있음
grid-template-rows, grid-template-columns 그리드 레이아웃의 행과 열을 지정
row-gap, column-gap 그리드 셀과 셀 사이의 간격 지정
{ display: grid;	/* inline-grid */ }

{ grid-template-columns: <1열값>,<2열값>.. | <repeat> | <minmax>;
  grid-template-rows   : <1열값>,<2열값>.. | <repeat> | <minmax>; }
  
{ row-gap   : <크기>;
  column-gap: <크기>; }

 

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

그리드 아이템을 정렬할 수 있는 속성

속성 설명
aline-items 그리드 아이템 전체를 셀의 세로 방향으로 정렬
align-selft 각각의 그리드 아이템을 셀의 세로 방향으로 정렬
justify-items 그리드 아이템 전체를 셀의 가로 방향으로 정렬
justify-self 각각의 그리드 아이템을 셀의 가로 방향으로 정렬
place-item align-items와 justify-items 속성을 한 번에 사용할 수 있는 단축 속성
place-self align-self와 justify-self 속성을 한 번에 사용할 수 있는 단축 속성
{ align-items: <stretch(그리드 아이템이 그리드 셀을 꽉 채우도록 크기를 늘림)>, 
		<start(그리드 아이템을 그리드 셀의 맨 위에 배치)>, 
                <center(그리드 아이템을 그리드 셀의 세로 방향 중간에 배치)>, 
                <end(그리드 아이템을 그리드 셀의 맨 아래 배치)>; }

{ justify-items: <stretch(그리드 아이템이 그리드 셀을 꽉 채우도록 크기를 늘림)>, 
		<start(그리드 아이템을 그리드 셀의 맨 위에 배치)>, 
                <center(그리드 아이템을 그리드 셀의 세로 방향 중간에 배치)>, 
                <end(그리드 아이템을 그리드 셀의 맨 아래 배치)>; }

{ place-items: <align-items>, <justify-items>;
  place-self : <align-self>, <justify-self>; }

 

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

그리드 레이아웃 예시

속성명 설명
grid-template-areas 그리드 레이아웃에서 행과 열을 이름으로 지정
grid-area 그리드 아이템에 이름을 지정
grid-column-start, grid-column-end 그리드 레이아웃에서 열의 시작 번호와 끝 번호를 지정
grid-row-start, grid-row-end 그리드 레이아웃에서 행과 시작과 끝 번호를 지정
grid-column grid-column-start, grid-column-end 속성을 한 번에 사용할 수 있는 단축 속성
grid-row grid-row-start, grid-row-end 속성을 한 번에 사용할 수 있는 단축 속성
{ gird-area: <행과 열 이름>; }

{ grid-colum: <start>, <end>;
  grid-row  : <start>, <end>; }
 
{ grid-colum: <start>/span <열 개수>;
  grid-row  : <start>/span <행 개수>; }

 

8. 미디어 쿼리

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

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

 

not 뒤에 오는 모든 조건을 부정

only 미디어 쿼리를 지원하는 기기만 미디어 쿼리를 해석하라는 의미

mediatype 미디어 쿼리가 적용될 미디어 타입을 명시. 생략가능. 생략할 경우 all로 인식. 생략하지 않으면 반드시 다음에 and 연산자가 와야함.

타입 설명
all 모든 기기
print 인쇄 장치
screen 컴퓨터 화면 장치 또는 스마트 기기
speech 스크린 리더기 같은 보조 프로그램으로 웹 페이지를 소리 내어 읽어주는 장치

미디어 타입의 종류

media feature 미디어 쿼리가 적용될 미디어 조건을 적음.

 


 

 

출처

https://www.gilbut.co.kr/book/view?bookcode=BN003377

 

코딩 자율학습 HTML + CSS + 자바스크립트

기초부터 반응형 웹까지 초보자를 위한 웹 개발 입문서

www.gilbut.co.kr