[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 이하이기 때문에) 속성을 초기화해주어야함.