09.18 시멘틱 구조

[시멘틱 구조]

https://codepen.io/meju-63/pen/OPMLdoP?editors=1100

시멘틱 구조

HTML

▶헤더 + 탭 + 중간 헤더 입력

▶메인 + 중간 엔터 + 섹션 복사

▶푸터 + 탭 + 중간 푸터 입력

▶메인 섹션 뒤에 class + = + " 입력 후 sc01~ 등 섹션 입력

<header>header</header>
<main>
  <section class="sc01"> </section>
  <section class="sc02"></section>
  <section class="sc03"></section>
</main>
<footer>footer</footer>

 

▶ sc01">< 중간에 div 입력 + container 입력 + 탭 + ><안에 01 입력

<header>header</header>
<main>
  <section class="sc01">
    <div class="container">01</div>
  </section>
  <section class="sc02"></section>
  <section class="sc03"></section>
</main>
<footer>footer</footer>

 

CSS

Ctrl+/ = 사용하지 않을 때 주석달기(메모용으로도 사용)

 

▶헤더 + { + 엔터하고 헤더 안 스타일링 정하기

-높이 height, 글자 색상 color , 글자 크기 font-size , 글자 정렬 text-align , 행간 크기 line-height , 글자 두께 font-weight

 

header {
  background-color: gray;
/*   width: 1920px; */
/* 높이 */
  height: 156px;
/* 글자 색상 */
  color:#fff;
/* 글자 크기 */
  font-size: 34px;
/* 글자 정렬 */
  text-align: center;
/* 행간 크기 */
  line-height: 156px;
/* 글자 두께 100~900 */
  font-weight: 700;
}

 

▶.sc01~03 + { + 엔터하고 섹션 안 스타일링 정하기

-컬러피커 사용해서 복붙

 

.sc01 {
  background-color: rgb(207, 253, 255);
  height: 300px;
}
.sc02 {
  background-color: rgb(207, 253, 255);
  height: 300px;
}
.sc03{
  background-color: rgb(207, 253, 255);
  height: 300px;
}

 

▶sc01번 닫는 } 뒤 엔터 + .sc01 + > + .container + { + 엔터

▶왼쪽 오른쪽 선 만들 때 보더-방향:픽셀 솔리드 #색

▶너비 width 1080px; 높이height 100%;

▶중앙정렬 마진-방향: 오토;

.sc01 > .container {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  width: 1080px;
  height: 100%;
/* 블럭 중앙 정렬 */
  margin-left: auto;
  margin-right auto;
}

 

★블럭은 맨 위의 너비를 가져옴 → 바디 너비

body {
background-color: gray;
}
div {
  background-color: red;
 display: block;
}