반응형 웹페이지(1): 기초 기술

6503 단어 CSSCSS

가변 그리드

  1. 소개
  • 방법: px 를 %로 바꾼다
  • 효과: 화면 크기에 따라 크기(길이)가 달라진다.
  • 기존 코드
# wrap{
width: 960px
}
  • 개선된 코드
# wrap{
width: 90%
}
  1. 가변 그리드 공식
  • 공식:
  • 도해
  • 적용

뷰포트

  1. 소개
  • 효과: 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경
  • 효과2: 미디어쿼리가 화면 크기를 정확하게 감지하게 됨
  • 방법: head 태그 안에 meta태그 작성
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalalble=no">
<title>Document</title>
</head>

플렉스박스

  1. 소개
  • 가변적인 박스를 만드는 기술이자 웹사이트의 구조 설계를 위한 새로운 기술

미디어쿼리

  1. 소개
  • 효과: 화면 크기에 따라 각각 다른 효과(css파일)를 내보냄
  • 예시: 더본코리아
  • 방법: head 태그 안에 meta태그 작성
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalalble=no">
<title>Document</title>
</head>

css프레임워크(부트스트랩)

  1. 소개
  • 효과: 반응형 그리드 시스템, 다양한 컴포넌트, js기능 제공
  • 사이트: 부트스트랩
  • 방법: head 태그 안에 meta태그 작성
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalalble=no">
<title>Document</title>
</head>
[Spring Introduction] 3. 회원 관리 예제 - 백엔드 개발
[Py_Lv1] 콜라츠 추측

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage