1. 기초 개념
1) 뷰 포트(viewport)
현재 화면에 보여지고 있는 영역을 뜻함. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면 크기가 다르게 보이는 현상이 나타남.
2) 메타 태그 살펴보기
<meta name="viewport" content="width=device-width, initial-scale=1.0">그냥 지나쳤을 수도 있는 viewport 메타태그는 현재 기기의 width값으로 초기화 시키겠다. (기기에 맞게 넓이를 설정하겠다.)
2. px, rem, em
px
절대 길이 단위. 어떤 상황에서도 동일한 값을 유지하므로, 가변성이 없다.
rem
루트 요소의 글꼴 크기를 의미
기본이 16px이기 때문에 1rem은 16px를 뜻한다.
em
부모 요소의 글꼴 크기를 의미
em으로 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 한다.
3. vw, vh, vmin, vmax
뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위이다.
vmin
너비와 높이 중 더 작은 값으로 설정
vmax
너비와 높이 중 더 큰 값으로 설정
4. %
백분율 값을 나타낸다. 부모 요소와의 상대적 크기를 지정한다.
5. 함수
width: calc(100% - 100px)6. 미디어 쿼리
@media screen and (max-width: 768px){
/*
화면(screen)
의 너비가 768px 이하일 경우에
여기에 정의된 스타일 선언문을
추가 적용
*/
}@media
1) screen: 브라우저 화면
min-width: 800px -> 800px보다 커지게 되면 아래 스타일을 적용
max-width: 800px -> 800px보다 작을 때, 아래 스타일 적용
2) print: 프린트 결과물
3) speech: 음성
7. 가변 이미지
picture tag
<picture>
<source srcset="imgs/2.png" media="(min-width: 800px)">
<img scr="imgs/1.png">
</picture>현재는 1.png를 보여주지만 800px이상일 경우 2.png를 보여준다는 의미이다.
해상도 별로 이미지의 비율을 다르게 하고 싶을 때, 보여준다.
8. 가변 동영상
9. 모듈화 디자인
컴포넌트란 독립적이고 재사용 가능한 모듈을 뜻하는데 반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다 봐도 무방
모듈화란? 개별 컴포넌트를 하나의 조립 부품으로 보고 작업하는 것
10. 기타
reset.css: 링크
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
box-sizing: border-box;
outline: none;
}