3.1 Device Toolbar 활용

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

3.1 Device Toolbar 활용

Chrome DevTools의 Device Toolbar는 웹 개발자가 다양한 화면 크기와 해상도에서 웹 사이트를 테스트할 수 있게 해주는 훌륭한 도구입니다. 이를 통해 개발자는 반응형 웹 디자인의 효과를 즉시 확인하고, 미세 조정을 할 수 있습니다. Device Toolbar의 활용법을 알아보겠습니다.

Device Toolbar 접근하기

Chrome 브라우저를 실행한 후, 원하는 웹 페이지를 엽니다.
F12 키를 누르거나 마우스 오른쪽 버튼을 클릭하여 '검사'를 선택하여 DevTools를 엽니다.
DevTools의 오른쪽 상단에 위치한 모바일 아이콘(태블릿과 스마트폰 아이콘)을 클릭합니다. 이를 통해 Device Toolbar가 활성화됩니다.

화면 크기 조정하기

Device Toolbar에서는 다양한 디바이스를 선택할 수 있습니다. 기본적으로는 여러 이미지를 갖춘 기기 목록이 제공되며, 이를 통해 스마트폰, 태블릿 및 데스크톱 뷰를 빠르게 전환할 수 있습니다.

디바이스 선택: 드롭다운 메뉴에서 테스트하고자 하는 디바이스를 선택합니다.
맞춤 설정: 사용자 정의의 화면 크기를 설정하고 싶다면, 'Edit'를 클릭하여 자신만의 해상도를 추가할 수 있습니다.

Responsive Design Mode

Device Toolbar에는 다양한 유용한 기능이 포함되어 있어, 다음과 같이 반응형 웹 디자인의 다양한 면을 평가할 수 있습니다.

Rotate(회전): 화면 회전 아이콘을 클릭하여 가로 및 세로 방향을 전환할 수 있습니다.
Network Throttling: 네트워크 속도 제어를 통해 다양한 네트워크 조건에서의 페이지 로드를 테스트할 수 있습니다.
Document Emulation: 화면을 가상 디바이스의 사양(디스플레이 DPI 등)에 맞게 설정하여 정확하게 테스트할 수 있습니다.

실습 예제

아래 예제는 Device Toolbar를 활용하는 방법을 보여줍니다.

HTML 파일을 다음과 같이 작성합니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Test</title>
</head>
<body>
    <header>
        <h1>기업 홈페이지</h1>
    </header>
    <main>
        <section>
            <h2>우리의 서비스</h2>
            <p>우리는 혁신적인 기술 솔루션을 제공합니다.</p>
        </section>
    </main>
</body>
</html>

CSS 파일(styles.css)을 작성하여 Flexbox로 레이아웃을 구성합니다:

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 1rem;
}

section {
    background-color: #f4f4f4;
    padding: 1rem;
    border-radius: 5px;
}

이제 Chrome DevTools의 Device Toolbar를 사용하여 다양한 디바이스에서 페이지가 어떻게 보이는지 확인하고 조정할 수 있습니다.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Test</title>
</head>
<body>
    <header>
        <h1>기업 홈페이지</h1>
    </header>
    <main>
        <section>
            <h2>우리의 서비스</h2>
            <p>우리는 혁신적인 기술 솔루션을 제공합니다.</p>
        </section>
    </main>
</body>
</html>

코드 css

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 1rem;
}

section {
    background-color: #f4f4f4;
    padding: 1rem;
    border-radius: 5px;
}

3.1 Device Toolbar 활용

3.1 Device Toolbar 활용

Device Toolbar 접근하기

화면 크기 조정하기

Responsive Design Mode

실습 예제

댓글 0