시멘틱

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

시멘틱 본문

Front-End (웹)/HTML

시멘틱

친절한개발초보자 2021. 8. 16. 00:18

728x90

시멘틱태그

웹사이트 개발자들이 id/class를 너무 개인의 취향에 따라서 작성을 하다 보니 여러 커뮤니케이션 및 유지보수 작업에 어려움이 있어서 이것들을 하나로 통합시키기 위해 만들어진 태그

#wrap
- 원래는 작성을 하지 않아도 큰 문제가 없다.
- 국내 개발자들이 html태그를 작성하기 전에 #wrap이라는 이름의 div태그를 하나 만들어서 그 안에다가 작성을 하자라고 약속을 해서 만들어 주는 느낌
header
- 웹사이트에서 로고 (사이트의 얼굴)
- 그 대상이 어떠한 대상인지 알 수 있게 해주는 가장 중요한 존재
- 보통의 header는 메뉴 부분과 동 떨어져 따로 존재하는 케이스이다.
nav
- 웹사이트 메뉴를 담당하고 있는 파트
main
- 어떠한 사이트 안에서 주된 내용들을 담당하고 있는 파트
- header, nav, footer를 제외한 모든 콘텐츠를 담아두는 그릇
aside
- 웹사이트 상에서 한쪽 측면에 약간의 광고를 넣어줄 때 사용하는 파트
- 광고가 안 들어가면 굳이 사용할 필요 없음
section
- 본문 전체 내용
article
- 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣어줄 때 사용하는 파트

footer
- 웹사이트의 가장 밑에 위치해있는 파트 웹사이트의 법적으로 공지해야 할 필수 조항들이 들어가 있는 아주 중요한 부분이다.
- 실제 운영 중인 웹사이트에는 법적으로 공지를 해야 할 몇 가지 조항이 있다.

<!DOCTYPE>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>시맨틱태그</title>
    <style>
        *{margin:0;padding:0}
        a{text-decoration:none;color:inherit;}
        li{list-style:none;}
        .clearfix:after{content:"";display:block;clear:both;}
        
        #wrap{width:1000px;margin:0 auto;}
        
        header{height:150px;background-color:#123456;}
        
        #logo{width:200px;height:50px;margin:0 auto;background-color:#987654;line-height:50px;font-size:12px;}
        
        nav{height:50px;background-color:orange;}
        
        nav li{width:184px;height:50px;float:left;margin-left:20px;background-color:pink;text-align:center;line-height:50px;}
        
        nav li:nth-child(1){margin-left:0px;}
        
        main{background-color:aqua;}
        
        aside{width:300px;height:500px;background-color:deeppink;float:left;
                text-align:center;line-height:500px;
                font-size:35px;font-weight:bold;}
        
        section{width:680px;background-color:violet;height:500px;float:left;margin-left:20px;}
        
        article{width:640px;height:100px;background-color:crimson;
                margin:20px auto;text-align:center;
                line-height:100px;font-size:30px;color:white;}
        
        footer{height:100px;background-color:black;
                text-align:center;line-height:100px;
                color:white;font-size:35px;}
    </style>
</head>
<body>
    <div id="wrap">
        <header>
            <div id="logo">
                <h1><a href="#">웹 사이트의 상단</a></h1>
            </div>
        </header>
        
        <nav>
            <ul class="clearfix">
                <li>웹</li>
                <li>사이트</li>
                <li>의</li>
                <li>메인</li>
                <li>메뉴들</li>
            </ul>
        </nav>
        
        <main class="clearfix">
            <aside>사이드 광고</aside>
            
            <section>
                <article>section</article>
                <article>본문전체</article>
                <article>article</article>
                <article>본문내용</article>
            </section>    
        </main>
        
        <footer>
            웹 사이트의 최하단부
        </footer>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>시맨틱태그 #2</title>
    <style>
        *{margin:0;padding:0;}
        a{text-decoration:none;color:inherit;}
        li{list-style:none;}
        .clearfix:after{content:"";display:block;clear:both;}
        
        #wrap{width:1000px;margin:0 auto;
              border-left:3px solid red;
              border-right:3px solid red;}
        
        header{height:150px;background-color:#123456;}
        
        #logo{width:200px;height:50px;margin:0 auto;
                background-color:#987654;
                text-align:center;line-height:50px;
                font-size:12px;}
        
        
        nav{height:50px;background-color:orange;}
        
        nav li{width:184px;height:50px;float:left;
                margin-left:20px;background-color:pink;
                text-align:center;line-height:50px;}
        
        nav li:nth-child(1){margin-left:0px;}
        
        /*총길이 - 여백갯수 * 임의의 여백사이즈 / 내용물의 갯수
        1000 -   (4   * 10~30 20) / 5
        
        여백갯수 = 내용물 - 1 만약 계산을 했을때 값이 딱 떨어지지 않으면
        여백사이즈 값을 바꿔서 딱 떨어질때 까지 계산을 다시 해줘야한다*/
        
        main{background-color:aqua;}
        
        aside{width:300px;height:500px;background-color:deeppink;float:left;
                text-align:center;line-height:500px;
                font-size:35px;font-weight:bold;}
        
        section{width:680px;background-color:violet;
                height:500px;float:left;margin-left:20px;}
        
        article{width:640px;height:100px;background-color:crimson;
                margin:20px auto;text-align:center;
                    line-height:100px;font-size:30px;color:white;}
        
        footer{height:100px;background-color:black;
              text-align:center;line-height:100px;
                color:white;font-size:35px;}
    </style>
</head>
<body>
   <div id="wrap">
       <header>
           <div id="logo">
               <h1><a href="#">웹 사이트의 상단</a></h1>
           </div>
       </header>
       
       <nav>
           <ul class="clearfix">
               <li>웹</li>
               <li>사이트</li>
               <li>의</li>
               <li>메인</li>
               <li>메뉴들</li>
           </ul>
       </nav>
       
       <main class="clearfix">
           <aside>사이드 광고</aside>
           
           <section>
               <article>section</article>
               <article>본문전체</article>
               <article>article</article>
               <article>본문내용</article>
           </section>
       </main>
       
       <footer>
           웹 사이트의 최하단부
       </footer>
   </div>

</body>
</html>

728x90