시맨틱 태그

• 태그 이름 자체가 해당 요소이 의미와 역할을 명확히 나타내는 태그

• 기존 영역 분할에 주로 사용되던 div, span 등의 태그는
  태그 이름만 봤을 때 나눈다는 것 의외의 의미를 파악할 수 없음.
  -> 태그만 봤을 때 태그의 목적을 알 수 없어 id 또는 class를 반드시 추가해야 했다.

• 이런 문제점을 해결하고자 태그 이름만으로 어느정도 어떤 역할을 하는지 알 수 있고, 웹 접근성 (SEO : Search Engine Optimization)을 향상하는데
  도움이 되는 시맨틱 태그가 추가됨.

[제공하는 태그]

• header 태그 : 문서의 제목, 머리말 영역
• footer 태그 : 문서의 하단 부분, 꼬리말, 정보 작성 영역
• nav 태그 : 나침반 역할 (다른 페이지, 사이트 이동)의 링크 작성 영역
• main 태그 : 한 페이지에 한 번만 사용해야 하며, 문서의 핵심 콘텐츠를 감싸는 역할
• section 태그 : 구역 구문을 위한 영역
• article 태그 : 본문과 독립된 콘텐츠를 작성하는 영역
  (블로그 포스트, 뉴스 기사, 사용자 리뷰 등
  독립적으로 배포할 수 있는 콘텐츠를 감쌀 때)
• asie 태그 : 사이드바 (보통 양쪽), 광고 영역

<main>
    <header>
      <section>
        <!-- 클릭 시 메인페이지로 이동하는 로고-->
        <a href="#">
          <img src="../images/logo.jpg" id="home-logo">
        </a>
      </section>

      <!-- 검색창 부분 -->
      <section>
        <section class="search-area">
          <!-- form 내부 input 태그값을 서버 또는 페이지로 제출/전달-->
          <form action="#" name="search-form">
            <!-- fieldset: form 내부에서 input을 종류별로 묶는 용도로 자주 사용 -->
            <fieldset>
              <!-- autocomplete: HTML 기본 자동완성 사용 X -->
              <input type="search" id="query" name="query" autocomplete="off" placeholder="검색어를 입력해주세요.">
              <button id="search-btn" class="fa-solid fa-magnifying-glass"></button>
            </fieldset>
          </form>
        </section>
      </section>

      <!-- 빈 부분 -->
      <section></section>
    </header>

    <nav>
      <ul>
        <li><a href="#">공지사항</a></li>
        <li><a href="#">자유게시판</a></li>
        <li><a href="#">질문게시판</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">1:1문의</a></li>
      </ul>
    </nav>

    <section class="content">
      <!-- 메인 콘텐트 작성 영역 -->
      <section class="content-1">
        <div class="content-item">
          <div>
            <img src="/images/flowers/flower1.jpg">
          </div>
          <h1>
            <a href="#">[속보] 우리반 동영상 아무도 안봐...</a>
          </h1>
          <p>어느 작은 마을에 '엘렌'이라는 소녀가 살고 있었습니다.
            그녀는 항상 책을 끼고 다니며 새로운 이야기를 상상하는 것을 좋아했습니다.
            마을에는 작은 도서관이 하나 있었는데,
            그곳에서 그녀는 셀 수 없이 많은 시간을 보내곤 했습니다.
            엘렌이 가장 좋아하는 책은 고대 전설과 신화에 관한 이야기였습니다.
          </p>
        </div>
        <div class="content-item">
          <div>
            <img src="/images/flowers/flower2.jpg">
          </div>
          <h1>
            <a href="#">[속보] 우리반 동영상 아무도 안봐...</a>
          </h1>
          <p>
            샬라샬라
          </p>
        </div>
      </section>

      <!-- 아이디/비밀번호 로그인 영역 -->
      <section class="content-2">
        <form action="#" name="login-form">

          <fieldset id="id-pw-area">
            <section>
              <input type="text" name="inputId" placeholder="아이디">
              <input type="password" name="inputPw" placeholder="비밀번호">
            </section>
            <section>
              <button>로그인</button>
            </section>
          </fieldset>

          <label>
            <input type="checkbox" name="saveId">
            아이디 저장
          </label>

        </form>

        <!-- 회원가입 / ID/PW 찾기 영역 -->
        <section id="signup-find-area">
          <a href="#">회원가입</a>
          <span>|</span>
          <a href="#">ID/PW 찾기</a>
        </section>
      </section>
    </section>
  </main>

  <footer>
    <p>Copyright &copy; KH Information Educational Institute E-Class</p>

    <section>
      <a href="#">프로젝트 소개</a>
      <span>|</span>
      <a href="#">이용약관</a>
      <span>|</span>
      <a href="#">개인정보처리방침</a>
      <span>|</span>
      <a href="#">고객센터</a>
    </section>
  </footer>

# CSS
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  width: 1140px;
  margin: auto;
}

header {
  height: 200px;
  display: flex;
}

header > section:nth-of-type(1),
header > section:nth-of-type(3) {
  flex-basis: 15%;
}

header > section:nth-of-type(2) {
  flex-basis: 70%;

  display: flex;
  justify-content: center;
  align-items: center;
}

header > section:nth-of-type(1) {
  display: flex;
  justify-content: center;
  align-items: center;
}

#home-logo {
  width: 120px;
}

.search-area {
  width: 500px;
}

.search-area fieldset {
  border: 2px solid #455ba8;
  border-radius: 5px;
  padding : 2px;

  display: flex;
}

#query {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  outline: none;
  /* outline : input 태그에 포커싱되었을 때
  이를 표현하기 위한 바깥선 */

  flex-basis: 92%;
}

#search-btn {
  flex-basis: 8%;
  cursor: pointer;
  font-size: 20px;
  color: #455ba8;
  border: 0;
  background-color: transparent;
  /* trasparent 배경색 투명 */
}

nav {
  height: 50px;
  border-bottom: 2px solid black;

  position: sticky;
  top : 0;
  background-color: white;
  /* sticky : 특정 스크롤 위치에 도달했을 때
    요소가 고정되는 효과를 주는 데 사용함.
    top, bottom, left, right 속성이 필수로 같이
    작성되어야 함.
    -> 임계점 도달 시 어느 위치에 부착할지
       정해야 하기 때문!
  */
}

nav > ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

nav li {
  flex-basis: 150px;
}

nav a {
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: black;
  height: 100%;
  display: block;

  text-align: center;
  line-height: 50px;

  transition-duration: 0.2s;
  border-radius: 5px;
}

nav a:hover {
  background-color: #455ba8;
  color:white;
}

.content {
  display: flex;
}

.content-1 {
  flex-basis: 70%;
  display: flex;
  flex-direction: column;
  align-content: center;
  margin-top: 20px;
}

.content-item {
  width: 90%;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding : 10px;
}

.content-item > div {
  width: 100%;
  height: 200px;
}

.content-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 이미지가 부모태크(div)에 맞춰지면서
    비율을 유지하고, 넘치는 부분은 잘림.
    이미지가 자동으로 가운데로 정렬됨.
  */
}

.content-2 {
  flex-basis: 30%;
}

.content-item a {
  text-decoration: none;
  color: black;
}

.content-item p {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 최대 3줄까지 표시 */
  -webkit-box-orient: vertical; /* 텍스트 수직 방향 정렬 */
  overflow: hidden;
}

form[name="login-form"] {
  height: 130px;
  margin-top: 20px;

  display: flex;
  flex-direction: column;
}

#id-pw-area {
  flex-basis: 70%;
  display: flex;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
}

#id-pw-area > section:first-child {
  flex-basis: 75%;

  display: flex;
  flex-direction: column;
}

#id-pw-area > section:last-child {
  flex-basis: 25%;
}

#id-pw-area input {
  padding: 5px;
  flex-basis: 50%;
  outline: none;
  border: none;
  border-right: 1px solid #ddd;
}

#id-pw-area input:first-child {
  border-bottom: 1px solid #ddd;
}

#id-pw-area input:focus {
  border: 2px solid #455ba8;
}

#id-pw-area button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

#id-pw-area button:hover {
  background-color: #455ba8;
  color: white;
}

form[name="login-form"] > label {
  flex-basis: 30%;
  margin-top: 10px;
  font-size: 14px;
}

#signup-find-area {
  margin-left: 10px;
}

#signup-find-area > a {
  color: black;
  text-decoration: none;
  font-size: 14px;
}

#signup-find-area > span {
  padding: 0 10px;
}

footer {
  height: 200px;
  background-color: #a3add342;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer > p {
  font-weight: bold;
}

footer > section > * {
  font-size: 14px;
}

footer a {
  color: black;
  text-decoration: none;
}

footer span {
  padding: 0 10px;
}

/*
미디어 쿼리 (Media Query)

@media
미디어 쿼리를 선언하는 키워드로,
특정 조건(화면 크기)에 따라 CSS 스타일을 적용할 때 사용

all : 모든 미디어 유형
생략가능, 보통 screen을 많이 사용함.

(max-width: 767px) : 반응형 모바일 기준
화면 너비가 767px 이하일 때 스타일을 적용함.
스마트폰, 작은 태블릿 등 작은 화면에서 적용하는 크기.
*/

@media all and (max-width: 767px) {
  main {
    width: 100vw;
    /* vw : viewport width의 약자
      현재 뷰포트의 100%만큼 너비 차지 */
  }

  header {
    display: none;
  }

  nav {
    width: 100%;
    border-bottom: none;
    height: auto;
  }

  nav > ul {
    flex-direction: column;
  }

  nav li {
    flex-basis: auto;
    border-bottom: 1px solid #ddd;
  }

  .content {
    flex-direction: column;
  }

  .content-2 {
    padding: 20px;
  }

  footer {
    width: 100vw;
  }

  footer p,
  footer > section > * {
    font-size: 12px;
  }

}

/* 태블릿 : 768px ~ 1023px 범위*/
@media all and (min-width: 768px) and (max-width: 1023px) {

}

/* PC : 너비가 1024px 이상일 때 */
@media (min-width: 1024px) {

}

맥도날드 (내가 만든 거..)

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>포트폴리오</title>
  <link rel="stylesheet" href="css/포트폴리오.css">
  <script src="https://kit.fontawesome.com/fd5d7c20c3.js" crossorigin="anonymous"></script>
</head>

<body>


  <main>
    <header>
      <!-- 로고 -->
      <section>
        <a href="#">
          <img src="https://www.mcdonalds.co.kr/kor/images/common/logo.png" id="logo" width="100px">
        </a>
      </section>

      <!-- nav바 -->
      <div id="nav">
        <nav>
          <ul>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">What's New</a></li>
            <li><a href="#">Story</a></li>
          </ul>
        </nav>
      </div>

      <div id="color">
        <section>
          <button class="color">임차문의</button>
          <button class="color">RECRUIT</button>
          <button class="color">ENG</button>
        </section>
      </div>

      <div id="dod">
        <section>
          <a href="#">
            <img src="https://www.mcdonalds.co.kr/kor/images/common/ico_search.png">
          </a>
        </section>
      </div>

    </header>

    <body>
      <section id="banner">
        <a href="#">
          <img src="https://www.mcdonalds.co.kr/upload/main/banner/1723560482807.jpg">
        </a>
        <button class="pre"><i class="fa-solid fa-angle-left"></i></button>
        <button class="next"><i class="fa-solid fa-angle-right"></i></button>
      </section>

      <div id="live">
        <h1>McDonald's LIVE</h1>
      </div>

      <section class="content">
        <section class="content-1">
          <div class="menu-top">
            <div class="menu">
              <a href="#">
                <div>
                  <img src="https://www.mcdonalds.co.kr/upload/main/card/1740558822317.jpg">
                </div>
                <pre>
  투움바 소스의 크리미한 매콤함<br>
  NEW 맥스파이시 상하이 & 슈비 버거!

                </pre>
              </a>
            </div>
            <div class="menu">
              <a href="#">
                <div>
                  <img src="https://www.mcdonalds.co.kr/upload/main/card/1742460815455.jpg">
                </div>
                <pre>
  우바산 홍차와 과일의 만남!<br>
  향긋 달콤한 아이스티

                </pre>
              </a>
            </div>
            <div class="menu">
              <a href="#">
                <div>
                  <img src="https://www.mcdonalds.co.kr/upload/main/card/1742203610283.jpg">
                </div>
                <pre>
  새롭게 만나는 아침의 맛!<br>
  투움바 치킨 치즈 머핀

                </pre>
              </a>
            </div>
          </div>
          <div class="menu-bottom">
            <div class="menu">
              <a href="#">
                <div>
                  <img src="https://www.mcdonalds.co.kr/upload/main/card/1742339876736.jpg">
                </div>
                <pre>
  바삭 달콤하구마! 고구마 후라이 출시<br>


                </pre>
              </a>
            </div>
            <div class="menu">
              <a href="#">
                <div>
                  <img src="https://www.mcdonalds.co.kr/upload/main/card/1740559337369.jpg">
                </div>
                <pre>
  달콤한 메이플 시럽이 콕!<br>
  아침엔 맥그리들

                </pre>
              </a>
            </div>
            <div class="menu">
              <a href="#">
                <div>
                  <img src="https://www.mcdonalds.co.kr/upload/main/card/1742341990671.jpg">
                </div>
                <pre>
  맥도날드 대표 간식을 1000원부터!<br>
  해피스낵

                </pre>
              </a>
            </div>
          </div>
        </section>

        <section class="content-2">
          <div class="plus">
            <a href="#">
              <img src="https://www.mcdonalds.co.kr/kor/images/common/btn_more.png">
            </a>
          </div>
        </section>
      </section>
    </body>


    <footer>
      <div class="footer-container">
        <div class="l">
          <ul>
            <li class="yellow"><a href="#">개인정보 처리방침</a></li>
            <li><a href="#">사이트맵</a></li>
            <li><a href="#">임차문의</a></li>
            <li><a href="#">고객문의</a></li>
            <li><a href="#">인재채용</a></li>
          </ul>
        </div>

        <div class="m">
          <ul>
            <li>한국맥도날드(유)</li>
            <li>대표이사:김기원</li>
            <li>사업자등록번호:101-81-26409</li>
            <li>전화주문:1600-5252</li>
            <li>COPYRIGHT © 2019 ALL RIGHTS RESERVED BY McDonald's.</li>
          </ul>
        </div>

        <div class="r">
          <div class="icon">
            <a href="#"><i class="fa-brands fa-facebook fa-2xl"></i></a>
            <a href="#"><i class="fa-brands fa-instagram fa-2xl"></i></a>
            <a href="#"><i class="fa-brands fa-youtube fa-2xl"></i></a>
            <a href="#"><i class="fa-solid fa-message"></i></a></li>
            <a href="#"><img src="https://www.mcdonalds.co.kr/kor/images/common/web_accessibility.png"></img></a>
          </div>

          <div class="lsms">
            <img src="https://www.mcdonalds.co.kr/kor/images/common/web_isms.png">
            <p>
              [인증범위 : 대외서비스(홈페이지, 맥딜리버리, 채용, VOC,<br>
              쿠폰앱)(심사받지 않은 물리적 인프라 영역 제외)]<br>
              <br>
              [유효기간 : 2024. 08. 07. ~ 2025. 08. 06.]
            </p>
          </div>

        </div>
      </div>
    </footer>
  </main>
</body>

</html>

# CSS
header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}

nav>ul {
  margin: 0;
  padding: 50px;
  list-style: none;
  display: flex;
}

nav li {
  margin: 0 15px;
  padding-left: 50px;
}

nav a {
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: black;
  height: 100%;
  display: block;

  text-align: center;
  line-height: 0px;
}

#color {
  display: flex;
}

.color {
  cursor: pointer;
}

.color:nth-child(1) {
  background-color: red;
  color: white;
  font-weight: bold;
  padding: 4.5px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 30px;
  border-color: transparent;
}

.color:nth-child(2) {
  background-color: tomato;
  color: white;
  font-weight: bold;
  padding: 6px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 30px;
  border-color: transparent;
}

.color:nth-child(3) {
  background-color: green;
  color: white;
  font-weight: bold;
  padding: 6px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 30px;
  border-color: transparent;
}

#dod {
  padding-left: 20px;
  cursor: pointer;
  color: #455ba8;
  background-color: transparent;
  border-color: transparent;
  /* trasparent 배경색 투명 */
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#banner {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 100%;
}

#banner img {
  width: 100%;
}

.pre,
.next {
  width: 90px;
  height: 90px;
  align-self: center;
  position: absolute;
  z-index: 1;
  align-items: center;
  justify-content: flex-start;
  background-color: white;
  opacity: 0.5;
  cursor: pointer;
}

.pre {
  left: 0;

}

.next {
  right: 0;
  /* transform: rotate(180deg); */
}

#live>h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 900px;
  font-weight: bold;
  flex-basis: 30%;
}

.menu-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10%;
  gap: 30px;
}

.menu>img {
  max-width: max-content;
}

.menu-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10%;
  gap: 30px;
  margin-top: 30px;
}

.menu {
  box-shadow: 5px 6px 6px #ddd;
  border-radius: 20px;
  overflow: hidden;
}


.content-1 pre {
  font-size: 16px;
  font-weight: bold;
  color: black;
}

.content-1 a {
  text-decoration: none;
}

/*---------*/

.plus {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  margin-top: 70px;
  margin-bottom: 50px;
}

/* ------- */
footer {
  background-color: rgb(29, 29, 29);
  color: white;
  padding: 30px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* ------- */
.footer-container {
  display: flex;
  justify-content: space-between;

  margin: 0 auto;
  padding: 0 20px;
  flex-wrap: wrap;
}

/* ------- */
.l {
  display: flex;

  align-items: flex-start;
}

.l ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.l a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

footer .yellow>a {
  color: yellow;
}

footer ul {
  list-style: none;
}

/* ------- */
footer .m {
  display: flex;
  color: grey;
  font-weight: bold;
  font-size: 12px;
  margin-left: 50px;
  padding-top: 10px;
}

/* ------- */
footer .r {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 230px;
}

.icon a {
  padding: 10px;
  color: white;
  font-size: 24px;
}

/* ------- */
.icon img {
  width: 50px;
  flex-direction: row;
}

/* ------- */
.lsms {
  display: flex;
  align-items: center;
  margin: 30px;
}

.lsms img {
  margin-bottom: 15px;
  width: 80px;
}

.lsms p {
  color: white;
  font-size: 10px;
  padding-top: 20px;
}