HTML4 태그와 함께 CSS 태그도 같이 적용하는 방법에 대해서 알아보겠습니다. HTML4 태그 정리(5)까지는 VS Code 내에 1개의 페이지만 이용했습니다. 이번 내용부터는 index16.html과 index16.css를 같이 응용해보도록 하겠습니다. 이전 내용이 궁금하시면 아래의 링크를 통해서 확인할 수 있습니다.
HTML4와 CSS 태그 정리
INDEX16.HTML 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta : charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">
<title>HTML5.0 3일차</title>
<link type="text/css" rel="stylesheet" href="./index16.css?v=1">
<!--
link 태그를 이용해서 css 파일을 로드하여 페이지에 적용하게 됨
-->
</head>
<body>
<form oninput="aa.value=parseInt(a.value)">
<input type="number"><br> <!--숫자만 x / 버그 발생할 가능성 多-->
<input type="color"><br> <!-- 컬러 피커 -->
<input type="date"><br> <!-- 년, 월, 일(달력)-->
<input type="time"><br> <!-- 시간 선택 -->
<input type="week"><br> <!-- 주일 표시 x-->
<input type="datetime-local"><br> <!-- 시간, 년, 월, 일, 시, 분 -->
<input type="tel"><br> <!--숫자만 입력-->
<input type="email"><br> <!-- 이메일 입력시 사용 -->
1<input type="range" min="1" max="10" id="a"> 10 <br>
<!-- 범위 선택 min:최소, max:최대-->
<output for="a" name="aa"></output>
<!-- output 태그는 input에서 입력 값을 받아서 출력해주는 태그입니다.
단, javascript, jquery와 함게 사용해야 합니다.
-->
</form>
</body>
</html>
INDEX16.CSS 페이지
body {margin: 0; padding: 0;}
.box {width:100px; height:100px; background-color: blue;}
'웹퍼블리싱' 카테고리의 다른 글
HTML5 레이아웃 만들기 (0) | 2021.03.31 |
---|---|
HTML5 Video 신규속성 태그 정리 (0) | 2021.03.28 |
HTML4 태그 정리 (5) (0) | 2021.03.24 |
HTML4 및 CSS2 태그 정리 (3) (0) | 2021.03.20 |
HTML 4 태그 정리 (2) (0) | 2021.03.20 |