2023.07.18 모각코 2회차 결과

html 태그들

1)  label과 input태그

두 태그에서는 속성들이 매우 중요하다.

body태그 내부의 form태그

먼저 'input'태그는 웹사이트에 무언가를 작성할 수 있게 해주는 것이고 'label'태그는 입력란 앞에 라벨을 달아준다.

 

<label for="profile">Profile Photo</label>
<input id="profile" type="file" accept=".png,.pdf" />
<input required placeholder="Last Name" type="text" />
<input required placeholder="User Name" type="text" />
<input required placeholder="Password" minlength="10" type="password" />
<input type="submit" value="Creat Account" />

먼저 세번째 줄 input부터 보자

placeholder라는 속성에 'Last Name'을 넣어주면 값을 입력하기 전 자리를 지키는 Last Name이라는 글자가 보인다.

그리고 type은 'text' 문자로 받겠다는 것이다.

required는 반드시 입력되어야 한다는 것으로 입력하지 않는다면 경고 문구가 나타난다.

 

다섯번째 줄의 Password는 타입을 password로 해서 비밀번호를 입력받도록 하였고 minlength 속성을 통해 10글자 이상의 비밀번호를 입력받도록 했다. 그렇지 않는다면 마찬가지로 경고 문구가 나타난다.

오른쪽에 보이는 제출 버튼은 타입을 'submit'으로 하면 된다.

 

이제 맨 위의 label태그를 보자

label 태그는 항상 input 태그와 함께 쓰이며 아래처럼 입력 부분에 라벨을 달아준다.

 

ㅓㅓㅓ<label for="profile">Profile Photo</label>

<input id="profile" type="file" accept=".png,.pdf" />

여기서 for과 id를 이용해서 두 태그를 연결해주면 되는데 이 때 id는 전체 html에서 고유한 값을 가지고 있다.

(profile이라는 아이디를 썼으면 중복해서는 안된다는 것!)

 

 

2) div, span 태그

'div', 'span' 태그 : 기능은 있지만 의미는 없는 태그

   <header>

       <h1>The website</h1>

   </header>

   <main>

       <p>This website is for practice</p>

   </main>

그래서 div를 사용하는 대신 읽기만 해도 그 의미를 알 수 있는 태그를 사용해준다.

<div id="header"> 나 <div id="main">이런 식으로 쓰는 대신에 말이다.

 

여기서도 이렇게 span으로 쓸 수 있지만 한눈에 알아보기 어렵다.

<address>123 blbl road</address>

이런식으로 써주면 아 이게 주소구나 하고 알아보기 쉽다.

 

사방팔방 div로 떡칠할 필요가 없다!!

 

 

아직은 혼잡하지만 여러가지 경우를 다 시도해본 웹사이트다.

이제 CSS를 통해 본격적으로 웹사이트를 만들어보자