8일: 레이아웃, 메뉴만들기
2021.11.23.Tue.
✍ 복습
2단 레이아웃 만들기
html 코드
<div id="page"> <!--전체를 감싸는 div-->
<header>2단 레이아웃</header>
<nav>메인 메뉴</nav>
<div id="main">
<aside>부가 정보</aside>
<section>
내용 입력
<!--aside보다는 content가 커야한다.
section 대신에 article 사용해도됨-->
</section>
</div>
<footer>회사 정보</footer>
</div>
css 코드
aside {
width: 200px;
display: inline-block;
height: 400px;
background-color: plum;
}
section {
width: 800px;
display: inline-block;
min-height: 400px;
background-color: powderblue;
margin-left: -6px;
}
✔ section에는 height값을 줄 수 없다. min-height로 최소값(aside의 height값)만 부여
✔ display: inline-block; 적용하면 자동으로 여백이 생긴다.
→ section의 margin-left: -6px; 적용하여 여백을 없앤다.
Author And Source
이 문제에 관하여(8일: 레이아웃, 메뉴만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wontwopunch/7일-2단-레이아웃-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)