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 태그 정리
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 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 |
| HTML 4 태그 정리 (2) (0) | 2021.03.20 |
| HTML4 태그 정리 (1) (0) | 2021.03.17 |
| HTML 3.0 태그 정리 (0) | 2021.03.11 |