ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 연습 예제
      HTML 2023. 10. 20. 17:30
      연습 문제 1

      <!DOCTYPE html>
<html>
<head>
    <title>연습 1</title>
    <style>
        #top {
            background: green;
            margin: 0 auto;
            height: 50px;
            color: white;
            font-size: 24px;
            line-height: 50px; 
            position: relative;
        }

        #middle {
            overflow: hidden;
        }

        #left {

            width: 230px; height: 250px;
            border: 1px solid red;
            float: left;
            
        }

        .lside_1 {
            font-size: 22px;
            font-weight: bold;
            margin: 0%;
        }

        .lside_2 {
            font-size: 30px;
        }

        .lside_3 {
            margin-top: 30px;
        }

        #right {
            width: 550px; height: 255px;
            border: 1px solid red;
            float: right;
         }

         .rbox1 {
            border: 1px solid blue;
            position: absolute;
         }

         .rbox2 {
            border: 1px solid blue;
            position: absolute;
            width: 350px ; height: 250px;
            right: 10px;
         }
         table {
            line-height: 3.5em;
        }
         th {font-size: 28px;}
         td {
            font-size: 18px;
            text-decoration: underline lightgray;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="top">
        <p>&nbsp;기업 연혁</p>
    </div>
    <br>
    <br>
    <div id="middle">
        <div id="left">
            <p class="lside_1">2018 ~ 현재 <p>
            <p class="lside_2">환경과 사람을<br>존중하는 기업<br>'환경 사랑'</p>
            <p class="lside_3">환경 관련 우수기업<br>대통령상을 수상하다.<p>
        </div>
        <div id="right">
            <div class="rbox1"><img src="Chocolate.jpg" width="170"></div>
            <div class="rbox2">
                <table>
                    <tr>
                        <th>2021</th>
                        <td>환경사랑 수원 전시장 오픈</td>
                    </tr>
                    <tr>
                        <th>2020</th>
                        <td>환경사랑 광주 전시장 오픈</td>
                    </tr>
                    <tr>
                        <th>2019</th>
                        <td>환경사랑 대전 전시장 오픈</td>
                    </tr>
                    <tr>
                        <th>2018</th>
                        <td>환경사랑 서울 전시장 오픈</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

       

      연습 문제 2

      아직 푸는 중...

      <!DOCTYPE html>
<html>
<head>
    <title>The 베이킹</title>
    <style>
        body {
            width: 1200px; height: 700px;
            position: relative;
        }

        img {border: 1px solid lightgray;}

        #mid1 {
            width: 350px; height: 350px;
            position: absolute;
            left: 300px;
            top: 100px;
        }

        #mid2 {
            width: 350px; height: 350px;
            position: absolute;
            left: 300px;
            top: 350px;
        }

        #right {
            width: 350px; height: 600px;
            position: absolute;
            left: 720px;
            top: 100px;
        }

        #left {
            width: 200px; height: 600px;
            position: absolute;
            top: 100px;
            left: 10px;
        }

        #menu {
            
        }

        .left_top {
            position: absolute;
            left: 0px;
            top: 60px;
        }

        .left_bottom {
            position: absolute;
            left: 0px;
            bottom: 60px;
            
        }
        .right_top {
            position: absolute;
            right: 0px;
            top: 60px;
        }
        .right_bottom {
            position: absolute;
            right: 0px;
            bottom: 60px;
        }

        .title {
            font-weight: bold;
            font-size: 18px;
            border-bottom: 1px solid gray;
        }
        .text {
            position: absolute;
            font-size: 15px;

        }
        .left_title {
            position: absolute;
            background-color: #30b3a6;
            color: white;
            width: 200px; height: 40px;
            top: 10px;
            left: 0px;
            line-height: 10px;
            font-weight: bold;
        }
        .left_text p {
            position: absolute;
            font-size: 15px;
            top: 60px;
            left: 5px;

        }
        
        .left_text span {
            position: absolute;
            left: 0px;
            top: 170px;
        }


    </style>
</head>
<body>
    <section>
        <div id="mid1">
            <p class="title">알림</p>
            <div class="text">
                <p>8월 3일 쿠킹 클래스 연기합니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
                <p>8월 3일 쿠킹 클래스 연기합니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
                <p>8월 3일 쿠킹 클래스 연기합니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
                <p>8월 3일 쿠킹 클래스 연기합니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
                <p>8월 3일 쿠킹 클래스 연기합니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
            </div>
        </div>

        <div id="mid2">
            <p class="title">자유 게시판</p>
            <div class="text">
                <p>안녕하세요. 반갑습니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
                <p>안녕하세요. 반갑습니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
                <p>안녕하세요. 반갑습니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
                <p>안녕하세요. 반갑습니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
                <p>안녕하세요. 반갑습니다. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09.30</p>
            </div>
        </div>
    </section>

    <aside>
        <div id="right">
            <p class="title">제빵 클래스</p>
            <div class="left_top">
                <br>
                <img src="img1.png", width="160px", height="130px">
                <p><b>도너트 만들기[3]</b><br>21.09.30</p>
            </div>

            <div class="left_bottom">
                <br>
                <img src="img2.jpg", width="160px", height="130px">
                <p><b>도너트 만들기[3]</b><br>21.09.30</p>
            </div>

            <div class="right_top">
                <br>
                <img src="img3.jpg", width="160px", height="130px">
                <p><b>도너트 만들기[3]</b><br>21.09.30</p>
            </div>

            <div class="right_bottom">
                <br>
                <img src="img4.png", width="160px", height="130px">
                <p><b>도너트 만들기[3]</b><br>21.09.30</p>
            </div>
        </div>

        <div id="left">
            <div class="left_title">
                <p>&nbsp;The 베이킹</p>
            </div>

            <div class="left_text">
                <p>안녕하세요. 쿠키와 빵 만들기 정보를 공유하고 소통하는 공간입니다.</p>
                <span><input type = 'text' size=16>&nbsp;<input type = 'button' value = '검색' size = 16></span>
            </div>

            <div class=""
        </div>
    </aside>

</body>
</html>

      &nbsp; 개수가... ㅎ 더 멋있게 짜고 싶은데

       

      왼쪽을 해야 하는데... 오른쪽만큼 만듦 ㅎ

      저작자표시

      'HTML' 카테고리의 다른 글

      자바스크립트 기본 문법  (0) 2023.10.26
      요소 배치  (0) 2023.10.19
      수평, 중앙, One True 정렬 레이아웃  (0) 2023.10.19
      CSS3 속성  (0) 2023.10.06
      CSS3 기초: 선택자와 단위  (0) 2023.10.05

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바