css수업-flex 4:holy grail layout
290
投稿した質問数 1
<!-- 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 이런식이 아닌 이유가 무엇인지 궁금합니다.
回答 1
0
강의 중에 말씀해 주신 내용인데,
naw, aside{ }는 content 아래 <nav>와 <aside> 2개의 내용을 묶어서 설정하는 부분이고 .content nav는 content 아래 nav 하나의 항목만 설정하는 부분이라 다릅니다.
border 선 겹침 현상
0
174
1
<style>에서 nav,aside
0
92
0
지금은 저 링크의 filter playground가 지원을안하는것 같아요~
0
90
1
flex - holy grail layout
0
366
1
Flex 4 : holy grail layout
0
401
1
쌤은 body에 높이값을 안주셨는데 어떻게 align-items가 적용이 되셨나요?
0
333
1
굳이 display:flex하고 flex-direction:column으로 한 이유가 궁금합니다!
0
305
0
p태그끼리 마진을 주지 않았는데 사이 간격
0
471
0
color:blue;
0
189
0
질문있습니다.
0
173
0
flex 구현이 안되요. 소스 그대로 복사 붙이기했는데도그래요
1
317
0
delay가 작동을 안하네요..
0
187
0
6:19 도움말키는법
0
209
0
속성복사 붙여넣기 기능 6:26
1
197
0
05:09
0
184
0
이고잉 선생님 강의 차이가 무엇인가요?
0
308
1
태그 단축키
0
298
0
이랑
5
380
4
마지막에 말씀하신 인포그래픽은....?
4
204
0
메타 적용 유무에 따른 가상 클래스 선택자
0
177
0
이고잉선생님
0
238
0
이고잉 선생님꼐
0
220
0
선생님께.
0
193
0
background-image: url('') 코드가 스타일시트 내에서 작동하지 않아요
0
134
0