대구AI스쿨 개발일지 ( 10일차 )

박호연·2021년 7월 9일

대구 ai스쿨

목록 보기

10/47

오늘의 학습내용은 mediaquery 의 내용이었다. mediaquery는 쉽게 설명하면 우리가보는 휴대폰 태블릿 pc 마다 보이는 사이트의 규격이나 양식이 바뀌는것을 코드에 적용시켜서 각각의 다른 기기에서도 자연스러운 결과를 보기위해 사용하는 것이다.

1) 학습한 내용

Media query란?

미디어 쿼리의 기본 양식

@media (min-width(최소): 100px) and (max-width(최대): 599px) {
    .pc {
        color: green;
        font-size: 10px;
        background-color: gray;
    }
}

최소 크기와 최대 크기의 값을 정해놓고

클래스값에 속성을 부여하면 사용자가 크기를 줄이고 늘릴때 미디어쿼리가 적용된다.

미디어쿼리 사용시 주의점

클래스값에는 배경색을 지정해두고

미디어쿼리에 배경색을 지정해주지않으면 기존 클래스값 배경색이 그대로 적용된다.

항상 바꾸려고하는 속성값을 꼼꼼히 체크해서 저장해줘야한다.

메타태그 viewport 의 적용

<meta name="viewport" content="width=device-width, initial-scale=1.0">

사용자가 보는 디바이스 크기의 비율에 맞게 자연스럽게 스케일 업해주는게 viewport 의 역할

모든 디바이스 크기에 맞춰서 작업해보고싶다

디바이스 크기의 위드값을 알고싶다

참고할수있는 사이트 (보통 이렇게까지 디테일하게 작성하는 경우는 드물기때문에 오늘 실습 정도로만 익혀도 충분하다)

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

알아두면 좋은 기본상식 (스마트폰의 가로모드와 세로모드)

Orientation: portrait (세로), landscape(가로)

설정한 미디어쿼리가 잘적용되었는지 확인하는 방법

웹 검사에 들어가서 확인

미디어쿼리를 확일할때 직접 줄이면서 크롬브라우저에서 확인이 가능하다. 이때 케스케이딩이 적용되어 그전 클래스 값이 뒤로 밀린다.

미디어쿼리 실무팁

display: none;

display: none;은 코드는 남아있지만 화면상에서의 출력을 멈추는 기능이다.

보여주고싶은 코드와 숨겨야되는 코드를 구분해 적절히 사용하면 번거로운 일들을 방지할 수 있다.

결과적으로, 내가 원하는 정보를 원하는 기기에 맞춰서 보여줄수있다.

이렇게 두가지의 선택지로 나눌 수 있는데,

잘정돈된 작은 장난감상자를 큰상자에 퍼트려 정리하는것과 큰상자에

널브러진 장난감들을 작은상자에 정리하는것으로 비유해서 2번이 좋은 선택이란걸 알수있다.


h1{
    font-size: 20px;
    background-color: yellow;
}

@media (min-width: 768px) {
    h1{
        font-size: 40px;
        background-color: pink;
    }
}

Min-width 값만 적용해서 사용하면 768px이상은 pc버전

그이하는 자동적으로 모바일버전이 된다.

모든코드에 최대 최소값을 지정할 필요가 없다.


@media (min-width: 768px) {
    h1{
        font-size: 40px;
        background-color: pink;
    }
}

@media (min-width: 1024px) {
    h1{
        background-color: gray;
        font-size: 80px;
    }
}

최소값만 정해줬어도 첫번째 미디어쿼리는 두번째 미디어 쿼리의 최소 1024px의 값때문에

1024px미만의 설정값이 자동적으로 적용됨 ( 굳이 매번 최소최대값을 정해주지않아도 이러한 원리로 다양하게 적용이 가능하다)

결과적으로, 모바일 - 태블릿 - pc 순서대로 작성이 이상적

코드분량이 많이 줄어든다는 장점이 있으며

(실제로는 개발기간이 타이트하기때문에 이렇게 작업하기는 드물다.)