코코아톡 HTML 정리
form 형식 작성하기
<form action="">
<label for="profile">Profile Photo</label>
<input id="profile"type="file" accept=".pdf,png">
<label for="first-name">Frist Name</label>
<input id="first-name"required placeholder="Name" type="text">
<input required placeholder="Last Name" type="text">
<input required placeholder="Username" minlength="10" type="text">
<input required placeholder="name" type="password">
<input type="submit" value="Create Account">
</form>lable 과 input 태그의 id 값이 일치하면 label 을 클릭시 input태그 기능을 사용 할 수 있다.
id 는 어떤 태그에든 넣을 수 있는 attrtbute 이다. --> unique indentify(고유식볇자) 이기 때문, element 하나의 한개의 id 만 가질수 있다.
Semantic Tag
-semantic : 문서를 보기만해도 그 의미를 짐작할 수 있는 것이다.
head 태그와 header태그를 구분 할 것, head는 보이지 않는 것이고, header는 body태그안에 들어가는 것이다.
header 대신 div를 사용해도 무관하지만, 어떤 코드인지 보다 더 쉽게 이해하기 위함.
예시
<body>
<header>
<h1>header!</h1>
</header>
<main>
<p>main!</p>--> 문단 텍스트 쓸 때 적합
<span>hello!</span> --> 짧은 텍스트의 적합
</main>
<footer>footer!</footer>
</body>- 코드 자체에 의미가 부여된 semantic 태그를 잊지 말자.ex) header, navigation, footer...
- semantic 태그로 코드를 작성 하는 것은 매우 중요하다. 작성된 코드들이 훨씬 더 보기 좋고, 좋은
프로그래머가 되기 위해서는 필수 사항이다.
