반응형 웹? (Responsive Web)
웹페이지는 pc, mobile, 태블릿 등 다양한 기기로 본다. 이 기기들의 화면크기는 모두 다르기 때문에 반응형웹이 필요하다.
자동적으로 사이즈에 맞게 배치나 크기 등을 변경해주는 것. 보기 편하게!
- 반응형
- 동일한 페이지를 보여주나 기기의 화면 크기에 따라 레이아웃을 다르게 보여준다.
- 모바일로 웹사이트를 자주 이용하기 때문에 반응형은 아주 중요하다.
- 적응형
- 페이지가 아예 나누어진다. 모바일버전, Pc버전으로 환경에 따라 다른 페이지를 보여준다.
- 네이버가 적응형을 이용하고 있다. pc에서 브라우저 창의 크기를 줄이면 모바일버전으로 바꾸어서 볼 수 있다.
- viewport
- 각 기기의 화면 사이즈에 맞춰 사용자에게 최적화 된 크기의 웹페이지를 적용시켜준다.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><head>에 들어가 있는 매타태그이다. 여기서initial-scale=1.0는 확대 정도를 의미.
미디어쿼리
- 미디어 타입(디바이스 화면)에 따라 css를 지정해준다.
- 미디어 타입의 기준을 mobile로 할 지, pc로 할 지 정하고 시작해야 한다! 기준이 달라지면 나중에 꼬일 수 있다.
- 원래 지정한 속성들이 있더라도
@media로 타입과 규칙을 지정해주면, 지정한 타입이 되었을 때 새로운 규칙을 실행한다. 특정 타입일때만 지정한 규칙을 덮어씌워주는 것이라고 생각!
- 계속 작성을 해보면서 감을 찾는게 중요하다!
▶️ 기본 문법
@media 미디어타입 and (크기 범위, 속성 등){ 적용할 CSS } 형식으로 작성한다.
@media 미디어타입 and (가로 크기 범위) and (세로 크기 범위){ 적용할 CSS } 이렇게 and를 이용해 여러 조건을 지정할 수도 있다.
- 미디어타입 :
all: 모든 매체에 사용print: 인쇄 시 프틴터 기기에 사용/*프린트를 할 때 continer의 배경 색상을 변경하라는 의미*/ @media print { .container { background-color: blue; } } /*기본 브라우저의 배경컬러는 흰색, 프린트 할 때는 검정색으로 지정*/ @media screen { body { background-color: black; color: white; } } @media print { body { background-color: white; color: black; } }screen: pc나 mobile같이 스크린이 있는 매체에 사용
- 크기 범위 :
min: 최소 뷰포트 넓이를 설정/*최소 넓이가 700px일 경우. 즉 넓이가 700px이상일 경우에 적용한다. 700px 이하에는 기본 css를 적용하는 것.*/ @media screen and (min-width: 700px) { .container {background-color: blue;} }max: 최대 뷰포트 넓이를 설정/*최대 넓이가 700px일 경우. 즉 넓이가 700px이하일 경우에 적용한다. 700px 이상에는 기본 css를 적용하는 것.*/ @media screen and (max-width: 700px) { . box1{background-color: darkgoldenrod;} }
- 기타 속성 :
width/*이런식으로 and를 이용해 200px보다 크고 500px보다 작을 때에만 적용할 수도 있다.*/ @media only screen and (min-width: 200px) and (max-width: 500px) { body {background-color: beige;} }heightorientation: 매체 화면의 방향에 따른 적용 (landscape(가로), portrait(세로))@media screen and (orientation: landscape) { body {background-color: beige;} }
▶️ 미디어쿼리 중단점(breakpoint)
- 미디어쿼리를 이용할 때 적용이 되고 중단될 지점(breakpoint)을 결정해줘야 한다.
- 보통 모바일 우선으로 기준점을 잡았을 때는
min-width를 사용하고 (작은 화면에서 큰 화면 순으로 미디어쿼리 작성) - 데스크탑 우선으로 기준점을 잡았을 때는
max-width를 사용한다.(큰 화면에서 작은 화면 순으로 미디어쿼리 작성) - 현업에서는 breakpoint를 정하고, breakpoint마다 layout을 변경하면서 진행한다. 이건 원하는대로 정하기 나름!
- 사이즈 참고 사이트
▶️ CSS 변수
- css에서도 변수를 사용할 수 있다.
- 아래 형식으로 사용하고 단어와 단어 사이는 ‘-’로 연결해준다.
:root {--원하는이름 : 값; } - 변수 사용 예시
/* 기본 값을 정해주고 */ :root { --color-main: navy; --height-header-lg: 80px; } /* 이런식으로 사용한다. */ .container { background-color: var(--color-main); } - 자주 사용하거나 기본적인 스타일(메인 컬러 등)을 지정하고 변수로 지정하면 편리하다. 나중에 값을 수정할 때 일일이 수정할 필요 없이
:root에 담긴 값만 수정해주면 되기 때문.
💬
- 간단한 듯 하면서 막상 하려면 헷갈린다..? 내 머릿속에는 이미 시뮬레이션이 되고 있는데 내가 원하는대로 구현하는게 참 마음대로 안된다.
- 노션으로 정리해놓고 귀찮아서 내 노션에만 간직해놓았다. 벨로그에 몰아서 올리고 있다. 복습하고 정리했으면 바로바로 올리자..!
프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆