[TIL] 3일차

1. Cross Browsing이란?
2. CSS 레이아웃 속성에 대해서
3. Viewport 를 이용한 반응형 레이아웃
4. 실습 문제 오류 해결하기 👈

1. Cross Browsing이란?
: 일단 먼저 알아야 할 것은 레이아웃이다! 레이아웃이란 웹사이트에서 정보와 내용을 보기 편하게 한 화면에 나누고 디자인하는 것이다. 성향과 목적에 따라 다양한 레이아웃이 존재한다.
웹 사이트를 만들 때 가장 먼저 기획하는 것이 화면 레이아웃이다. UI를 먼저 다 해두면 확실히 그 안에 코드를 짤 때 산으로 가는 일이 없을 것 같다. (그래서 프로젝트 리더는 프론트가 많이 한다고 한다!!)
✔크로스 브라우징(Cross Browsing)이란 사용자의 기기나 시스템이 각각 달라도 최대한 비슷하게 표현하도록 공통 요소를 사용해서 웹페이지를 개발하는 기법이다. 웹 표준 기술을 이용해서 특정 기종(또는 특정 브라우저)에만 최적화되지 않도록 하는 것. 모든 사용자가 인터넷의 정보로부터 소외되지 않도록 웹 표준 기술로 개발해야 한다!!!

2. CSS 레이아웃 속성에 대해서
- 속성

• overflow
  : 박스 모델 안의 내용이 박스의 범위를 초과할 때 어떤 형태로 출력할 지를 결정

  overflow: visible | hidden | scroll | auto | inherit
     1. visible(기본값) : 박스 범위를 초과하는 내용도 그대로 표현
     2. hidden : 박스를 벗어나는 내용은 모두 숨김
     3. scroll : 우측에 스크롤 바를 이용하여 위, 아래로 이동해서 내용 확인이 가능
     4. auto : 내용이 박스를 벗어날 때에만 스크롤 바가 생김

• display
  : 요소의 종류를 블록 또는 인라인으로 바꾸는 속성

  display :  inline | block | none | inline-block
  	1. inline : 새로운 라인에서 시작하지 않고 너비도 해당 내용만큼한 영역을 확보
      2. block : 줄바꿈 한 후 새로운 라인의 전체 영역(너비)을 확보
      3. none : 박스를 생성하지 않음
      4. inline-block : inline을 block처럼 만들어서 바로 옆에 나열

• visibility
  : 요소를 보이게 할 지 숨기게 할 지 선택하는 속성

  visibility : visible | hidden | collapse
  	1. visible(기본값) : 요소를 보여줌
      2. hidden : 요소를 보여주지 않음
      3. collapse : 테이블 요소에서만 쓸 수 있음, hidden과 비슷하지만 필요에 따라
      공백을 없애고 테이블 레이아웃을 자연스럽게 보여준다.

• position
  : 레이아웃을 배치하거나 요소의 위치를 정할 때 사용하는 속성

  	position : static | relative | absolute | fixed

  1. static(기본값) : 무조건 요소를 순서대로 배치. 위치를 지정해도 적용 X
  2. absolute : 문서(또는 상위 요소) 내에서 절대 위치에 배치
  3. relative : 직전 요소의 상대 위치에 배치
  4. fixed : 현재 보이는 브라우저 화면 내에서 절대 위치에 배치

• z-index
  : 어느 요소가 앞에 나올 지 배치 순서를 정하는 속성, position 속성을 적용한 요소에서만 동작하고 정숫값을 사용해서 배치 순서를 정한다. 값이 높을수록 앞쪽에 배치하고 값이 작을수록 뒤쪽에 배치.

  	z-index : auto | number | initial

• float
  : 본문 중간에 이미지를 넣고자 할 때 주로 사용한다. 이미지가 본문 내용 중간에서 왼쪽이나 오른쪽으로 위치하고 텍스트가 자연스럽게 그 옆에 어우러지도록 배치할 수 있다.

  	float: none | left | right | initial | inherit

  1. none(기본값) : 플로팅 박스 적용 없이 순서대로 배치
  2. left : 플로팅 박스를 왼쪽 경계에 배치하며 주변 콘텐츠가 오른쪽에 나타남
  3. right : 플로팅 박스를 오른쪽 경계에 배치하며 주변 콘텐츠가 왼쪽에 나타남

• clear
  : float를 사용해서 이미지를 넣었다가 이미지 옆이 아닌 아래에서 새로 시작하고 싶을 때 사용

  	clear : none | left | right | both

  1. left : 왼쪽 요소를 취소
  2. right : 오른쪽 요소를 취소
  3. both : 모든 float(left, right)을 취소
     

3. Viewport를 이용한 반응형 레이아웃

• ViewPort란
  : 웹페이지에서 브라우저의 크기 및 배율을 변경할 때 사용하는 메타 태그이다. 뷰포트는 레이아웃의 가로 값을 가지고 사용 기기의 화면 크기와 비교한 뒤 여백 없이 꽉 찬 화면으로 만들어 준다. (뷰포트를 사용하지 않고 화면을 설계하면 해상도와 상관없이 무조건 기본 사이즈인 980px로 설정된다.)

     1. width : 가로(너비)
     2. height : 세로(높이), 기본값은 너비 속성 값과 기기의 비율에 따라 계산.
     3. initial-scale : 배율로 설정하는 뷰포트의 초기 화면의 크기 값, 설정 범위는 1~10.0 (기본값: 1)
     4. minimum-scale : 최소 배율 값. 설정 범위는 0~10.0 (기본값 : 0.25)
     5. maximum-scale : 최대 배율 값. 설정 범위는 0~10.0 (기본값 : 1.6)
     6. user-scalable : 사용자가 확대 또는 축소를 설정하는 속성 (기본값: yes)
     
     ❌ 주의할 점 
     
     1. 콘텐츠보다 작게 width와 height를 설정할 경우 width와 height는 무시한다.
     2. initial-scale을 설정하지 않고 width와 height를 쓰면 전체 화면으로 표시한다. 
     3. initial-scale에서 width와 height을 설정하지 않으면 기본값으로 자동 설정한다.