0709 개발일지

Yesol Lee·2021년 7월 9일

대구AI스쿨

AI스쿨_개발일지

목록 보기

10/57

학습내용

미디어쿼리 기초, 실습 일부
github소스코드

미디어쿼리 기초

적응형(adaptive), 반응형(responsive) 레이아웃

사용자의 디바이스 화면 크기에 따라 html 요소의 속성 및 배치등이 달라지는 레이아웃들이다.

미디어쿼리란?

사용자의 디바이스 유형, 크기에 따라 웹사이트의 스타일을 수정할 때 사용한다. 여기서는 사용자가 접속한 기기의 width값을 기준으로 적용하였다. 아래 코드는 미리어쿼리의 기본적인 구조이다.

미디어 유형: @media screen(화면 대상), @media print(웹페이지 프린트 결과물 조절) 등등 있지만 특별한 경우를 제외하곤 생략해도 된다.
논리연산자: and, not, only, or(,)등을 이용할 수 있다. 보통 width값 범위를 나타낼 땐 and 사용
미디어기능: min-width, max-width 등을 주로 사용. orientation(스마트폰 화면 방향)-landscape(가로), portrait(세로)

.pc {
	color: red;
    background-color: yellow;
}
@media (min-width: 300px) and (max-width: 767px) {
    .pc {
        color: blue;
    }
}

스마트폰: 320px ~768px 미만
태블릿: 768px ~ 1024px미만
PC: 1024px 이상

미디어쿼리 사용 시 주의점

미디어쿼리 밖에 작성된 css를 고려해서 작성해야 한다. :
미디어쿼리 안의 코드는 밖의 코드에서 상속 받는다. ->모바일버전 별도 css 문서를 사용하는 방법도 있다.
html meta 태그 추가하기: viewport는 사용자 디바이스 넓이에 맞춰 자연스럽게 scale up 해줌

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

스마트폰 화면 확인하기

dothome 서버에 올려서 도메인으로 들어가기: 실제 가지고있는 디바이스만 테스트가능
크롬 브라우저에서 기기 종류 선택해서 보기
dothome서버를 휴대폰으로 들어가서 보니 헤더의 미디어쿼리가 잘 적용된 것을 볼 수 있었다. 그런데 크롬 개발자도구에서 다양한 크기의 디바이스 화면을 미리 볼 수 있는 기능을 가지고 있었다.

미디어쿼리 응용

display:none

pc버전, 모바일 버전의 html코드가 따로 있어서 각각의 경우 하나씩만 보여줘야 할 때가 있다. 이때 display:none(<->다른 속성값. initial도 동작했음)을 이용하면 요소를 아예 보이지않게 할 수 있다. 물론 html 코드를 중복해서 작성하는 거 자체가 비효율적이므로 처음부터 pc와 모바일 환경을 둘 다 고려하는 것이 좋다고 한다.

.pc {
    
    font-size: 50px;
    background-color: pink;
    color: red;
}
.mobile {
    display: none;
}
@media (min-width:320px) and (max-width: 767px) {
    .pc {
        display: none;
    }
    .mobile {
        display: initial;
    }
}

min-width의 사용

적응형, 반응형 웹사이트를 제작할 때 상대적으로 레이아웃이 간단한 모바일 버전을 먼저 기획한 후 pc로 확장하는 것이 더 수월하다고 한다. 이전 예시에서는 and로 width값의 최소, 최대값을 표시해주었다. 실제 만들 때는 min-width값만 넣은 미디어쿼리를 만든 후 그것보다 더 큰 min-width값을 가진 미디어쿼리를 추가하면 자연스레 이전 쿼리에 max-width값이 추가된 것 같은 효과를 얻을 수 있다. min-width값을 사용해 미디어 쿼리의 안쪽을 pc 버전으로 구현, 바깥쪽을 모바일 버전으로 구현하면 된다.

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

미디어쿼리 실습

오늘 분량은 미디어쿼리 기초 내용까지긴 한데 실습을 해 봐야 좀 더 이해될 것 같아서 조금만 더 하기로 했다.

미디어쿼리를 사용한 메뉴버튼

모바일버전
1. ul {display:flex;}를 통해 리스트를 x축 정렬함 (pc버전)
2. 미디어쿼리 안에서 ul{flex-direction:column}으로 정렬 방향을 세로로 바꾸었다.
3. 미디어쿼리 안에서 세로 정렬을 하면 요소 간 여백을 주기 위해 li{ margin-bottom: 10px}을 준 후 마지막 요소는 :last-child로 지정해 마진을 없애주었다.

<ul class="media-menu">
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
</ul>

.media-menu {
    width: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.media-menu li {
    width: 150px;
    background-color: yellow;
}
@media (min-width: 320px) and (max-width: 767px) {
    .media-menu {
        flex-direction: column;
        align-items: flex-start;
        width: 190px;
    }
    .media-menu li {
        margin-bottom: 10px;
    }
    .media-menu li:last-child {
        margin-bottom: 0;;
    }
}

helbak 사이트 헤더 만들기

하나의 공간 안에 여러 요소를 가로 정렬에서 세로 정렬로 바꾸는 포인트는 비슷하지만 내부 요소의 width값을 비율로 주고, position을 3차원으로 바꾸면서 일어나는 문제들을 해결하였다.

<header class="intro">
    <h1></h1>
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</header>
<main role="main">
    <h1>Hello World Hello World Hello World Hello World
        Hello World Hello World Hello World Hello World
        Hello World Hello World Hello World Hello World
    </h1>
    <h1>Hello World Hello World Hello World Hello World
        Hello World Hello World Hello World Hello World
        Hello World Hello World Hello World Hello World
    </h1>
</main>

기본 레이아웃 css

<body>의 넓이 100%를 가진 <header> 안에 로고 부분과 nav메뉴가 x축 정렬되며 각각 넓이의 50%를 차지하고 있다.
nav 메뉴 안 ul의 li요소들도 각각 1/3씩을 차지한다. 이렇게 요소를 3등분할 때는 width:33.3333%를 사용한다.
li 요소 각각도 배경색이 다른 것은 :nth-child(n)를 통해 지정해주었다.
<header>는 스크롤을 내려도 고정되어 있게 하기 위해 position:fixed를 적용했다. <header>가 3차원인데 그 아래의 <main>은 2차원이라 main의 윗 부분이 header와 겹치게 된다. 따라서 겹치는 만큼 main의 내용물을 아래로 내려주어야 하는데, 여기서는 padding-top을 사용했다.

.intro {
    display: flex;
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
}
.intro h1 {
    width: 50%;
    height: 80px;
    background-color: black;
}
.intro nav {
    width: 50%;
    height: 80px;
    background-color: yellow;
}
.intro nav ul {
    display: flex;
}
.intro nav ul li {
    width: 33.3333%;
    height: 80px;
}
.intro nav ul li:nth-child(1) { 
    background-color: #f9f9f9;
}
.intro nav ul li:nth-child(2) {
    background-color: #f4f4f4;
}
.intro nav ul li:nth-child(3) { 
    background-color: #ededed;
}
main {
    width: 100%;
    height: 2000px;
    background-color: pink;
    padding-top: 80px;
}

미디어쿼리 적용 (모바일 버전)

<header> intro안의 로고와 nav메뉴가 세로로 정렬되게 하기 위해 .intro {flex-direction: column;} 적용
intro안의 로고와 nav메뉴가 세로로 움직이면 헤더의 넓이를 가득 채워야 하기 때문에 각각 width:100% 적용
헤더가 fixed되지 않고 스크롤 내리면 위로 사라지게 하기 위해 postion:static으로 기본값으로 돌려주었다.
fixed header로 인해 main이 가려지는 현상이 없어지므로 main에 padding-bottom값을 없애주었다.

@media (min-width: 320px) and (max-width: 767px) {
    .intro {
        position: static;
        height: 160px;
        flex-direction: column;
    }
    .intro h1 {
        width: 100%;
    }
    .intro nav {
        width: 100%;
    }
    main {
        padding-top: 0;
    }
}

어려웠던 내용

사실 어제 위 요소가 3차원(fixed), 아래 요소가 2차원일 때 아래 요소가 위 요소 뒤로 들어가서 안 보이는 현상을 잘 이해하지 못했다.

해결방법

오늘 강의를 통해 문제점과 해결방안까지 알게 되었다.

소감

여러 가지 디바이스에 적절한 웹페이지를 만들 때 유용한 미디어쿼리에 대해 알아보았다. 요즘은 모바일에서 웹에 접속하는 경우도 굉장히 많기 때문에 반드시 알아둬야 할 기능이라고 생각한다.

Yesol Lee

문서화를 좋아하는 개발자

이전 포스트

0708 개발일지

다음 포스트