반응형

HTML4와 CSS2 태그 3번째 내용으로 알아보도록 하겠습니다. HTML4 태그는 내용이 많기 때문에, 기존에 정리해두었던 HTML4 첫 번째와 두 번째 내용을 보고 오시면 예제와 태그 내용을 바로 확인할 수 있습니다.

 

HTML4 태그 정리 (1)

HTML4, CSS2 태그에 대해서 알아보도록 하겠습니다. 웹퍼블리셔를 희망하는 사람들에게는 HTML, CSS는 기본적으로 알아야 할 코드입니다. 특히, 홈페이지를 구성하는데 HTML 1부터 태그 내용이 필요합

apage.co.kr

 

HTML 4 태그 정리 (2)

HTML4 태그 정리 하도록 하겠습니다. 해당 페이지 이외의 HTML 4 태그에 표시된 내용이 필요하신 분들은 아래의 링크를 통해서 알아보시길 바랍니다. 홈페이지를 제작하기 위해서는 HTML 1부터 HTML4

apage.co.kr

HTML4 및 CSS2 태그 정리

HTML

HTML4 태그 예시 1

웹페이지 내에 보이는 태그 내용의 정답은 아래와 같습니다.

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">

        <title>HTML 2일차 4.0 + CSS 2.0 (응용)</title>

        <style>

        .box {

           width:150px;

           height:150px;

           display: block;

        }

        .color1 {background-color: orange; border:1px solid black;

        border-radius : 75px 0 75px 0;

        }

        .color2 { background-color: green; }

        .divbox{width:400px; height:400px;}

        .div2{ width:200px; height:200px; border:1px solid black}

        .imgs { width:200px; height:200px;}

        .m{margin-top: -202px; margin-left: 202px;}

        .box1{

            width:405px;

            height:405px;

            display: block;

            border:1px solid black;

        }

        .box2

        {width:200px;

        height:100px;

        display:block;

        background-image:url("./img/cat1.jpg"); background-size: 100%;

        }

        </style> 

 

    </head>

    

    <body>

    <span class="box color1"></span>

    <span class="box color2"></span>

    <br><br>

    <div class="divbox">

      <div class="div2"><img src="./img/cat1.jpg" class="imgs"></div>

      <div class="div2 m"><img src="./img/cat2.jpg" class="imgs"></div>

      <div class="div2"><img src="./img/cat3.jpg" class="imgs"></div>

      <div class="div2 m"><img src="./img/cat4.jpg" class="imgs"></div>

    </div>   

</body>

</html>

HTML4 태그 예시 2

HTML

<html lang="ko">

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">

        <title> HTML 2일차 4.0 + CSS 2.0 입력 부분</title>

   

    <style>

    .search {width:586px; height:57px; background-image: url("./img/search.png");

    background-size:100%;

    }

    .txt {width:400px; height:50px; margin-top: 2.5px; margin-left: 2.5px;

    border:0; font-size:17px;} 

    body {margin: 0; padding: 0; } /* 각각의 브라우져에 상,좌,우,하단까지 여백이 발생함 그 부분을 완벽하게 제거*/

    .userid{

    width:200px; 

    height:30px; 

    border:0px; 

    border-bottom: 1px solid black;

    }

    .ulcss { list-style: none; margin: 0; padding: 0;}

    .licss{width:100px; height:30px; border:1px solid black; float: left;

    text-align: center; line-height:30px;

    font-size:13px; font-family: "돋움체";

    }

    a {text-decoration: none;} /* text-decoration : href로 인하여 밑줄을 제거할 때 사용합니다.*/

    /* float : 배치구조 변경시 사용되는 속성 */

    </style>

     </head>

    <body>

    <input type="text" class="userid">

    <select class="usderid">

        <option>SKT</option>

        <option>LGT</option>

        <option>KT</option>

    </select>

    <div class="search">

    <input type="text" class="txt" placeholder="찾고자 하는 검색어를 입력하세요!">

    <!--placeholder : 입력 도움말을 표현할 때, 이용되어 집니다.-->

    </div>

    <ul class="ulcss">

        <li class="licss">

        <a href="http://www.naver.com">메뉴1</a>

        </li>

 

        <a href="http://www.naver.com">

            <li class="licss">메뉴2</li>

        </a>

 

        <li class="licss">메뉴3</li>

        <li class="licss">메뉴4</li>

        <li class="licss">메뉴5</li>

    </ul>

    </body>

</html>

 

 

'웹퍼블리싱' 카테고리의 다른 글

HTML4 태그 정리 (6)  (0) 2021.03.25
HTML4 태그 정리 (5)  (0) 2021.03.24
HTML4 및 CSS2 태그 정리 (3)  (0) 2021.03.20
HTML 4 태그 정리 (2)  (0) 2021.03.20
HTML4 태그 정리 (1)  (0) 2021.03.17
HTML 3.0 태그 정리  (0) 2021.03.11

+ Recent posts