[html] 웹 표준 태그 semantic 태그 / 기초 구조 실습

div class 단축 단어  -> .클래스 이름

---

< semantic 시멘틱태그 >

웹 표준 태그로 구조를 쉽게 파악하고 큰 영역들을 잡는 구조 태그. ( 시멘트같은 역할 )
검색 엔진 같은 프로그램에서 자료를 검색해 정보의 의미를 분석할 수 있게 도와주는 지능형 웹태그.
또한 시각 장애인들을 위한 웹 표준 방식.

[시멘틱태그의 종류] 

:단독태그가 아니라서 뒤에 닫아줘야한다. 
---------------------------
1. <header> : 웹 페이지 최상단에 위치하는 태그. 보통 로고와 메뉴 검색창이나 로그인 영역이 들어감. 

2. <nav> : 헤더에 들어가는 GNB영역과 같이 메뉴 부분을 표현할 때 사용함. 웹 페이지에 여러 개의 메뉴 영역이 들어갈 경우 #id 선택자로 구분함.
헤더뿐만 아니라 컨텐츠 영역 또는 푸터 부분에도 자유롭게 몇 개든 들어갈 수 있다.

해더 안에 있는 일차메뉴를 gnb라고 한다  왼쪽에 있는 세로 메뉴는 lnb라 한다. 

3. <section> : 컨텐츠 영역을 포함하는 태그. 해당 컨텐츠를 주제별로 묶을 때 사용하며 section태그 내부에는 h1~h6 제목 태그가 포함됨. 
section안에는 또 다른 section태그나 article 태그를 넣을 수 있다. 

4. <main> : section 영역들을 하나로 묶어주는 컨텐츠 전체 영역을 말함. 보통 header의 아래 쪽에 들어감. 
    
5. <article> : article의 사전적 의미는 신문이나 잡지의 '기사'를 의미함. 이 태그는 웹 상의 실제 내용을 작성하는 것이며

블로그의 포스트나 웹사이트의 이벤트 내용과 같이 독립적인 웹 컨텐츠를 말한다.

article 태그는 안에 section 태그를 넣을 수 있고 section태그도 article 태그를 포함할 수 있다.

6. <aside> : 웹 문서에서 왼쪽이나 오른쪽 또는 하단에 들어가는 사이드 바 영역을 말함. 이 태그는 필수 요소는 아니며, 보통 광고나 일반적인 링크모음처럼 문서의 메인내용에 영향을 미치지않는 내용을 넣을 때 사용함.

7. <footer> : 웹 문서의 가장 하단에 위치하며 보통 저작권 표시나 본문 내용과는 상관 없지만 중요한 내용이 들어감. 예를 들어 로그인이나 판매가 가능한 사이트는 이용약관, 개인정보 처리방침, 사업자 등록번호, 통신판매 신고업 번호, 고객센터, 청소년 보호 정책 등의 내용이 들어감.
&copy; 가 카피라이트 기호 코딩 코드이다. 

카피라이트 표시

 

 

<header>

 <h1>로고</h1>

  <nav id="gnb">

     <ul>

            <li> </li>

      </ul>

  </nav>

 </header>

------------------------------------------

<main>

  <section>

     <article>

     </article>

 </section>

</main>

<div class="container"></div>
<!-- header -->
<header>
    <h1>Logo</h1>
    <!-- gnb 메뉴 영역 -->
    <nav id="gnb">
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
        </ul>
    </nav>
</header>
<!-- 컨텐츠 영역 -->
 <main>
    <!-- con1 -->
  <section>
    <h2>첫번째 section 제목 부분</h2>
    <article>
        <h2>Main-article-1</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, tempore
            saepe eius eaque suscipit odit consequatur deserunt a quaerat illum natus id mollitia cum
            voluptatum blanditiis dolores quisquam aspernatur alias!</p>
    </article>
    <article>
        <h2>Main-article-1</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, tempore
            saepe eius eaque suscipit odit consequatur deserunt a quaerat illum natus id mollitia cum
            voluptatum blanditiis dolores quisquam aspernatur alias!</p>
    </article>
    </section>
    <!-- con2 -->
  <section>
    <h2>두번째 section 제목 부분</h2>
     <!-- 컨텐츠1 -->
     <div class="con1">
        <h3>맛있는 간식</h3>
        <p>다양한 간식을 만나보세요</p>
     </div>
     <!-- 컨텐츠2 -->
     <div class="con2">
        <h3>맛있는 간식</h3>
        <p>다양한 간식을 만나보세요</p>
     </div>
     <!-- 컨텐츠3 -->
     <div class="con3">
        <h3>맛있는 간식</h3>
        <p>다양한 간식을 만나보세요</p>
    </div>
  </section>
 
 </main>
<!-- footer -->
 <footer>&copy; COPYRIGHT</footer>
</body>
</html>

 

 

---

<실습) 웹페이지 구조 만들어보기>

 

★ height 높이값 대신

1.over flow: hidden; 쓰면  컨텐츠에 맞춰 알아서 늘어나도록 설정. 애매한 위치에 있을 때 숨겨버릴 수도 있다. 딱 컨텐츠가 있을 때만 쓴다. 

2. height: auto; 자동이기때문에 글자를 인식못하는 경우가 있다. body는 height:auto;쓰는 경우가 많다. 

 

[1. 헤더 부분 실습 ]

html

*헤더 안에 로고와 메뉴 영역을 정렬할려면 로고+메뉴 영역을 묶어주는 엄마박스가 있어야한다. 

h1과 nav를 묶어주는 div를 하나 만들어줘야한다. 

헤더영역을 가로 먼저 브라우저 100%로 채워주고 높이를 잡아준다. 

h1과 nav를 묶어주는 div인 'header_con'을 컨텐츠 영역(1320)만큼 설정해준다.

그리고 height는 위에 헤더 height를 80px로 해놨으니 100%로 적용해준다. 

로고와 nav(#gnb) 글자박스를 float 속성으로 정렬해준다.

로고는  float: left; 로 메뉴들은( nav(#gnb)) float:right;로 배치해줌

ul li들은 justify-content: space-between;으로 정렬해줌

 

 작업이 끝나면 백그라운드 컬러는 없애준다. 그리고 보통 헤더에 보더를 적용한다

헤더 아래만 보더를 적용해주던지 디자인을 적용해준다. 

-------------------------------

[2. 섹션-1 ]

html

 

/* main 컨텐츠 영역 */

main {

  width: 1320px;

  overflow: hidden; /*높이값이 얼마나 될지 모르니 컨텐츠에 맞춰 알아서 늘어나라*/

  /* background-color: lightblue; */

  margin: 0 auto;

}

/* section 공통 속성 */

section {

  width: 100%;

  overflow: hidden;

  margin-bottom: 120px;

  padding: 50px 0;

  box-sizing: border-box;

}

section > h2 {

  font-size: 32px;

  font-weight: bold;

  text-align: center;

  margin-bottom: 80px;

}

.sec_con {

  width: 100%;

  height: auto;

  display: flex;

  justify-content: center;

  column-gap: 40px;

}

.sec_con > article {

  width: 400px;

  overflow: hidden;

  border: 1px solid #5f5f5f;

  padding: 40px;

  box-sizing: border-box;

  border-radius: 20px;

}

article h2 {

  font-size: 24px;

  font-weight: bold;

  color: darkgreen;

  margin-bottom: 20px;

}

article p {

  line-height: 1.4; /*1은 기본값 1.4배만큼의 줄간격*/

}

가운데로 여백두고 정렬할려면 justify-content: center;을 주고 

column-gap으로 가운데 여백을 설정해준다. 

+ line-height: 1 에서 1은 기본값을 말한다.  line-height: 1.4라고하면 1.4배만큼의 줄간격을 말한다. 

-------------------------------

[3. 섹션-2 ]

html

/* 두번째 섹션 */

.con1 {

  width: 100%;

  height: 500px;

  /* background-color: lavender; */

}

.img_con {

  width: 40%;

  height: 100%;

  overflow: hidden; /*높이넓이와 같이 overflow:hidden;을 적용하면 넘치는 부분을 숨겨준다.*/

  float: left;

}

.img_con > img {

  width: 100%;

}

.text_con {

  width: 50%;

  height: auto; /*글자라 높이가 얼만지 모르니깐 오토*/

  float: left;

  margin-left: 40px;

  margin-top: 280px;

}

.text_con h3 {

  color: rgb(122, 54, 41);

  font-weight: bold;

  font-size: 30px;

  margin-bottom: 20px;

}

.text_con p {

  font-size: 20px;

  line-height: 1.6; /*1은 기본값 1.6배만큼의 줄간격*/

}

제목 아래 이미지 영역과 글자 부분은 정렬하기 편하게 각각 div 로 묶어준다. 

그 뒤 float:left;로 정렬해주는데 일단 이미지영역에 float:left;가 걸려있어야함으로 이미지 영역과 글자 부분 영역 둘다에 float:left;를 적용해줘야한다. 

 

-이미지영역에는 일단 너비와 높이를 설정해준 뒤 overflow:hidden;으로 넘치는 부분을 숨겨준다.

*overflow:hidden;의 두가지 역할*

1. 높이가 지정되어있을 때 overflow:hidden;을 명령하면 높이 이외의 넘치는 부분을 숨겨준다.

2. 높이대신에 overflow:hidden; 을 적용하면 컨텐츠에 맞춰서 높이를 늘려준다. 

 

-------------------------------

[4. 푸터 ]