반응형 웹 1

반응형 웹 & 관련 CSS

Viewport

• 웹 페이지가 표시되는 디바이스 화면 영역
• 특정 부분을 넣어, 반응형 웹 제작 가능
• 모바일, 태블릿, 데스크톱 등 각 기기에서 실제로 콘텐츠가 보여지는 영역

---

반응형 웹 설정

• 디바이스의 크기에 따라 콘텐츠가 적절하게 표시되도록 조절하는 데 사용
• <meta name=”viewport”>를 통해 설정할 수 있음
  • 페이지 크기와 스케일링 제조
• content 속성에 값 제시
  • width=divice-width: 장치에 맞게, 페이지 폭 설정
  • initial-scale=1: 초기 확대 레벨 설정
  • minimum-scale=1: 최소 축소 레벨 설정
  • maximum-scale=1: 최대 확대 레벨 설정
  • user-scalable=no: 사용자의 확대/축소 기능 사용 제한

---

@media 쿼리

• 화면의 특성에 따라 다른 스타일을 적용 가능
• 기준 화면의 특정 속성의 크기 기준치를 지정하기도 함.
• 예시: 화면 너비에 따라, 폰트 크기 조정
  @media only screen [or all] and () and () .. 로 연결

  @media only screen and (min-width: 320px) and (max-width: 767px) {
    html {
      font-size: 28px;
    }
  }
  

---

애니메이션

• transition: [변화 속성] [지속시간] [속도 함수]
  • 요소의 스타일이 변경되면, 부드러운 애니메이션 효과를 줌.
  • 변화 속성
    • 해당 속성이 값이 변경되면, 애니메이션 적용 (예: width)
  • 지속 시간
    • 애니메이션이 진행되는 시간 (예: 0.5s)
  • 속도 함수
    • 애니메이션의 속도가 변하는 방식
    • (예: ease 는 부드러운 기본적인 가속도)
• transform: 각도
  • 요소를 기울기만큼 회전시켜줌.

---