반응형이란
반응형 웹이란 크롬창을 줄이거나 늘릴 때 웹 페이지가 반응해서 사용자의 화면에 맞춰 크기가 변하는 것을 말한다.
미디어쿼리
미디어 쿼리는 사용자 화면의 크기에 맞춰 css를 보여주는데 조건문과 비슷하다.
조건문 같은 부분에는 max-width와 min-width를 쓰는데 max는 내가 설정한 것 이하일 때, min은 이상일 때 적용된다.
그렇기 때문에 주로 max는 데스크탑이 주요할 때 쓰고 min은 모바일이 주요할 때 사용한다.
// max-width 에서 모바일 화면 구현할때
@media only screen and (max-width: 425px) { // 화면이 425px 이하인것에 이 css를 적용시킨다.
.box{
display: flex;
flex-direction: column;
}
}
// min-width에서 모바일 외 것을 구현할때
@media only screen and (min-width: 425px) { // 화면이 425px 이하인것에 이 css를 적용시킨다.
.box{
display: flex;
flex-direction: column;
}
}위 코드에 보이듯 (max-width: 크기지정 px) 이렇게 쓰면 된다!
CSS 단위!
css에는 단위가 있다. 흔히 px을 주로 쓰지만 고정된 화면이 아닌 반응형일 때는 여러 단위를 알고 적절하게 사용하는 것이 중요하다!
뒤에 나오는 예시에는 크기 비교를 위해 내 프로젝트의 헤더를 추가했다.
(난 처음에 px만 썼다가 13인치 맞춤 화면을 만들었었다 하핳)
절대단위
px
먼저 px 이 있다. px은 화면에 px단위에 맞춰 보여준다.
// 버튼을 만드는 html 이 있을떄
<button classname="button"> 버튼 </button>
// css를 사용
.button{
heigth: 50px;
width: 100px;
}위와 같은 상황일때는 button의 크기는 엄청 큰 화면을 써도 가로 100px 세로 100px인 버튼으로 고정된다.
상대단위
%
%는 부모를 기준으로 몇 %으로 보여줄 건지를 말한다.
<div className="prcdiv">
<button className="prcbutton">d</button>
</div>
.prcdiv{
height: 300px;
width: 300px;
}
.prcbutton{
height: 50%;
width: 100%;
background-color: #D9D9D9;
}
부모가 300px인 정사각에 width100%; height:50% 일 때 버튼의 px은 가로 300px 세로 150px 인 것을 확인할 수 있다.
vh와 vw
예제를 위해 max-width (425px)로 해더를 숨겼다.
vh는 Viewport height의 축약어이고 화면을 기준으로 한다.
vw는 Viewport width의 축약어이고 화면을 기준으로 한다.
.prcdiv{
height: 300px;
width: 300px;
background-color: #3152FF; // 잘 보이게 배경색추가
}
.prcbutton{
height: 50vh;
width: 100vw;
background-color: #D9D9D9;
}
왼쪽은 전체화면일 때 보이는 모습이고 우측에는 축소 시 화면이다.
화면의 길기가 줄어들 때 버튼의 크기가 줄어서 글씨도 크게 보이고 뒤에 가려져 있던 부모가 div가 보인다.
반대의 경우는 어떨까
.prcdiv{
height: 300px;
width: 300px;
background-color: #3152FF;
}
.prcbutton{
height: 100vh;
width: 50vw;
background-color: #D9D9D9;
}
이렇게 가로가 화면에 맞게 짧아지면서 max-width (425px)로 숨겨놓은 헤더가 보인다.
em
em은 폰트 단위인데 부모 폰트의 크기에 맞춰 변화한다. 1em은 부모와 같은 사이즈이고 2em은 부모에 2배 크기를 말한다.
<div className="prcdiv">
em 예시 부모글씨
<div className="prcfont">
em 예시 자식글씨
</div>
</div>
.prcdiv{
font-size: 50px;
}
.prcfont{
font-size: 2em;
}
<div className="prcdiv">
em 예시 부모글씨
<div className="prcfont">
em 예시 자식글씨
</div>
</div>
.prcdiv{
font-size: 50px;
}
.prcfont{
font-size: 0.5em;
}
rem
rem은 최상위 폰트 사이즈를 따른다.
rem에서 r은 root를 말 한다. 즉 최상위 요소 font-size 속성값 의미한다. HTML에서 최상위 요소는 <html>이다.
따라서 rem 경우, html 요소의 font-size 속성값이 기준이 되는 것이다.
<div> rem 예시 최상위 글씨
<div className="prcdiv"> rem 예시 부모글씨
<div className="prcfont"> rem 예시 자식글씨 </div>
</div>
</div>
html{
font-size: 50px;
}
.prcdiv{
font-size: 25px;
}
.prcfont{
font-size: 2rem;
}
최상위 글씨는 50px이고 부모는 25px 자식은 2 rem을 써서 100px인 것을 볼 수 있다.
'프로젝트' 카테고리의 다른 글
| 구글 검색 1등! 검색하면 바로 나오기! (0) | 2023.07.28 |
|---|---|
| Proptypes를 이용한 타입 체크 (0) | 2023.07.23 |
| 코드 리팩토링 비동기편 (await과 병렬) (0) | 2023.07.12 |
| JSON 데이터 합치기 2탄! (0) | 2023.07.07 |
| 금융감독원 API 사용하기! (0) | 2023.07.06 |
