semantic tag란?

• 목차
• semantic tag에 대해서...

semantic tag(시멘틱 태그)

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

 

시멘틱 태그의 종류

1. <header> : 웹페이지 최상단에 위치하는 태그입니다. 보통 로고와 메뉴 검색창이나 로그인 영역이 들어갑니다.

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

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

4. <main> : section영역들을 하나로 묶어주는 컨텐츠 전체 영역을 말합니다. 보통 헤더 아래쪽에 들어갑니다.

5. <artice> : article의 사전적 의미는 신문이나 잡지의 '기사'를 의미합니다. 이 태그는 웹 상의 실제 내용을 작성하는 것이며 블로그의 포스트나 웹사이트 이벤트의 내용과 같이 독립적인 웹 컨텐츠를 말합니다. article태그는 안에 section 태그를 넣을 수 있고 section태그도 artice 태그를 포함합니다.

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

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

 

css 자동으로 리셋 해주는 포로그램

https://cdnjs.com/libraries/meyer-reset

meyer-reset - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

css 초기화 적용 방법

링크 복사하셔서 css파일로 이동하셔서 컨트롤+v 하시면 됩니다!

---

 

html 입력 예시 header 부분

  <!-- header -->
      <header>
        <div class="header_con">
          <h1>Logo</h1>
          <!-- gnb메뉴영역 -->
          <nav id="gnb">
            <!-- gnb란 웹사이트 전체에 동일하게 적용되는 내비게이션 바입니다. -->
            <ul>
              <li>menu1</li>
              <li>menu2</li>
              <li>menu3</li>
            </ul>
          </nav>
        </div>
      </header>

css 입력 예시 header 부분

.container {
  width: 100%;
  height: auto;
}
header {
  width: 100%;
  height: 80px;
}

/* header 컨텐츠 영역 */
.header_con {
  width: 1320px;
  height: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
}
/* 로고 */
h1 {
  font-size: 24px;
  font-weight: bold;
  float: left;
  line-height: 67px; /* 로고 위치 조정 */
}

#gnb {
  width: 300px;
  height: 100px;
  float: right;
}
/* flex 는 자손만 적용이 가능합니다. */
#gnb > ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#gnb li {
  font-size: 18px;
  color: black;
}

#gnb li:hover {
  /* gnb 안에 있는 li에 마우스를 올리면
  마우스 포인터가 위치한 해당 li의 글자 컬러를
  바뀐다는 의미입니다. */
  color: thistle;
}

 

header css 적용해보기

헤더를 적용할 때 어디까지가 헤더의 영역인지 모르기에 배경색을 넣어둔 뒤 다 끝났으면 배경색을 없애줍니다.

---

 

css 첫번째 컨텐츠 영역 입력 예시

/* main 컨텐츠 영역 */
main {
  width: 1320px;
  overflow: hidden;
  background-color: thistle;
  margin: 0 auto;
}
/* 섹션 공통 속성 */
section {
  width: 100%;
  overflow: hidden;
  margin-bottom: 120px;
  padding: 50px 0;
  box-sizing: border-box;
  /* box가 이쁘게 들어갈라면  box-sizing: border-box; 사용하는게 좋습니다 */
}
section > h2 {

  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 80px;
}

section:first-of-type {
  background-color: pink;
}

.sec_con {
  width: 100%;
  height: auto;
  display: flex; /* 대부분 컨텐츠들은 display: flex;로 적용해주셔야 gap을 적용하실 수 있습니다.*/
  justify-content: center;
  column-gap: 40px;
}
.sec_con > article {
  width: 400px; 
  overflow: hidden;
  border: 1px solid #000;
  padding: 40px;
  box-sizing: border-box;
  border-radius: 20px;
} 

/* 중요. 형제 자손 후손의 개념을 알아야 합니다. */

첫번째 컨텐츠 css 적용해보기

---

 

html 두번째 컨텐츠 영역 입력 예시

 <!-- con2 -->
        <section>
          <h2>두번째 section 제목 부분</h2>
          <!-- 컨텐츠 -->
          <div class="con1">
            <!-- 이미지 영역 -->
            <div class="img_con">
              <img src="./img/style.jpg" alt="style" />
            </div>
            <!-- 텍스트 영역 -->
            <div class="text_con">
              <h3>img랑 관련된 텍스트</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
                Nemo aliquid architecto similique ratione<br />
                veritatis tempore, odit voluptate magni a voluptatem eum maxime necessitatibus animi nostrum obcaecati
                neque quae quibusdam. Praesentium?<br />
              </p>
            </div>
          </div>
        </section>

 

css 두번째 컨텐츠 영역 입력 예시

/* 두번째 섹션 */
.con1 {
  width: 100%;
  height: 500px;
  background-color: thistle;
}
.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: 290px;
}
.text_con h3 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}
.text_con p {
  font-size: 20px;
}

 

두번째 컨텐츠 css 적용해보기

---

 

html footer 작성 예시

 <!--footer -->
      <footer>&copy;COPYRIGHT</footer>

 

css footer 입력 예시

/* footer */
footer {
  width: 100%;
  border-top: 1px solid #aaa;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #eee;
}

 

footer css 적용해보기

---

 

전체적인 html 작성 예시

 <div class="container">
      <!-- header -->
      <header>
        <div class="header_con">
          <h1>Logo</h1>
          <!-- gnb메뉴영역 -->
          <nav id="gnb">
            <!-- gnb란 웹사이트 전체에 동일하게 적용되는 내비게이션 바입니다. -->
            <ul>
              <li>menu1</li>
              <li>menu2</li>
              <li>menu3</li>
            </ul>
          </nav>
        </div>
      </header>
      <!-- 컨텐츠 영역 -->
      <main>
        <!-- con1 -->
        <section>
          <h2>첫번째 section 제목부분</h2>
          <div class="sec_con">
            <article>
              <h2>Main-article-1</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem tempora qui iusto nisi consequuntur
                nulla animi. Libero aliquid fugit, quas hic dolorum eligendi id nobis error soluta! Sint, iusto?
              </p>
            </article>

            <article>
              <h2>Main-article-1</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem tempora qui iusto nisi consequuntur
                nulla animi. Libero aliquid fugit, quas hic dolorum eligendi id nobis error soluta! Sint, iusto?
              </p>
            </article>
          </div>
        </section>
        <!-- con2 -->
        <section>
          <h2>두번째 section 제목 부분</h2>
          <!-- 컨텐츠 -->
          <div class="con1">
            <!-- 이미지 영역 -->
            <div class="img_con">
              <img src="./img/style.jpg" alt="style" />
            </div>
            <!-- 텍스트 영역 -->
            <div class="text_con">
              <h3>img랑 관련된 텍스트</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
                Nemo aliquid architecto similique ratione<br />
                veritatis tempore, odit voluptate magni a voluptatem eum maxime necessitatibus animi nostrum obcaecati
                neque quae quibusdam. Praesentium?<br />
              </p>
            </div>
          </div>
        </section>
      </main>
      <!--footer -->
      <footer>&copy;COPYRIGHT</footer>
    </div>
  </body>
</html>

 

마무리 
오늘은
semantic tag(시멘틱 태그)에 대해 배워보았는데요!
이건 정말 꾸준한 연습이 필요할 것 같습니다:)

이번 한주도 정말 고생많으셨고
오늘 하루 남은 시간도 힘내시길 바랄게요!