header : 제목부분
nav: 네비게이션 링크
article : 문서의 내용이나 블로그의 포스트
section : 문서의 섹션
aside : 사이드 바와 같이 옆에 위치하는 내용
footer : 마지막 부분
width : 30%;
//넓이 를 페이지 30%만큼 만들어줌
width : 30px;
//넓이 를 페이지 30픽셀만큼 만들어줌
height : 50%;
//높이를 화면 50%만큼 만들어줌
height : 50px;
//높이를 50픽셀만큼 만들어줌.
float : left;
//왼쪽에 배치
float: right;
//오른쪽에 배치
clear : both;
//한줄 전체를 차지한다.
예제 1)
/*
<header class="w-100 d-flex">
<div class="col-1 bg-primary"></div>
<div class="col-11 bg-danger"></div>
<div class="col-2 bg-secondary"></div>
</header>
<div class="w-100 bg-info d-flex "></div>
<section class="w-100 d-flex">
<aside class="w-50 bg-secondary"></aside>
<div class="w-50">
<article class="h-50 bg-success" ></article>
<article class="h-50 bg-primary"></article>
</div>
</section>
<footer class="w-100 bg-warning d-flex">
<div class="col-1 bg-primary"></div>
<div class="col-10 bg-danger"></div>
<div class="col-1 bg-primary"></div>
</footer>
</div> */여기서 헤더가 부모이고 div가 자식인데 부모는 값만 잡아주는것이고 보이는것은 결국에는 div인 자식이다.
쉽게쉽게 간다