-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
css수업-flex 4:holy grail layout
21.07.22 19:07 작성 조회수 126
0
<!-- section의 세 개: navigation, main, aside를 수평으로 layout -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
display:flex;
flex-direction:column;
}
header{
border-bottom:1px solid gray;
}
footer{
border-top:1px solid gray;
}
.content{
display:flex;
}
.content nav{
border-right:1px solid gray;
}
.content aside{
border-left:1px solid gray;
}
nav,aside{
fles-basis:150px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1></header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
생활코딩은 일반인을 위한 코딩 수업
</main>
<aside> /* 광고부분 */
AD
</aside></section>
<footer>
<a href="https://opentutorials.org/course/1">홈페이지</a></footer>
</div>
</body>
</html>
Q.
nav,aside{}부분은 왜 .content nav 이런식이 아닌 이유가 무엇인지 궁금합니다.
답변을 작성해보세요.
0
김재균
2022.01.25
강의 중에 말씀해 주신 내용인데,
naw, aside{ }는 content 아래 <nav>와 <aside> 2개의 내용을 묶어서 설정하는 부분이고 .content nav는 content 아래 nav 하나의 항목만 설정하는 부분이라 다릅니다.
답변 1