본문 바로가기
Information

[수업 다섯번째 시간] 웹린이의 다섯번째 html 수업 시간

2play 2023. 9. 5. 21:53
반응형

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>한진</title>
    <style>
        /*
            CSS Reset(초기화) :
            태그들이 가지고 있는 기본 속성과 값을
            코딩하기 편한 값으로 변경
        */
        body, h1, h2, h3, div, p, ul, li, dl, dt, dd {
            margin:0;
            padding:0
        }
        body {
            font-family: "맑은 고딕", "나눔고딕", sans-serif;
            font-size:14px;
            line-height: 1.5
        }
        ul, li {
            list-style:none
        }
        a {
            text-decoration: none;
            /* color:#000 */
            color:inherit
        }
        address{
            font-style:normal
        }

        /* hide */
        .screen_out {
            overflow: hidden;
            position: absolute;
            width: 0;
            height: 0;
            line-height: 0;
            text-indent: -9999px
        }

        .blind {
            position: absolute;
            clip: rect(0 0 0 0);
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden
        }

        .hide{
            position:absolute;
            left:-9999px;
            top:-9999px
        }

       
        /* header */
        .header{
            width:1000px;
            height:160px;
            /*
            블럭 요소 가운데 정렬 - margin:auto
            인라인 요소 가운데 정렬 - text-align:center
            */
            margin:auto; /* margin: 0 auto */
            border-top: 1px solid #fff
        }

        /* logo */
        .logo{
            /* 박스 크기 지정 */
            width:184px;
            height:39px;

            margin:27px auto 21px;
        }
        .logo a{
            display:block;
            /*
                IR(Image Replacement) :  
                텍스트를 이미지로 표현
            */
            /* 박스 크기 지정 */
            width:184px;
            height:39px;
            /* 배경 이미지 적용 */
            background:url(images/logo.jpg) no-repeat;
            /* 글자 감추기 */
            text-indent:-9999px
        }
       
        /* gnb */
        .gnb{
            border-top:1px solid #cbcbcb
        }
        .gnb > ul {
            display:flex;
            justify-content:space-between
        }
        .menu1 > a{
                width:119px; height:72px;
                background:url(images/menu_01.jpg) no-repeat;
                text-indent:-9999px;
                display:block;
        }
        .menu2 > a{
            width:118px; height:72px;
            background:url(images/menu_02.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
        }
        .menu3 > a{
            width:117px; height:72px;
            background:url(images/menu_03.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
        }
        .menu4 > a{
            width:120px; height:72px;
            background:url(images/menu_04.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
        }
        .menu5 > a{
            width:99px; height:72px;
            background:url(images/menu_05.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
        }
        .menu6 > a{
            width:120px; height:72px;
            background:url(images/menu_06.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
        }

        /* top menu */
        .top_menu{
            position:relative
        }
        .top_menu ul{
            position:absolute;
            right:0;
            top:-100px;
            display:flex
        }
        .site_map:after {
            content:"|";
            margin:0 10px
        }


        /* main */
        .main{
            width:1000px;
            margin:auto
        }

        /* main image */
        .main_image{
            margin-bottom: 60px
        }
        .main_image1{
            width:1000px; height:519px;
            background:url(images/main_01.jpg) no-repeat;
            text-indent:-9999px;
        }

        /* glp */
        .glp{
            margin-bottom:60px
        }
        .glp h2{
            width:550px; height:24px;
            background:url(images/glp_title.jpg) no-repeat;
            text-indent:-9999px;
            margin:0 auto 10px
        }
        .glp_txt1{
            text-align:center;
            margin-bottom:25px
        }
        .glp_txt2{
            text-align: center;
            margin-bottom:45px
        }
        .glp_down{
            text-indent:-9999px;
            display:inline-block;

            /* width:8px; height:7px;
            background:url(images/glp_down.jpg) no-repeat;
            position:relative;top:8px */

            width:10px; height:18px;
            background:url(images/glp_down.jpg) 0 6px no-repeat;
        }

        .glp_cont{
            display:flex
        }
        .glp_cont1{
            width:321px;
            height:400px;
            border-right: 1px solid #999;
            border-bottom: 1px solid #999;
            background:url(images/glp_image1.jpg) no-repeat;
           
            /* padding-top:10px;
            padding-right:20px;
            padding-bottom:30px;
            padding-left:40px */

            /* padding : 10px 20px 30px 40px */

            /* padding: 10px 20px 30px (left : same right)
            = padding: 10px 20px 30px 20px */

            /* padding: 10px 20px (bottom: same top) (left: same right)
            = padding: 10px 20px 10px 20px */
           
            padding:260px 20px 20px;
            box-sizing:border-box;
            position:relative
        }
        .glp_cont1 dt{
            font-weight:bold;
            font-size:15px;
            margin-bottom:20px
        }
        .glp_cont1 a{
            width:69px; height:24px;
            background:url(images/glp_more.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            position:absolute;
            left:20px;
            top:360px
        }

        .glp_cont2{
            width:356px;
            height:400px;
            border-right:1px solid #cbcbcb;
            border-bottom:1px solid #cbcbcb;
            background:url(images/glp_image2.jpg) no-repeat center top;
            padding:260px 20px 20px;
            box-sizing:border-box;
            position:relative
        }
        .glp_cont2 dt{
            font-weight:bold;
            font-size:15px;
            margin-bottom:20px
        }
        .glp_cont2 a{
            width:69px; height:24px;
            background:url(images/glp_more.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            position:absolute;
            left:20px;
            top:360px
        }

        .glp_cont3{
            width:323px;
            height:400px;
            border-bottom:1px solid #cbcbcb;
            background:url(images/glp_image3.jpg) no-repeat right top;
            padding:260px 20px 20px;
            box-sizing:border-box;
            position:relative
        }
        .glp_cont3 dt{
            font-weight:bold;
            font-size:15px;
            margin-bottom:20px
        }
        .glp_cont3 a{
            width:69px; height:24px;
            background:url(images/glp_more.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            position:absolute;
            left:20px;
            top:360px
        }

        /* biz */
        .biz{
            margin-bottom:60px;
            position:relative;
            background:url(images/ob_bg.jpg) repeat-x bottom;

            /* background-color: ;
            background-image: ;
            background-repeat: ;
            background-position: ;
            background-attachment: ;

            background : color image repeat position attachment -- 순서, 개수 무관 */
        }
        .biz h2{
            width:227px; height:18px;
            background:url(images/ob_title.jpg) no-repeat;
            text-indent:-9999px;
            margin:0 auto 10px
        }
        .biz p{
            text-align: center;
            margin-bottom:45px
        }
        .biz_cont1{
            width:760px;
            height:510px;
            background:url(images/ob_image1.jpg) no-repeat;
            padding:450px 20px 20px;
            box-sizing:border-box;
            margin:auto;
            color:#fff;
            display:flex;
            position:relative
        }
        .biz_cont1 dt{
            font-weight: bold;
            font-size: 15px;
            width:140px
        }
        .biz_cont1 a{
            width:92px; height:31px;
            background:url(images/ob_more.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            position:absolute;
            left:650px;
            top:380px
        }
        .biz_prev{
            width:22px; height:42px;
            background:url(images/ob_prev.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            position:absolute;
            left:50px;
            top:250px
        }
        .biz_next{
            width:22px; height:42px;
            background:url(images/ob_next.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            position:absolute;
            right:50px;
            top:250px
        }

        /* news */
        .news{
            width:856px;
            margin:0 auto 60px
        }
        .news h2{
            width:211px; height:18px;
            background:url(images/news_title.jpg) no-repeat;
            text-indent:-9999px;
            margin:0 auto 10px
        }
        .news p{
            text-align: center;
            margin-bottom:45px
        }
        .news_cont{
            display:flex;
            justify-content: space-between;
            margin-bottom:40px
        }
        .news_cont dl{
            position: relative
        }
        .news_cont span{
            position:absolute;
            left:15px;
            top:330px
        }
        .news_cont1{
            width:276px;
            height:370px;
            border:1px solid #cbcbcb;
            background:url(images/news_image1.jpg) no-repeat;
            padding:220px 15px 15px;
            box-sizing:border-box
        }
        .news_cont1 dt{
            font-weight: bold;
            font-size:15px;
            margin-bottom:20px;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }
        .news_cont2{
            width:276px;
            height:370px;
            border:1px solid #cbcbcb;
            background:url(images/news_image2.jpg) no-repeat;
            padding:220px 15px 15px;
            box-sizing:border-box
        }
        .news_cont3{
            width:276px;
            height:370px;
            border:1px solid #cbcbcb;
            background:url(images/news_image3.jpg) no-repeat;
            padding:220px 15px 15px;
            box-sizing:border-box
        }
        .news a{
            width:116px; height:39px;
            background:url(images/news_more.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            margin:auto
        }

        /* ci */
        .ci{
            background:#eee;
            padding:30px 0;
            margin-bottom:40px;
            display: flex;
            justify-content: space-evenly;
        }
        .ci p{
            width:400px; height:38px;
            background:url(images/ci_text.jpg) no-repeat;
            text-indent:-9999px;
        }
        .ci a{
            width:178px; height:38px;
            background:url(images/ci_view.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
        }

        /* main cont bottom */
        .main_cont_bottom{
            /* width:960px; margin:auto */
            width:1000px;
            padding:0 20px;
            box-sizing: border-box;

            display:flex;
            justify-content: space-between;

            margin-bottom:60px
        }

        /* video */
        .video{
            position:relative
        }
        .video h2{
            width:144px; height:14px;
            background:url(images/video_title.jpg) no-repeat;
            text-indent:-9999px;
            margin:4px 0 20px 10px
        }
        .video p{
            width:471px; height:270px;
            background:url(images/video_image.jpg) no-repeat;
            text-indent:-9999px;
        }
        .video a{
            width:22px; height:22px;
            background:url(images/video_more.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            position: absolute;
            left:165px;
            top:0
        }

        /* social */
        .social{
            position:relative
        }
        .social h2{
            width:193px; height:14px;
            background:url(images/social_title.jpg) no-repeat;
            text-indent:-9999px;
            margin:4px 0 20px 10px
        }
        .social p{
            width:472px; height:270px;
            background:url(images/social_image.jpg) no-repeat;
            text-indent:-9999px;
        }
        .social a{
            width:22px; height:22px;
            background:url(images/video_more.jpg) no-repeat;
            text-indent:-9999px;
            display:block;
            position: absolute;
            left:225px;
            top:0
        }

        /* footer */
        .footer{
            background:#626262;
            width:1000px;
            margin:auto;
            position:relative;
            color:#fff
        }
        /* .footer a{
            color:#fff
        } */
        .footer h2{
            width:142px; height:29px;
            background:url(images/logo_footer.jpg) no-repeat;
            text-indent:-9999px;
            position:absolute;
            left:20px;
            top:90px
        }

        /* term */
        .term{
            width:520px;
            height:60px;
        }
        .term ul{
            height:60px;
            display:flex;
            justify-content: space-evenly;
            align-items: center
        }

        /* family site */
        .family_site{
            width:200px;
            height:30px;
            border:1px solid #cecece;
            box-sizing: border-box;
            position:absolute;
            right:20px;
            top:15px
        }
        .family_site h3 a{
            display:block;
            font-weight: normal;
            font-size:14px;
            padding:6px 10px;
            background:url(images/family_down.jpg) no-repeat 165px center
        }
        .family_site ul{
            width:200px;
            border:1px solid #cecece;
            box-sizing: border-box;
            background:#626262;
            position:absolute;
            left:-1px;
            top:-125px;
           
        }
        .family_site ul a{
            display: block;
            padding:5px
        }
        .family_site ul a:hover{
            background:#000;
            color:#ff0
        }

        .footer_cont{
            height:120px;
            border-top:1px solid #cecece;
            padding:20px 0 0 260px;
            box-sizing: border-box;
        }
        .footer_txt1{
            display: flex;
            height:24px
        }
        .footer_txt1 address:after{
            content:"/";
            margin:0 10px
        }

        .footer_txt2{
            display: flex;
            height:24px
        }
        .ceo:after{
            content:"/";
            margin:0 10px
        }
    </style>
</head>
<body>
    <header id="header" class="header">
        <h1 class="logo">
            <!-- <img src="images/logo.jpg" alt="한진"> -->
            <a href="#none">한진</a>
        </h1>

        <nav class="gnb">
            <h2 class="screen_out">주요 메뉴</h2>
            <ul>
                <li class="menu1">
                    <a href="#none">한진소개</a>
                    <!-- <ul>
                        <li><a href="#none">하위메뉴</a></li>
                        <li><a href="#none">하위메뉴</a></li>
                        <li><a href="#none">하위메뉴</a></li>
                        <li><a href="#none">하위메뉴</a></li>
                    </ul> -->
                </li>
                <li class="menu2"><a href="#none">홍보센터</a></li>
                <li class="menu3"><a href="#none">사업영역</a></li>
                <li class="menu4"><a href="#none">투자정보</a></li>
                <li class="menu5"><a href="#none">한진인</a></li>
                <li class="menu6"><a href="#none">고객지원</a></li>
            </ul>
        </nav>
       
        <div class="top_menu">
            <h2 class="blind">유틸 메뉴</h2>
            <ul>
                <li class="site_map"><a href="#none">SITE MAP</a></li>
                <li><a href="#none">ENGLISH</a></li>
            </ul>
        </div>
    </header>
       
    <main id="main" class="main">
        <section class="main_image">
            <h2 class="hide">주요 소식</h2>
            <ul>
                <li class="main_image1"><a href="#none">내용</a></li>
                <!-- <li class="main_image2"><a href="#none">내용</a></li>
                <li class="main_image3"><a href="#none">내용</a></li> -->
            </ul>
        </section>
           
        <section class="glp">
            <h2>세계적 물류 기업, 한진</h2>

            <p class="glp_txt1">
                땀과 희망을 전해왔습니다.<br>
                전세계에 행복과 미래를 전달합니다.
            </p>

            <p class="glp_txt2"><span class="hide">주가 정보 </span>25,250  <span class="glp_down">하락 </span>200 (0.79%)</p>

            <!-- <h3>한진택배</h3>
            <p>차별화된 고품격 택배서비스를 제공합니다.</p>
            <a href="#">더보기</a> -->

            <div class="glp_cont">
                <dl class="glp_cont1">
                    <dt>한진택배</dt>
                    <dd>
                        차별화된 고품격 택배서비스를 제공합니다.
                        <a href="#none">더보기</a>
                    </dd>
                </dl>

                <dl class="glp_cont2">
                    <dt>한진렌터카</dt>
                    <dd>
                        제주 렌터카, 장기 렌탈,<br>
                        최상의 한진렌터카 서비스를 만나보세요.
                        <a href="#none">더보기</a>
                    </dd>
                </dl>
                   
                <dl class="glp_cont3">
                    <dt>이하넥스</dt>
                    <dd>
                        해외직구 상품구매에서 배송대행<br>
                        서비스까지 편리하게 이용하세요.
                        <a href="#none">더보기</a>
                    </dd>
                </dl>
            </div>
        </section>
       
        <section class="biz">
            <h2>사업 소개</h2>

            <p>글로벌 종합물류기업으로서 최상의 물류서비스를 제공합니다.</p>

            <dl class="biz_cont1">
                <dt>물류사업</dt>
                <dd>
                    한진은 70여년간 쌓아온 전문 물류 노하우를 바탕으로 3PL, 육운사업, 항만물류사업, 해운사업, 중량물사업, 보관물류 사업 등을 수행하고 있습니다.
                    <a href="#none">자세히보기</a>
                </dd>
            </dl>

            <!-- <dl class="biz_cont2">
                <dt>물류사업</dt>
                <dd>
                    한진은 70여년간 쌓아온 전문 물류 노하우를 바탕으로 3PL, 육운사업, 항만물류사업, 해운사업, 중량물사업, 보관물류 사업 등을 수행하고 있습니다.
                    <a href="#none">자세히보기</a>
                </dd>
            </dl>

            <dl class="biz_cont3">
                <dt>물류사업</dt>
                <dd>
                    한진은 70여년간 쌓아온 전문 물류 노하우를 바탕으로 3PL, 육운사업, 항만물류사업, 해운사업, 중량물사업, 보관물류 사업 등을 수행하고 있습니다.
                    <a href="#none">자세히보기</a>
                </dd>
            </dl>-->

            <a href="#none" class="biz_prev">이전</a>
            <a href="#none" class="biz_next">다음</a>
        </section>
       
        <section class="news">
            <h2>한진 뉴스</h2>
           
            <p>한진의 새로운 소식들을 만나보실 수 있습니다.</p>

            <div class="news_cont">
                <dl class="news_cont1">
                    <dt>한진, 2018 평창 동계 올림픽을 지원합니다.</dt>
                    <dd>
                        2월 9일 'Passion. Connected.'라는 슬로건과 함께 시작을 알린...
                        <span>2018.02.27</span>
                    </dd>
                </dl>

                <dl class="news_cont2">
                    <dt>한진, 2018 평창 동계 올림픽을 지원합니다.</dt>
                    <dd>
                        2월 9일 'Passion. Connected.'라는 슬로건과 함께 시작을 알린...
                        <span>2018.02.27</span>
                    </dd>
                </dl>

                <dl class="news_cont3">
                    <dt>한진, 2018 평창 동계 올림픽을 지원합니다.</dt>
                    <dd>
                        2월 9일 'Passion. Connected.'라는 슬로건과 함께 시작을 알린...
                        <span>2018.02.27</span>
                    </dd>
                </dl>
            </div>
           
            <a href="#none">더보기</a>
        </section>

        <div class="ci">
            <p>한진 CI 소개</p>
            <a href="#none">자세히보기</a>
        </div>

        <div class="main_cont_bottom">
            <section class="video">
                <h2>한진 비디오</h2>
                <p>한진 영상</p>
                <a href="#none">더보기</a>
            </section>

            <section class="social">
                <h2>사회 공헌</h2>
                <p>국립현충원 봉사활동</p>
                <a href="#none">더보기</a>
            </section>
        </div>
    </main>

    <footer id="footer" class="footer">
        <h2>사이트 이용안내</h2>

        <div class="term">
            <h3 class="hide">약관 및 정책</h3>
            <ul>
                <li><a href="#none">사이트 이용약관</a></li>
                <li><a href="#none">개인정보 처리방침</a></li>
                <li><a href="#none">이메일 무단수집거부</a></li>
                <li><a href="#none">Global Home</a></li>
            </ul>
        </div>
       
        <div class="family_site">
            <h3><a href="#none">그룹사 바로가기</a></h3>
            <ul>
                <li><a href="#none">그룹사 1</a></li>
                <li><a href="#none">그룹사 2</a></li>
                <li><a href="#none">그룹사 3</a></li>
                <li><a href="#none">그룹사 4</a></li>
            </ul>
        </div>            
       
        <div class="footer_cont">
            <div class="footer_txt1">
                <address>주소 : 서울시 중구 남대문로 63 (주)한진</address>
                <p>대표번호 : 02-728-5114</p>
            </div>
            <div class="footer_txt2">
                <p class="ceo">대표이사 사장 : 서용원</p>
                <p>사업자등록번호 : 201-81-02823</p>
            </div>
            <p>Copyright HANJIN All right reserved</p>
        </div>
    </footer>
</body>
</html>

 

 

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

 

[콘텐트 블럭]


**레이아웃 기본 구조**

  1. header
   - 상단 로고, GNB, topmenu 등
   - 주로 페이지 안내(이동)에 관한 요소 포함
   - GNB : Global Navigation Bar -> 메뉴바

   2. main (content)
    - 페이지별 내용, LNB, 배너, 게시판, 퀵메뉴 등
    - 해당 페이지에서 나타내고자 하는 내용 작성
    - LNB : Local Navigation Bar -> 사이드 메뉴(메인메뉴or 대메뉴에 포함된 하위메뉴or소메뉴의 집합)

    3. footer
     - 회사나 사이트에 대한 정보
     - 각종 연락처, 관리자 정보, 약관 및 정책, 카피라이트 등

     4. 기타 요소(SNS, 검색, 관련사이트 등)는 필요한 위치에 추가

↓

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레이아웃 기본 구조</title>
</head>
<body>
    <div id="header">     ---> 사람과 장치가 인식할 수 있도록 <header>
        - 상단 로고, GNB, topmenu


    </div>


    <div id="main">     ---> 사람과 장치가 인식할 수 있도록 <main>
        - 페이지별 내용, LNB, 배너, 게시판, 퀵메뉴 등


    </div>

    <div id="footer">     ---> 사람과 장치가 인식할 수 있도록 <footer>
        - 회사나 사이트에 대한 정보
        - 각종 연락처, 관리자 정보, 약관 및 정책, 카피라이트 등


    </div>
</body>
</html>
 
 
 
의미가 있는 태그 -> Semantic Elements 

 

 

**HTML5에서 추가된 Section 요소**

1. header
 - 페이지의 독자적 요소
 - 로고 내비게이션
 - 반드시 하나 이상의 제목(h1~h6) 명시
 - section, header, footer 태그 사용 불가
 - 요소의 위치 무관

 2. article
  - 페이지 내용상 별개의 내용을 구성할 때 사용되는 섹션

  3. section 
   - 단락, 이미지, 제목 등의 콘텐트를 묶어 더 큰 논리적 단위 형성
   - body 안에 들어갈 수 있는 모든 요소 사용 (header, footer 포함)
   - class 나 id 속성을 사용해 섹션에 대한 특정정보(메타데이터) 추가

   4. main
   - 문서의 주요 내용 정의(요소 내부의 내용은 문서에 고유)
   - 문서 내에 한 번만 사용
   - article, aside, header, nav, footer 요소의 하위에 사용 불가
   - 사이드 콘텐트, 저작권 정보, 사이트 로고, 검색 양식 등 모든 내용 포함 가능

       ㄴ>(main을 담을 수 있는 태그는 div밖에 없음)

   5. nav
    - 페이지 링크, 내부 링크가 있는 섹션 마크업 시 사용
    - 메인 네비게이션이 있는 섹션에만 적용

    6. article
     - 본문 내용에 대한 추가적인 설명, 부수적 콘텐트 표시에 사용하는 태그

     7. footer
      - 저작권, 개인정보 보호정책, 연락처 등의 콘텐트
      - 문서상의 위치 무관

 

ㄴ> 예전에는 div 태그를 사용해서 나타냈지만 HTML5에선 영역에 맞게 태그가 생겨 이렇게 사용한다.

 

(통상적으로 address는 한 번만 사용함)

728x90
반응형
저작자표시

'Information' 카테고리의 다른 글

[수업 다섯번째 시간] 웹린이의 다섯번째 html 수업 시간  (0) 2023.09.12
[수업 여섯번째 시간] 웹린이의 여섯번째 html 수업 시간  (0) 2023.09.08
[수업 네번째 시간] 웹린이의 네번째 html 수업 시간  (0) 2023.08.30
[수업 세번째 시간] 웹린이의 두번째 html 수업 시간  (0) 2023.08.25
[수업 두번째 시간] 웹린이의 두번째 html 수업 시간  (0) 2023.08.24

'Information' Related Articles

티스토리툴바