#4 Responsive Web

반응형 웹

: 다양한 크기의 기기에 대응하여 웹사이트의 구조가 최적환된 구조로 변경하는 웹

 

뷰포트

• 정의 : 기기에서 실제 콘텐츠가 표시되는 부분
• <meta name="viewport" content="width=device-width, initial-scale=1. user-scalable=no">

 

미디어 쿼리

• 정의 : 화면해상도, 기기방향 등의 조건으로 html에 적용하는 css 스타일을 전환할 수 있는 css 속성
• 기본문법 : @media [only | not ] [미디어유형] [and | , ] (조건문) (실행문)
• @media all and (min-width:320px) { ... }
  @media all and (min-width:768px) { ... }
  @media all and (min-width:1024px) { ... }

 

그리드 레이아웃

• 정의 : 2차원 격자무늬의 레이아웃. 화면에 정보를 구성할 때 논리적으로 일관성 있게 표현하기 위한 구조
• 화면 너비를 특정 값으로 고정해 놓고 그 안에 표시할 요소의 너빗값을 지정

 

반응형 웹 구현 기법

1. 가변 그리드 레이아웃
   • 레이아웃을 고정 값이 아닌 백분율로 지정함으로써 화면의 너비가 바뀔 때마다 웹 요소의 너빗값도 함께 바뀜
2. 플렉스 박스 레이아웃
   • 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 레이아웃

 

플렉스 박스

• flexbox 구성
  1. flex container : flexbox가 놓여있는 영역. display : flex 속성이 적용 된 요소는 flex container가 된다
  2. flex item : flex container의 자식 요소
• flexbox의 두개의 축
  1. main axis : 주축. flex-direction에 의해 정의되며 주축을 따라 플렉스 아이템이 배치됨.
  2. cross axis : 교차축
• 시작선과 끝선
  1. 시작선: 처음 배치되는 위치, flex-direction이 row이면 주축의 시작선은 왼쪽 끝
  2. 끝선 : 마지막에 배치될 위치, flex-direction이 row이면 주축의 끝선은 오른쪽 끝
• 주요 속성
  1. display : flex | inline-flex 
     • flexbox로 작동시키기위한 기본 설정
     • flex : 박스를 블록수준의 flexbox로 작동하게 함
     • inline-flex : 인라인 수준의 flexbox로 작동하게 함
  2. flex-direction : row | row-reverse | column | column-reverse
     •  flexitem의 배치 방향을 설정
     • row : 박스를 왼쪽에서 오른쪽으로 배치
     • column : 박스를 위에서 아래로 배치
  3. flex-wrap : nowrap | wrap | wrap-reverse
     
     • 자식박스를 한줄안에 여러개를 배치하기 위한 부모속성
     • nowrap : 박스를 한 줄로 배치 (기본값)
     • wrap : 박스룰 여러 줄로 배치
  4. flex-flow : [flex-direction] [flex-wrap]
     • flex-direction과 flex-wrap의 축약 속성
  5. justify-content : flex-start | flex-end | center | space-between | space-around
     • 주축방향에서 플렉스아이템 배치 방법 설정
     • flex-start : 자식박스를 부모박스 주축의 시작점에 붙도록 배치 (기본값)
     • flex-end : 자식박스를 부모박스 주축의 끝점에 붙도록 배칙
     • center : 자식박스를 부모박스의 중앙에 배치, 양끝에 빈 공간 생길 수 있음
     • space-between : 자식박스가 시작점과 끝점에 붙도록 배치하고 자식박스들을 동일한 간격으로 정렬
     • space-around : 자식박스가 시작점과 끝점에 붙지 않도록 자식박스들을 동일한 간격으로 정렬
  6. align-items : stretch | flex-start | flex-end | center | baseline
     • 교차축방향으로 한줄의 플렉스아이템 배치 방법 설정
     • stretch : 자식박스를 확장해서 배치 (기본값)
     • flex-start : 자식박스를 시작점에 붙도록 배치
     • flex-end : 자식박스를 끝점에 붙도록 배치
     • center : 자식박스를 교차축 중앙에 배치
     • baseline : 자식박스의 문자열 baseline에 맞춰 자식박스들을 배치
  7. align-content : stretch | flex-start | flex-end | center | space-between | space-around
     • 교차축방향으로 여러줄의 플렉스아이템 배치 방법 설정
     • stretch : 자식박스를 확장해서 배치 (기본값)
     • flex-start : 자식박스가 시작점에 붙도록 배치
     • flex-end : 자식박스가 끝점에 붙도록 배치
     • center : 자식박스를 부모박스의 중앙에 배치
     • space-between : 자식박스가 시작점과 끝점에 붙도록 배치하고 자식박스들을 동일한 간격으로 정렬
     • space-around : 자식박스가 시작점과 끝점에 붙지 않도록 배치하고 자식박스들을 동일한 간격으로 정렬
  8. order : 정수값
     • 플렉스아이템의 배치 순서 바꾸기, 입력된 양수값값에 따라 배치
     • 0 : 기본값
  9. flex-grow : 양의 정수
     • 부모박스에 여백이 있을때 자식박스의 크기를 늘일 수 있는 속성, 자식박스간의 flex-grow 값 비율대로 남은 공간을 등분하여 확장
     • 0 : 기본값
  10. flex-shrink : 양의 정수
      • 부모박스 안의 자식박스의 크기가 넘치는 경우 크기를 줄이는 속성, 자식박스간의 flex-shrink 값 비율대로 크기 줄어듬
      • 1 : 기본값
  11. flex-basis : auto | width 속성값
      • 플렉스아이템의 기본 크기를 설정
      • auto : 플렉스아이템이 기본적으로 가지고 있는 크기를 기준으로 flex-grow, flex-shrink 속성값 적용 (기본값)
  12. flex : [flex-grow] [flex-shrink] [ flex-basis] | auto | initial | none
      • flex-grow, flex-shrink, flex-basis 축약속성
      • auto : 1 1 auto
      • initial : 0 1 auto
      • none :  0 0 auto
• 플렉스 박스 레이아웃 : https://d2.naver.com/helloworld/8540176