📝 시맨틱(Semantic, 의미) 태그

(의미있는 태그)

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

이런 문제점을 해결하고자 태그 이름만으로 어느 정도 어떤 역할을 하는지 알 수 있고 추가적으로 웹 접근성 향상에 도움이 되는 시맨틱 태그가 추가됨 (HTML5)

📌 제공하는 태그

💡 header 태그

문서의 제목, 머리말 영역

💡 footer 태그

문서의 하단 부분, 꼬리말, 정보 작성 영역

💡 nav 태그

나침반 역할(다른 페이지, 사이트 이동)의 링크 작성 영역

💡 main 태그

현재 문서의 주된 콘텐츠 작성 영역

💡 section 태그

구역 구분을 위한 영역

💡 article(작은 토막) 태그

본문과 독립된 콘텐츠를 작성하는 영역

💡 aside 태그

사이드바(보통 양쪽), 광고 영역

✏️ 코드로 살펴보기

기존 웹 문서 구조에서 사용한 html, css 코드를 시맨틱 태그 형태로 바꾸어 보자.

• html

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

            <!-- header의 두번째 자식 div -->
            <section>
                <article class="search-area">

                    <!-- form 내부 input 태그 값을 서버 또는 페이지로 전달 -->
                    <form action="#" name="search form">

                        <!-- fieldset : form 내부에서 input을 종류별로 묶는 용도로 많이 사용 -->
                        <fieldset>

                            <input type="search" id="query" name="query" 
                                placeholder="검색어를 입력해주세요" autocomplete="off">

                            <!-- 검색 버튼 -->
                            <button type="submit" id="search-btn" class="fa-solid fa-magnifying-glass"></button>
                            
                        </fieldset>

                    </form>
                </article>
            </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"></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>
        
                    <!-- 회원가입, ID/PW 찾기 영역 -->
                    <article id="signup-find-area">
                        <a href="#">회원가입</a>
                        <span>|</span>
                        <a href="#">ID/PW 찾기</a>
                    </article>
                </form>
            </section>
        </section>
    </main>
    <footer>
        <p>Copyright &copy; KH Information Educational Institute M-Class</p>

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

</body>
</html>

• css

*{box-sizing: border-box;}

/* div{ border : 1px solid black;} */

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

/* header */
header{
    height:200px;
    display: flex; /* flex 형식으로 변경 -> 내부 요소를 유연하게 정렬/배치 */
}

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

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

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

/* 로고 */

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

#home-logo{
    width :120px;
    height :auto;
    /* 이미지는 width/height 둘 중 하나만 지정 시
    나머지 방향의 크기가 같은 비율로 지정됨
    */
}

/* 검색 스타일 */
header > section:nth-last-of-type(2){
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-area{
    width:500px;
}

.search-area fieldset{
    padding : 2px;
    margin : 0;
    border:2px solid #455ba8;
    border-radius: 5px;
    display: flex;
}

#query{
    padding : 10px;
    font-size:18px;
    font-weight: bold;

    width :92%;

    border : none;

    /* outline : input 태그에 포커스가 맞춰 졌을 때
                이를 표현하기 위한 바깥선
                (테두리 보다 바깥에 존재) */
    outline:0; /* none도 가능 */

}

#search-btn{
    width :8%;
    cursor : pointer;
    font-size : 1.2em;
    color : #455ba8;
    background-color: white;
    border :0; /* none도 가능 */
}

/* nav */
nav{
    height: 50px;

    position: sticky;
    /* sticky : 스크롤이 임계점(최상단)에 도달했을 때 내 화면에 스티커 처럼 붙임
        - 평소에는 static(기본 position 상태)
          임계점 도달 시 fixed(화면 특정 위치에 고정)

        * top, bottom, left, right 속성이 필수로 작성되어야 함
        -> 임계점 도달 시 어느 위치에 부착할지를 지정해야되기 때문에
    */

    top : 0; /* 최상단에 붙임 */

    background-color: white;
    border-bottom:2px solid black;
}

 /* nav 스타일 */
 nav > ul{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
}

nav li{
    flex : 0 1 150px;
    /* 팽창, 수축, 기본값 */
}

nav a{
    display: block;
    height: 100%;

    text-align: center;

    /* 글자를 세로 가운델 지정하는 방법 */
    /* line-height: 48px; */
    padding : 11px 0;

    /* 밑줄 없애기 */
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color :black;

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

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

/* content */
.content{
    height : 800px;
    display: flex;
}

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

/* login 스타일 */
form[name="login-form"]{
    height: 140px;
    padding: 10px;

    display: flex;

    /* 중심 축을 세로로 변경 */
    flex-direction: column;

    /* 중심 축에 대한 정렬(세로 가운데 정렬) */
    justify-content: center;
}

#id-pw-area{
    margin: 0;
    padding: 0;

    border: 1px solid #ddd;

    display: flex;
}

/* id/pw input이 담긴 영역 */
#id-pw-area > section:first-child{
    flex-basis: 75%;
    display: flex;
    flex-direction: column;
}

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

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

#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%;
    border: 0;   
    background-color: white;
    cursor: pointer;
}

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

/* 회원가입, ID/PW 찾기 영역 */
#signup-find-area{
    margin-top: 10px;
    padding-left: 5px;
}

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

#signup-find-area > span{
    padding: 0 10px;
        /* 상하, 좌우 */
}

/* footer */
footer{
    height :200px;
    background-color: #a3add342;
}

/* footer 스타일 */
footer{
    background-color: #a3add342;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer p{
    font-weight: bold;
}

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

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

footer span{
    padding: 0 10px;
}