💡Responsive Web(반응형 웹)
🔹반응형 vs 적응형
반응형
- 동일한 페이지를 디바이스 크기에 따라 레이아웃을 다르게 보여줌
- 모바일로 웹 사이트를 접속하는 경우가 많으므로 반응형은 매우 중요한 기술임
적응형
- 사용자가 모바일 환경인지, pc환경인지에 따라 다른 페이지를 보여줌
🔻반응형의 필요성
더욱 더 다양한 기기로 접속하고 사용하기 때문에 화면 크기가 자동으로 줄어드는 반응형이 중요해짐!
비용절감과 유지보수가 쉬우며, 잘 만듬에 따라 seo의 검색순위를 높일 수 있다
🔻viewport
= 기기에 맞춰 디자인을 하기 위한 크기 요소
반응형의 필요성을 따라 탄생했다.
디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공한다.
🔗MediaQuery
서로 다른 미디어 타입에 따라 별도의 css를 지정하게 하는 기술
🔻@media
@media 미디어유형 and (크기 규칙)
미디어 유형 : all / print / screen
크기 규칙 : min / max
🔹미디어 유형
-
All(모든 경우)
@media all and (max-width: 600px){ 선택자{font-size: 2rem; } }** 미디어 유형을 작성하지 않은 경우는 all이 기본값이다!
-
Print(인쇄, 인쇄 미리보기)
@media print and (max-width: 480px){ 선택자{font-size: 2rem; } } // 화면 넓이가 480px 이하일 경우 화면에 적용** 일반화면에서는 적용이 안되는 것 처럼 보이지만,
Ctrl+ P 눌러서 인쇄미리보기로 보면 적용이 된다. -
Screen(인쇄를 제외한 모든 css)
@media screen and (min-width: 480px){ 선택자{background-color: red; } }
🔹크기 규칙
-
max(최대 뷰포트)
@media screen and (max-width: 480px) //화면 넓이가 480px 이하일 경우 화면에 적용화면 넓이가 max값의 이하일 경우 적용
-
min(최소 뷰포트)
@media print and (min-width: 480px) //화면 넓이가 480px 이상일 경우 인쇄에 적용화면 넓이가 min값의 이상일 경우 적용
** max와 min 값을 동일하게 주면 겹쳐서 화면에 안나타남.
1px이라도 차이 주기.
- 가로 세로 모드
@media screen and (orientation: landscape) //가로모드 @media screen and (orientation: portrait) //세로모드
🔻Breakpoint(중단점)
- media query 가 적용될 지점
- 현업에서는 중단점을 정하고, breakpoint마다 레이아웃을 변경함
보통의 레이아웃 사이즈
• Mobile <= 480px
• 768px <= tablet <= 1024px
• 1600px <= laptop
** 개발자 도구에서 좌측상단 아이콘 누르면 기기별 사이즈 볼 수 있음!
💡Bootstrap
웹 사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크
프레임워크 vs 라이브러리 차이점
- 프레임워크 :
특정 문제를 해결하기 위한 클래스의 집합
예를 들면 모델하우스. 우리가 수정할 수 있는 범위가 제한적이다. 굵직한 뼈대는 수정x
통제권은 프레임워크에게 있는 것 - 라이브러리
내가 필요한 기능을 가져다 쓸 수 있음
가구들로 내 맘대로 조립 및 배치할 수 있다.
재료의 선택권이나 통제권은 사용자에게 있는 것
🔻사용법
CDN 링크를 head태그 내부에 복붙해서 써야한다.
🔹속성 추가
{속성}{추가속성}-{크기} or
{속성}{추가속성}-{breakpoint}-{크기} 형태로 작성
<속성>
margin : m
padding : p
<추가속성>
top : t
bottom : b
left : s (start)
right : e (end)
상하(x축) : x
좌우(y축) : y
<크기>
- 0~5 사이의 숫자 : 숫자 0.25 spacer의 기본값은 16px)
- auto
색상
버튼
alert
Container
Position
📋 memo
미디어쿼리랑 부트스트랩을 언제 쓰는건지가 사용방법이 헷갈려서, 자주 써볼수록 는다고 하니 자주 써봐야겠다.
<출처 및 레퍼런스>
포스코X코딩온
TCP school
