[210605 TIL] CSS
미디어 쿼리를 이용한 태블릿용 화면, 모바일용 화면 구성하기
@media (max-width: 1114px){
#wrap {width: 100%;}
footer {margin-left: 10%;}
header {text-align: left; width: 20%; height: 480px; margin-left: 10%;}
.myself {margin: 1px; margin-top: 40%}
header img {margin-top: 18%; width: 60%; height: 60%;}
header h1 {font-size: small;}
header h2 {font-size: xx-large;}
header h3 {font-size: x-small;}
section {width: 50%; height: 480px;}
section li {font-size: 15px; margin-top: 13%;}
.wrapper {margin-top: 15px;}
.wrapper h1 {font-size: 1.2rem;}
.wrapper li {font-size: 0.65rem;}
.wrapper ul {text-align: center;}
.iam {margin-top: 13px; margin-left: 2px; width: 45%;}
.like {margin-top: 13px; float: right; width: 45%;}
.exploring {margin-top: 250px;}
.exploring h1 {font-size: 1.2rem;}
.exploring li {font-size: 0.75rem;}
}
@media (max-width: 768px){
footer {margin-top: 10px; margin-left: 0px; font-size: 25px; text-align: center;}
header {border-style: solid; border-width: thin; border-radius: 5px;
height: auto; width: auto;
background-color: #F6F6F6;
margin-left: 10px; float: none; text-align: left; margin-top: 0px;}
.myself {margin-top: 2px;}
header h1 {float: center; font-size: 0.6rem;}
header h2 {font-size: 1rem;}
header h3 {font-size: 0.6rem;}
header img {float: left; height: 80px; width: 80px; margin-top: 3px; margin-left: 5%;}
section {height: auto; width: auto; float: none; margin-top: 2px; margin: 0px;}
section li {font-size: 0.5rem; margin: 4px;}
nav {float: none;}
.iam {float: none; width: auto; margin: 0px; margin-right: 0px;}
.like {float: none; width: auto; margin: 0px; }
.wrapper {margin: 0px; width: 100%; margin-right:0px;}
.wrapper h1 {font-size: 0.6rem;}
.wrapper li {font-size: 0.5rem;}
.wrapper ul {text-align: center;}
.exploring { width: auto; margin-left: 20px; margin: 0px; margin-top: 5px}
.exploring h1 {font-size: 0.6rem;}
.exploring ul {text-align: center;}
.exploring li {display: inline-block; font-size: 0.5rem;}
}
-
반응형 레이아웃(화면의 넓이가 달라질 때 마다 css 레이아웃 바뀌게 하는 것)을 구성할 때 @media 사용해 원하는 넓이마다 css 속성 적용
-
max-width : ~px / ~ 픽셀 이하
min-width : ~px / ~ 픽셀 이상 -
max-width: 1114px (태블릿용 화면)
화면 width 1114px 이하일 때 괄호안의 css 속성 적용 -
max-width: 768px (모바일용 화면)
화면 width 768px 이하일 때 괄호안의 css 속성 적용 -
screen ruler 프로그램을 이용해 화면 넓이 계산해서 사용하면 좋음.
-
반응형 레이아웃을 구성할 때 글자 크기는 고정된 단위 px이 아닌 rem이나 em을 쓰는 게 좋음.
-
font-size 속성의 small, medium, large 값을 이용해주어도 좋음.
-
레이아웃 넓이도 px이 아닌 %를 사용해 유동적으로 움직이게 구성
-
1114px 에 적용한 속성이 768px 에 적용한 속성에 그대로 남아있기 때문에(768px 이하도 1114px 이하이기 때문에) 속성을 초기화해주어야함.
Author And Source
이 문제에 관하여([210605 TIL] CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rimi0108/210605-TIL-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)