웹사이트들 돌아 다니다 보면 로그인 창이나 입력 창을 볼수있습니다.
오늘은 입력할수있는 태그를 알아보겠습니다.
<input> 태그입니다 이태그는 다른 태그와는 다르게 </input>이라는 끝나는 태그가 없습니다.
그리고 오늘은 input 태그의 Type 들중 Text에 대해 설명을 해보겠습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1 style="margin:30px;"> HTML 기초배우기 </h1>
로그인<input type="Text">
</body>
</html>
로그인 을 타이핑 하신후에 input 태그 속성값이 있는 type 를 Text로 지정해줌니다.
결과값은 아래 와같이 나옵니다.
<input>태그를 이용하여 아이디와 비밀번호를 만들어 보면 결과는 이렇게 나오는데요
이렇게 만들기 싫고 로그인 밑에다가 비밀번호를 넣고 싶으면 여러 가지 방법이있습니다.
로그인 태그 뒤에 <br> 태그를 넣는 방법이있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1> HTML 기초배우기 </h1>
로그인<input type="Text"><br>
비밀번호<input type="Text">
</body>
</html>
그리고 <p></p> 태그를 이용해 각각 단락을 설정해 주는 방법도있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1> HTML 기초배우기 </h1>
<p> 로그인<input type="Text"> </p>
<p> 비밀번호<input type="Text"></p>
</body>
</html>
그리고 조금더 개발자 스럽게 <div></div> 태그를 이용하는 방법이있습니다.
저는 <div></div> 태그를 쓰는걸 추천드립니다. 이유는 조금더 위치를 조정하기 편하고
디자인면에서와 다른 태그들을 같이 감싸주어도 용이 하다고 생각합니다
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1> HTML 기초배우기 </h1>
<p> 로그인<input type="Text"> </p>
<p> 비밀번호<input type="Text"></p>
</body>
</html>
모든 태그들을 써보시고 각자의 장단점에 맞게 사용하시면 됩니다.
'개발 > HTML' 카테고리의 다른 글
| HTML (오디오) 7편 (0) | 2021.04.16 |
|---|---|
| HTML (박스 모델) 기초 5-2편 (0) | 2021.04.12 |
| HTML (박스 모델) 기초 5-1편 (0) | 2021.04.11 |
| HTML (리스트 ) 기초 3편 (0) | 2021.04.10 |
| HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편 (0) | 2021.04.09 |