개요: 필자가 클론코딩 공부하면서 정리한 게시물이다.
<form>
<form>
<input type="color" />
<input type="text" />
<input type="text" />
<input type="password" />
</form>
</body>
다음과 같은 결과가 나온다. color는 지정이 가능하다.
<form>
<input placeholder="Name" type="text" />
<input placeholder="LastName"type="text" />
<input placeholder="UserName"type="text" />
<input placeholder="passwd"type="password" />
</form>
placeholder 를 적용하면 다음과 같이 뜬다.
<input placeholder="Name" type="text" />
<input placeholder="LastName" type="text" />
<input placeholder="UserName" type="text" />
<input placeholder="passwd" type="password" />
<input type="submit" value="버튼" />
type을 submit으로 지정하고 값을 버튼이라고 하면 위와 같이 뜬다.
다음과 같이도 쓸 수 있다.
accept="원하는 파일 형식" 작성하고 파일 선택 누르면 해당 원하는 파일 형식만 누르 수 있다.
모든 태그들은 다 기억할 수 없다. 따라서
<tagname attrname="abcd"> abcd </tagname>>
대부분의 태그들은 이런 방식이므로 기억하고
이외에도 minlength, required 등 많은 것이 있으니 웹사이트를 참고하자.
input의 type 기능도 여러가지 있다. 진짜 다 외우지 말고 웹사이트 참고하자
<label>
<label for="profle">Profile Photo</label>
<input id="profle" type="file" accpet=".png, .pdf" />
<label for="abc">abc</label>
<input id="abc" required placeholder="Name" type="range" />
range 의 기능도 있고 label의 for profile 과 input id의 profil을 연결해줘서 Profile Photo 를 누르면 파일을
선택할 수 있다.
이런것들이 있구나 하고 알아보자
<div>
<p> 랑 비슷하게 문단 나눠주기다.
<hearder> 도 똑같다. - <body> 안에 있다
<main>, <footer> - <div>랑 기능이 같지만 프로그래머가 읽기 편하게 보이기 위함으로 이름만 바꿔준것이다.
id는 어떤 태그안에 다 넣을 수 있는 기능이다 그리고 고유해야한다.
<p> - 문단 text
<span> - 짧은 text
semantic 태그를 이용해서 프로그래머가 코드를 봤을때 보기좋게 짜는것이 좋다. 그 예시는 아래와 같다.
<body>
<header>
<h1>The Nico Times</h1>
</header>
<main>
<p>hello</p>
</main>
<footer>©</footer>
</body>
input -type
img -src
특정 부가요소가 있는 태그들이다.
모르면 아래참고 중요!!
https://developer.mozilla.org/ko/docs/Web/HTML/Element