250918 코딩 기본(시멘틱구조)

[시멘틱 구조] https://codepen.io/phyno118/pen/bNEbzxE?editors=1100

시멘틱 구조

HTML)<!-- 웹 표준을 지켜서 마크업 하려면 시멘틱 구조를 지켜야한다.  -->

<header>header</header>
<main> 부모 , 조상 
  <section class="sc01"></section> 자식

      <div class="container">01</div>

-> div 쓰 .container 쓰고 tab

   </section>
  <section class="sc02"></section> 후손
  <section class="sc03"></section>
</main>
<footer>footer</footer>

 

CSS)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 {
  background-color: rgb(245, 193, 235);
  height: 300px;
}

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

 (여백)
  margin-right: auto;

.sc02 {
  background-color: rgb(240, 247, 173);
  height: 350px; 
}
.sc03 {
  background-color: rgb(247, 219, 173);
  height: 400px;
}

 

1. 페르소나가정

2. 인터뷰로 인해 불편한점, 개선한 점을 파악