상세 컨텐츠

본문 제목

레이아웃 만들기

html, css

by bumychoi 2025. 4. 6. 04:15

본문

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        rel="stylesheet">
    <title>lyout 실습</title>
    <style>
        /*  https://meyerweb.com/eric/tools/css/reset/ 초기화코드드 */

        #title {
            font-family: "Roboto", cursive;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            list-style: none;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        img {
            border: 0;
        }

        .item{
            overflow: hidden;
            padding: 10px;
            border: 1px solid black;
            border-top:none;
        }

        .thumbanil{
            float: left;
        }

        .description{
            float: left;
            margin-left: 10px;
        }

        .description > strong{
            display: block;
            width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 푸퍼영역 */
        #main_footer{
            /* 중앙정렬 */
            width: 960px;
            margin: 0 auto;
            margin-bottom: 10px;

            /* 테두리 */
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid black;

            /* 글자 정렬 */
            text-align: center;
        }

        #main_header {
            /* 중앙정렬 */
            width: 960px;
            margin: 0 auto;
            /* 절대좌표 */
            height: 160px;
            position: relative;
        }

        #main_header>#title {
            position: absolute;
            left: 20px;
            top: 30px;
        }

        #main_header>#main_gnb {
            position: absolute;
            right: 0;
            top: 0
        }

        #main_header>#main_lnb {
            position: absolute;
            right: 0;
            bottom: 10px;
        }

        #main_gnb>ul {
            overflow: hidden;
        }

        #main_gnb>ul>li {
            float: left;
        }

        #main_gnb>ul>li>a {
            display: block;
            padding: 2px 10px;
            border: 1px solid black;
        }

        #main_gnb>ul>li>a:hover {
            background-color: black;
            color: bisque;
        }

        #main_gnb>ul>li:first-child>a {
            border-radius: 10px 0 0 10px;
        }

        #main_gnb>ul>li:last-child>a {
            border-radius: 0 10px 10px 0;
        }

        #main_lnb>ul {
            overflow: hidden;
        }

        #main_lnb>ul>li {
            float: left;
        }

        #main_lnb>ul>li>a {
            display: block;
            padding: 10px 20px;
            border: 1px solid black;

        }

        #main_lnb>ul>li>a:hover {
            background: black;
            color: white;
        }

        #main_lnb>ul>li:first-child>a {
            border-radius: 10px 0 0 10px;
        }

        #main_lnb>ul>li:last-child>a {
            border-radius: 0 10px 10px 0;
        }

        #content {
            /* 중앙정렬 */
            width: 960px;
            margin: 0 auto;
            /* 수평 레이아웃 구성성 */
            overflow: hidden;
        }

        #content>#main_section {
            width: 750px;
            float: left;
        }

        #content>#main_aside {
            width: 200px;
            float: right;
        }

        #main_section>article.main_article {
            margin-bottom: 10px;
            padding: 20px;
            border: 1px solid black;
        }

        /* 첫 번째 탭 */
        input:nth-of-type(1) {
            display: none;
        }

        input:nth-of-type(1)~div:nth-of-type(1) {
            display: none;
        }

        input:nth-of-type(1):checked~div:nth-of-type(1) {
            display: block;
        }

        /* 두 번째 탭 */
        input:nth-of-type(2) {
            display: none;
        }

        input:nth-of-type(2)~div:nth-of-type(2) {
            display: none;
        }

        input:nth-of-type(2):checked~div:nth-of-type(2) {
            display: block;
        }

        /*탭 모양 구성  */
        section.buttons {
            overflow: hidden;
        }

        section.buttons>label {
            /* 수평정렬 */
            display: block;
            float: left;
            /* 크기 및 글자 위치 지정 */
            width: 100px;
            height: 30px;
            text-align: center;
            /* 테두리 지정 */
            box-sizing: border-box;
            border: 1px solid black;
            /* 색상 지정 */
            background: black;
            color: white;
        }

        input:nth-of-type(1):checked~section.buttons>label:nth-of-type(1) {
            background-color: white;
            color: black;
        }

        input:nth-of-type(2):checked~section.buttons>label:nth-of-type(2) {
            background-color: white;
            color: black;
        }
    </style>
</head>

<body>
    <header id="main_header">
        <nav id="title">
            <h1>Rint Development</h1>
            <h2>HTML5 + CSS Basic</h2>
        </nav>
        <nav id="main_gnb">
            <ul>
                <li><a href="#">wab</a></li>
                <li><a href="#">Mobile</a></li>
                <li><a href="#">Game</a></li>
                <li><a href="#">Simulation</a></li>
                <li><a href="#">date</a></li>
            </ul>
        </nav>
        <nav id="main_lnb">
            <ul>
                <li><a href="#">HTML5</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JaveScript</a></li>
                <li><a href="#">JQery</a></li>
                <li><a href="#">Node.js</a></li>
            </ul>
        </nav>
    </header>
    <div id="content">
        <section id="main_section">
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam nihil nostrum a quidem quaerat
                    debitis
                    ut, exercitationem tempore, voluptatem doloribus, dicta magnam magni. Laudantium quis, doloremque
                    accusantium ullam saepe accusamus.</p>
            </article>
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam nihil nostrum a quidem quaerat
                    debitis
                    ut, exercitationem tempore, voluptatem doloribus, dicta magnam magni. Laudantium quis, doloremque
                    accusantium ullam saepe accusamus.</p>
            </article>
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam nihil nostrum a quidem quaerat
                    debitis
                    ut, exercitationem tempore, voluptatem doloribus, dicta magnam magni. Laudantium quis, doloremque
                    accusantium ullam saepe accusamus.</p>
            </article>
        </section>

        <aside id="main_aside">
            <input id="first" type="radio" name="tab" checked="checked" />
            <input id="second" type="radio" name="tab" />
            <section class="buttons">
                <label for="first">First</label>
                <label for="second">second</label>
            </section>
            <div class="tab_item">
                <ul>
                    <li class="item">
                        <a href="#">
                            <div class="thumbnail">
                                <img src="http://placehod.it/45x45"/>
                            </div>
                            <div class="description">
                                <strong>HTML5 Canvas</strong><p>2025-05-15</p>
                            </div>    
                        </a>
                    </li>
                    <li class="item">
                        <a href="#">
                            <div class="thumbnail">
                                <img src="http://placehod.it/45x45"/>
                            </div>
                            <div class="description">
                                <strong>HTML5 Audio</strong><p>2025-05-15</p>
                            </div>    
                        </a>
                    </li>
                    <li class="item">
                        <a href="#">
                            <div class="thumbnail">
                                <img src="http://placehod.it/45x45"/>
                            </div>
                            <div class="description">
                                <strong>HTML5  Video</strong><p>2025-05-15</p>
                            </div>    
                        </a>
                    </li>
                    <li class="item">
                        <a href="#">
                            <div class="thumbnail">
                                <img src="http://placehod.it/45x45"/>
                            </div>
                            <div class="description">
                                <strong>HTML5 Semantic Web</strong><p>2025-05-15</p>
                            </div>    
                        </a>
                    </li>
                   
                </ul>
            </div>
            <div class="tab_item">
                <ul>
                    <li><a href="#">CSS3 Transition</a></li>
                    <li><a href="#">CSS3 Animation</a></li>
                    <li><a href="#">CSS3 border</a></li>
                    <li><a href="#">CSS3 BOX</a></li>
                </ul>
            </div>
        </aside>
    </div>
    <footer id="main_footer">
        <h3> HTML5 + CSS3 Basic</h3>
        <address>Website Layout Basic</address>
    </footer>
</body>

</html>

 

 

서울디지털 대학 AI소프트웨어공학과   김성진교수님  HTMl 강의중 실습 

'html, css' 카테고리의 다른 글

sdu 웹표준 수업 실습중  (0) 2025.04.11
GPT가 만든 레이아웃  (0) 2025.04.06
사이트 생성  (0) 2024.03.25
CRUD INDEX.HTML  (0) 2023.08.15
http://myweb.eba-fjff22mv.ap-northeast-2.elasticbeanstalk.com/  (0) 2023.04.21

관련글 더보기

티스토리툴바