Meta Viewport
html 에서 meta 태그 밑에 meta viewport 태그를 넣는다.
e.g.1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
</body>
</html>width=device-width 로 하는것이 일반적이다.
initial-scale=1 초기 화면 배율 = 1 혹은 1.0 으로 쓰거나 100%로 써도 마찬가지의 효과다.
minimum-scale=1 사용자가 극단적으로 축소하는 걸 방지
maximum-scale=1 사용자가 극단적으로 확대하는 걸 방지
user-scalable=no 사용자가 조정하는 것을 막는다.
Media query
기본적인 문법
media ( ) { 일반적인 css코드와 똑같이 적는다 }
e.g.1
@media all and (max-width: 1000px) {
body {
background-color: green;
}
}media query 에는 여러가지 타입(screen, print, speech) 등이 있는데, 보통 all 로 선택해서 쓴다.
일종의 조건문처럼 작동한다.
위의 예시에서 (max-width: 1000px) 이 true 일 경우에 내부에 있는 걸 작동시키고 false 면 무시한다.
- landscape : 화면이 가로형
- portrait : 화면이 세로형
,는or의 작용을 한다.
e.g.2
@media (max-width: 1000px) {
body {
background-color: green;
}
}
/* 최대 가로 길이가 1000px 일 경우가 성립하면, 배경색이 green 으로 변한다. */이렇게 쓰면 위에 all 과 똑같이 동작하는데, default 가 all 이기 때문이다.
e.g.3
@media (orientation: landscape) and (max-width: 500px) {
.title {
background-color: green;
}
}
/* 최대 가로길이가 500px 인게 성립, landscape(가로형모드이면) 작용. */**e.g.4** ```css @media (orientation: landscape) and (max-width: 500px) { .title { background-color: green; } } /* 최대 가로길이가 500px 인게 성립, landscape(가로형모드이면) 작용. */ ```
버튼(button)을 가운데로 정렬하기
1. button-container div 를 만들고 버튼을 넣는다.
.button-container {
width: 100vw;
height: 300px;
position: relative;
}2. button 의 css 속성
.button {
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}