HTML
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout Task</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
My exciting website!
</div>
<nav>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Blog</a>
</li>
<li>
<a href="">About us</a>
</li>
<li>
<a href="">Our history</a>
</li>
<li>
<a href="">Contacts</a>
</li>
</ul>
</nav>
<main class="grid">
<article>
<h1>
An Exciting Blog Post
</h1>
<img src="images/balloon-sq6.jpg"
alt="placeholder"
class="feature">
<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>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
avocado daikon
napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion
chickpea gram
corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot
watercress.
Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
</p>
<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. Sea lettuce lettuce water chestnut eggplant winter purslane
fennel azuki
bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.
</p>
<p>
Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery
bitterleaf wattle
seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout
chard.
</p>
</article>
<aside>
<h2>
Photography
</h2>
<ul class="photos">
<li>
<img src="images/balloon-sq1.jpg"
alt="placeholder">
</li>
<li>
<img src="images/balloon-sq2.jpg"
alt="placeholder">
</li>
<li>
<img src="images/balloon-sq3.jpg"
alt="placeholder">
</li>
<li>
<img src="images/balloon-sq4.jpg"
alt="placeholder">
</li>
<li>
<img src="images/balloon-sq5.jpg"
alt="placeholder">
</li>
</ul>
</aside>
</main>
</body>
</html>
CSS
body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
display: block;
}
.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
}
.grid {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
}
nav {
background-color: #000;
padding: .5em;
top: 0;
position: sticky;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
nav a {
color: #fff;
text-decoration: none;
padding: .5em 1em;
}
.photos {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1px;
grid-template-columns: 1fr 1fr;
}
.feature {
width: 200px;
float: left;
margin: 0 20px 20px 0;
}도움 받은 곳
https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982/2
깨달은 것
1. <nav>가 아닌 <ul>에 display: flex;를 설정해야 하는 이유
nav ul {
display: flex;
justify-content: space-between;
}
<nav>에 display: flex;를 설정할 경우
-> 플렉스 영역이 위와 같이 나타난다. <nav>의 직계 자식인 <ul>이 플렉스로 배치되는 것이다. 그러므로 <ul>에 flex 값을 부여해야 직계 자식인 <li>가 플렉스로 배치되므로 네비게이션 바와 같이 나타난다.
출처 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
'CSS > MDN 평가' 카테고리의 다른 글
| Typesetting a community school homepage (0) | 2022.11.13 |
|---|---|
| A cool-looking box (0) | 2022.11.10 |
| Creating fancy letterheaded paper (0) | 2022.11.09 |
| Fundamental CSS comprehension (0) | 2022.11.09 |