https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills
Test your skills: Responsive web design and media queries - Learn web development | MDN
The aim of this skill test is to assess whether you understand how to use media queries and get you working with responsive web design with a practical task. Everything you need to know to complete this task is covered in the layout lessons in the CSS layo
developer.mozilla.org
문제 및 풀이
위의 두 사진처럼 모바일에 최적화 되어 있는 화면을 가장 마지막 사진처럼 데스크톱 버전으로 따로 css를 작성해서 바꾸는 것이 문제이다.
지금까지 배워왔던 방법에서는 총 네 가지의 반응형 화면을 구현하는 방법이 있었다.
첫 번째로는 flex box를 이용하는 방법이다. 자동으로 단에 맞추어서 크기가 바뀌므로 이 방법을 활용할 수 있다.
두 번째로는 그리드를 이용하는 방법이다. grid-template를 auto로 바꾸어서 알아서 정렬되도록 한다.
세 번째로는 다단 레이아웃을 이용하는 방법이다. 이도 마찬가지로 단이나 단의 크기 등만 설정하면 자동으로 정렬된다.
마지막으로는 가장 쉬운 방법이기도 한 미디어 쿼리 이용하는 방법이다. 데스크톱 크기 조건만 만족하면 다른 css style이 설정되도록 구현하면 된다.
문제를 살펴보면 총 추가하거나 고쳐야 할 부분이 세 부분이 있다.
- Link 1, 2, 3를 header 오른쪽에 위치시킨다.
- card 박스를 3단으로 정렬시킨다.
- aside를 오른쪽으로 오도록 바꾼다.
최대한 다양한 방법를 이용해서 풀어보겠다.
우선 미디어 쿼리를 이용하여 min-width를 800px로 설정한 후에 css를 따로 추가해주었다.
플렉스 박스를 이용하여 header 부분을 풀었다. header안의 제목과 link요소를 가로로 배열시키고 떨어뜨려 놓았다.
link 요소는 ul로 묶여 있었기에 이도 플렉스 박스로 display를 바꿔 주었다.
그리드를 이용하여 card 박스를 3열 2행으로 바꾸었다. 그리고 빈틈도 통일성 있게 하기 위해서 20px를 추가해주었다.
또한 마찬가지로 aside를 오른쪽으로 오게 하기 위해서 grid-template-column을 3fr 1fr로 설정하였다. 이는 3대1의 레이아웃을 가지게끔 만들어 준다.
다단 레이아웃은 쓰지 못하였다. a4용지를 반으로 접어 사용하여 글을 쓸 경우를 생각해보면 글이 왼쪽 하단에서 오른쪽 상단으로 잘려서 넘어가는 문제가 생긴다. 마찬가지로 다단 레이아웃도 같은 문제가 생겨서 이용하지 못하였다.
코드
rwd-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Responsive Web Design Task: Task</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
html {
font: 1.2em/1.4 Arial, Helvetica, sans-serif;
}
body {
padding: 0 0 1em;
}
header {
background-color: #333;
color: #fff;
border: 5px solid #000;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header a {
color: #fff;
text-decoration: none;
display: block;
padding: 0.5em 1em;
border-top: 1px solid #999;
}
header .title {
font-size: 150%;
font-style: italic;
font-weight: bold;
padding: 1em;
}
main {
padding: 0 1em;
}
.cards {
list-style: none;
margin: 0;
padding: 0;
}
.cards li {
border: 5px solid #000;
margin-bottom: 1em;
}
.cards h2 {
background-color: #333;
color: #fff;
margin: 0;
padding: 0.5em 1em;
}
.cards .inner {
padding: 0.5em 1em;
}
.sidebar {
background-color: #333;
border: 5px solid #000;
padding: 0.5em 1em;
color: #fff;
}
@media screen and (min-width: 600px) {
header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
header nav ul {
display: flex;
align-items: right;
}
header a {
display: inline;
text-decoration: none;
border: none;
}
main {
margin-top: 20px;
display: grid;
grid-template-columns: 3fr 1fr;
column-gap: 20px;
}
main .cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px;
}
}
</style>
</head>
<body>
<header>
<div class="title">My Website</div>
<nav>
<ul>
<li>
<a href="">Link 1</a>
</li>
<li>
<a href="">Link 2</a>
</li>
<li>
<a href="">Link 3</a>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h1>This is the main heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<ul class="cards">
<li>
<h2>Card One</h2>
<div class="inner">
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea
lettuce kohlrabi amaranth water spinach avocado.
</p>
</div>
</li>
<li>
<h2>Card Two</h2>
<div class="inner">
<p>
Daikon napa cabbage asparagus winter purslane kale. Celery
potato scallion desert raisin horseradish spinach carrot soko.
</p>
</div>
</li>
<li>
<h2>Card Three</h2>
<div class="inner">
<p>
Lotus root water spinach fennel kombu maize bamboo shoot green
bean swiss chard seakale pumpkin onion chickpea gram corn pea.
</p>
</div>
</li>
<li>
<h2>Card Four</h2>
<div class="inner">
<p>
Lotus root water spinach fennel kombu maize bamboo shoot green
bean swiss chard seakale pumpkin onion chickpea gram corn pea.
</p>
</div>
</li>
<li>
<h2>Card Five</h2>
<div class="inner">
<p>
Nori grape silver beet broccoli kombu beet greens fava bean
potato quandong celery. Bunya nuts black-eyed pea prairie turnip
leek lentil turnip greens parsnip.
</p>
</div>
</li>
</ul>
</article>
<aside class="sidebar">
<p>
Have you discovered all of the other excellent content on this
website?
</p>
</aside>
</main>
</body>
</html>
결과
서식을 좀 바꿔봤는데 손 봐야할 곳이 계속 있어요. 글 올리면서 조금씩 조금씩 더 수정해 나갈게요.
오류 있으면 댓글 달아주세요. 감사합니다!
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [Javascript] 과제: 변수 (1) | 2024.10.24 |
|---|---|
| [CSS] 과제: 레이아웃 (2) | 2024.10.24 |
| [CSS] 과제: 그리드 레이아웃 (3) | 2024.10.22 |
| [CSS] 과제: 커뮤니티 대학 홈페이지 레이아웃 (0) | 2024.10.21 |
| [CSS] 과제: 멋지게 보이는 박스 (0) | 2024.10.21 |
