죄다 가변적(크기를 줄이든 크든 똑같-)
- px 대신 %를 사용한다
박스는 가변적이되 마진이나 패딩은 고정
- css3의 calc 함수를 사용
div{ width: calc(100%-100px) }
폰트
- em: 16px
부모에게는 em을, 자식에는 rem을- vw: 웹브라우저의 너비를 100으로 기준으로 하여 크기를 결정
vh: 웹브라우저의 높이를 100을 기준으로 하여 크기를 결정 \
vmin: 웹브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기 결정
vmax: 웹브라우저의 너비와 높이 중 긴 쪽을 기준으로 하여 크기 결정
가변 이미지와 가변 동영상
- 높이값 0, overflow hidden, position 속성 absolute, 위치 왼쪽 위쪽 0, 높잇값 100%
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <title></title> <style> * { margin: 0; padding: 0; }
video,
iframe {
width: 100%;
max-width: 100%;
}
#wrap {
position: relative;
padding-bottom: 56.25%;
/* 9 ÷ 16 */
height: 0;
overflow: hidden;
}
iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
</style>
개발자지망생