이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 신문을 보는 것 같은 레이아웃
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Flex 기타 속성들 이 포스팅은 PC로 작성되었습니다. 모바일로 보시
gogogameboy.tistory.com
반응형 웹이란?
반응형 웹사이트란 컴퓨터처럼 가로가 긴 화면으로 봤을 때와, 가로가 좁고 세로가 긴 모바일 화면으로 봤을 때, 각각 다른 인터페이스를 보여주는 웹사이트를 말합니다.
이 블로그 또한 반응형 웹사이트이죠.
오늘은 그런 웹사이트를 만들기 위한 Media Query의 기초를 공부해보겠습니다.
@media
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
모바일 지원 웹페이지
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 HTML 웹 개발자 도구 이 포스팅은 PC로 작성되었습니다. 모바일로 보시
gogogameboy.tistory.com
이 포스트에서 공부했던 내용입니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 라는 메타 태그를 넣어줌으로서 모바일에서도 최적화가 되면서 Media Query가 작동하게 됩니다.
@midia는 Media Query의 시작을 알립니다.
@media (max-width:600px){ body{ background-color: green; } } 을 넣음으로 창의 크기가 가로 600픽셀 이하가 되면
백그라운드 컬러가 그린이 됩니다.
min-width를 넣으면 반대로 지정한 사이즈 이상이 되면 지정한 백그라운드 컬러가 적용이 됩니다.
CSS 선택자 우선 순위 (캐스케이딩)
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 구글 크롬 테마 변경하기 이 포스팅은 PC로 작성되었습니다. 모바일
gogogameboy.tistory.com
cascading에 의해서 아래에 있는 코드가 더 우선시 됩니다.
다음 포스트
CSS, Media Query를 이용해 반응형 홈페이지 만들기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 반응형 웹을 만들기 위한 Media Query 기초 이 포스팅은 PC로 작성되었
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS, float (0) | 2021.01.07 |
|---|---|
| CSS, Media Query를 이용해 반응형 홈페이지 만들기 (0) | 2021.01.06 |
| CSS 신문을 보는 것 같은 레이아웃 (0) | 2021.01.05 |
| CSS, Flex 기타 속성들 (0) | 2021.01.04 |
| CSS, Holy Grail Layout (0) | 2021.01.03 |
댓글