[미디어쿼리] 실습

[미디어쿼리] 실습
/category/%EA%B3%B5%EB%B6%80/HTML%EA%B3%BC%20CSS

2023. 1. 5. 12:38

앞서 공부한 것들로 준비된 예제의 조건을 만족하는 미디어 쿼리를 작성해본다.

실습1. 디스플레이 크기에 따른 body 요소의 background-color 변경

세부 조건

뷰포트의 width가 0~767px이면 : gold
768px~1024px이면 : lightblue
1025px~이면 : lightpink

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>media queries</title>
        <link href="css/mediaquery.css" rel="stylesheet">
    </head>
    <body>
        <p>
            w3c는 <a href="https://www.w3.org/TR/css3-mediaqueries/">CSS3 미디어 쿼리 문서</a>를 2012년 6월에 표준 권고안으로 제정하였습니다.
        </p>
        <p>
            또한, 기존의 미디어 쿼리 개선 작업을 진행 중이며, 2017년 9월에 <a href="https://www.w3.org/TR/mediaqueries-4/">미디어 쿼리 레벨4</a>를 발표했습니다. 이 문서는 현재 유력 표준 권고안입니다.
        </p>
    </body>
</html>

/*mediaquery.css 파일*/
@media screen and (max-width: 767px) {
    body { background-color: gold; }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body { background-color: lightblue; }
}

@media screen and (min-width: 1025px) {
    body { background-color: lightpink; }
}

참고로 위 예제에서 기준이 되는 768px, 1024px은 실제로 실무에서 자주 사용되는 포인트이다.

브레이크 포인트를 기준으로 참고 이미지처럼 나뉘게 된다.

위 예제 코드의 경우 조건을 잘 만족하지만 미디어 쿼리 하나를 줄일 수 있을 것 같다.

기본적으로 body의 배경색을 지정해놓고 미디어 쿼리를 작성하면 나머지 하나의 미디어 쿼리는 줄일 수 있을 것이다.

이 때 어떤 조건을 기본으로 정할지는 작성하는 사이트가 모바일 사이트인지, 데스크탑 사이트인지를 먼저 구분해야 한다.

필자는 모바일 중심의 사이트라고 생각하고 코드를 수정해보겠다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>media queries</title>
        <link href="css/mediaquery.css" rel="stylesheet">
    </head>
    <body>
        <p>
            w3c는 <a href="https://www.w3.org/TR/css3-mediaqueries/">CSS3 미디어 쿼리 문서</a>를 2012년 6월에 표준 권고안으로 제정하였습니다.
        </p>
        <p>
            또한, 기존의 미디어 쿼리 개선 작업을 진행 중이며, 2017년 9월에 <a href="https://www.w3.org/TR/mediaqueries-4/">미디어 쿼리 레벨4</a>를 발표했습니다. 이 문서는 현재 유력 표준 권고안입니다.
        </p>
    </body>
</html>

/*mediaquery.css 파일*/
body { background-color: gold; }

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body { background-color: lightblue; }
}

@media screen and (min-width: 1025px) {
    body { background-color: lightpink; }
}

767px 이하일 때의 미디어 쿼리문을 없앴다.

body 속성의 기본 배경색은 gold일 것이고 미디어 쿼리문에 따라 조건에 맞을 때만 배경색이 변경될 것이다.

결과적으로는 미디어 쿼리문 세개를 쓴 것과 동일한 동작을 할 것이다.

브라우저에서 실제 동작을 확인해보면 원하는 대로 잘 동작하는 것을 볼 수 있다.

만약 태블릿을 중심으로, 데스크탑을 중심으로 사이트를 제작한다고하면 위 코드처럼 범위만 수정해주면 될 것이다.

실습2. 웹 페이지를 인쇄하는 경우의 스타일 추가

세부조건

앵커 요소의 url 출력
앵커 요소의 밑줄 제거

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>media queries</title>
        <link href="css/mediaquery.css" rel="stylesheet">
    </head>
    <body>
        <p>
            w3c는 <a href="https://www.w3.org/TR/css3-mediaqueries/">CSS3 미디어 쿼리 문서</a>를 2012년 6월에 표준 권고안으로 제정하였습니다.
        </p>
        <p>
            또한, 기존의 미디어 쿼리 개선 작업을 진행 중이며, 2017년 9월에 <a href="https://www.w3.org/TR/mediaqueries-4/">미디어 쿼리 레벨4</a>를 발표했습니다. 이 문서는 현재 유력 표준 권고안입니다.
        </p>
    </body>
</html>

/*mediaquery.css 파일*/
@media print {
    a { text-decoration: none; }
    a::after {
        display: inline;
        content: "(" attr(href) ")";
    }
}

::after를 이용해서 요소의 맨 뒤에 가상 요소를 추가하도록 한다.

content 속성값으로 attr(href)를 출력하는데, 여기서 attr() 함수는 괄호 안에 있는 요소의 속성값을 문자열로 반환하는 함수이다. 링크 양 옆에 괄호가 추가되도록 attr() 양 옆에 "(", ")"도 추가한다.

a 태그에 text-decoration 속성의 값을 none으로 설정하면 밑줄이 제거된다.

attr() 함수에 대해서는 아래 링크 참조

https://www.w3bai.com/ko/cssref/func_attr.html#gsc.tab=0

CSS attr() Function

CSS attr() Function 예 다음은 값 삽입 href 각 링크 후 괄호 안의 속성 : a:after { content: " (" attr(href) ")"; } »그것을 자신을 시도 정의 및 사용 attr() 함수는 선택된 요소의 속성 값을 반환한다. 이 값

www.w3bai.com

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS

부스트코스 무료 강의

www.boostcourse.org

'공부 > HTML과 CSS' 카테고리의 다른 글

@charset (0)	2023.02.16
뷰포트의 이해 (0)	2023.01.05
[미디어 쿼리] Syntax와 예제 코드 (0)	2023.01.04
[미디어쿼리] 미디어 타입 & 미디어 특성 (0)	2023.01.03
[미디어쿼리] 미디어쿼리 소개 (0)	2023.01.03

김철용 기록소

CATEGORIES