input 태그 + form, fieldset, legend, label 등을 이용해 네이버 로그인 클론코딩 해보기

form, input 태그는 HTML을 공부하며 컴퓨터와 소통하는 첫걸음입니다.

영어번역을 그대로 하면 in 안을로, put 집어넣는다는 뜻으로 컴퓨터에게 데이터를 입력하는 방법입니다. 그러기 위해서는 form 태그와 함께 적절한 input을 사용해봐야하는데요. html 안에서 기본값으로 설정된 input의 스타일들이 있습니다.

그.래.서!

input 태그를 만들고 type 속성을 이것저것 사용해보는 것이 중요합니다. 모든 type의 input 태그를 만들어 가지고 놀아보세요~ 그러면서 이 태그는 이럴 때 쓸 수 있지 않을까? 고민해보시기 바랍니다~

<form>
  <input type="여러 속성 입력해보기" />
</form>

form 안에서도 많은 영역을 나눌수 있습니다. 테두리를 가진 영역을 지정하고 싶은 때는 form 안에 fieldset 을 사용하고 왼쪽위의 제목이 들어갈만한 곳에 legend태그를 사용하면 제목도 올릴 수 있습니다. 나머지는 스타일링으로 작업하면 됩니다.

<fieldset>
	<legend>해당 구역의 제목 입력</legend>
    ...나머지 코드
</fieldset>

input은 여러가지 방법으로 사용할 수 있는데요 대표적인 몇가지만 예를 들어볼게요

옵션을 선택할 때 사용하는 checkbox 와 radio type

<input type="checkbox" />
<input type="radio" />

input 태그는 label 태그와 함께 많이 사용됩니다. input 의 id 속성에 값을 입력하고 label 의 for 속성에 같은 값을 연결하면되는데요. a 태그 href 속성과 많이 비슷합니다. 가장 큰 차이점은 label 태그의 for 값으로 아이디를 넣을 때 "#" 을 사용하지 않는다는 점입니다.

<label for="input_id">인풋제목</label>
<input id="input_id" />

이처럼 label 과 input 을 연결하는 가장 큰 이점은 html 태그 안에서 id 값으로 연결된 label을 선택하면 어디에 있든지간에 해당 id를 가진 input 을 선택하는 것과 똑같은 효과를 볼 수 있다는 것입니다.

<fieldset>
    <legend>CheckBox 알아보기</legend>
    <ul>
        <li>
            <input type="checkbox" name="c" id="c1">
            <label for="c1">옵션1</label>
        </li>
        <li>
            <input type="checkbox" name="c" id="c2">
            <label for="c2">옵션2</label>
        </li>
        <li>
            <input type="checkbox" name="c" id="c3">
            <label for="c3">옵션3</label>
        </li>
    </ul>
</fieldset>

체크박스는 중복된 값을 선택할 때 사용됩니다. 반면 라디오는 여러 옵션 중 하나의 옵션만 선택하고플 때 사용합니다. 하지만 라디오에서 name 속성을 부여하지 않으면 여러가지가 선택되니 이점을 유념하여 작업해주세요.

<fieldset>
    <legend>Radio 알아보기</legend>
    <ul>
        <li>
            <input type="radio" name="c" id="c1">
            <label for="c1">옵션1</label>
        </li>
        <li>
            <input type="radio" name="c" id="c2">
            <label for="c2">옵션2</label>
        </li>
        <li>
            <input type="radio" name="c" id="c3">
            <label for="c3">옵션3</label>
        </li>
    </ul>
</fieldset>

form 안에서 작동하게끔 하는 버튼만 입력하면 폼이 완성됩니다.

<form>
...코드
	<input type="submit" value="버튼이름" />
    // 또는
    <button>버튼이름</button>
</form>

둘중에 하나만 써도 됩니다. input type으로 button/submit/reset 등을 적절히 사용하시면 되는데, button type에도 button/submit/reset 을 적용할 수 있습니다. 좀 더 손에 익고 다루기 쉬운것을 선택하시면 됩니다.

바로 네이버 로그인 창 클론 들어갑니다. HTML으로 작성할 때 제일 중요한 것은 역시 레이아웃입니다. 내가 이것을 어떻게 쪼갤 것인가에 따라 스타일링 작업이 달라지기 때문입니다. 모든 기능을 따라하지 않고 간단한 모습만 작업해볼게요.

우선 form 안에 제목, 가운데 input들과 로그인 버튼, 마지막으로 ul태그를 사용해 li를 만든뒤 기타 버튼을 작업하면 됩니다.

<form action="">
    <h1>제목</h1>
    <fieldset>
        input들, 로그인 버튼
    </fieldset>
    <ul>
        기타버튼
    </ul>
</form>

가운데 fieldset 부분은 다시 한번 아이디, 비밀번호 그리고 로그인으로 쪼개줍니다.

	<fieldset>
        <div>
            <label for="e">이메일</label>
            <input type="text" id="e" />
        </div>
        <div>
            <label for="p">비밀번호</label>
            <input type="password" id="p" />
        </div>
        <input type="submit" value="로그인">
        //또는
        <button>로그인</button>
    </fieldset>

이제 fieldset 바깥 부분에 ul로 작업하면 끝입니다. 중요한 것은 form 내부에 button 태그를 만들 경우 type을 별도로 지정해주지 않으면 form을 작동하게끔하니 꼭 button 의 type속성으로 "button" 을 지정해주세요. 또는 input의 type="button"사용도 괜찮습니다. 이때는 value 값으로 이름을 넣어주시면 됩니다.

	<ul>
       <li><button type="button">비밀번호 찾기</button></li>
       <li><button type="button">아이디 찾기</button></li>
       <li><button type="button">회원가입</button></li>
       //input button 으로 사용 예시 <li><input type="button" value="버튼이름" /></li>
    </ul>

최종 코딩 후 이렇게 나오면 뼈대가 잘 나온겁니다. 정답은 없습니다. 다만 제가 한 작업물이 있을 뿐입니다. 여러분들의 작업을 하셔도 됩니다. 직접 해보고 나서 아래 코드 확인하기!

	<form action="">
      <h1>NAVER</h1>
      <fieldset>
        <div>
          <label for="e">이메일</label>
          <input type="text" id="e" />
        </div>
        <div>
          <label for="p">비밀번호</label>
          <input type="password" id="p" />
        </div>
        <input type="submit" value="로그인" />
        <button>로그인</button>
      </fieldset>
      <ul>
        <li><button type="button">비밀번호 찾기</button></li>
        <li><button type="button">아이디 찾기</button></li>
        <li><button type="button">회원가입</button></li>
      </ul>
    </form>

naver.html 이 존재하는 폴더에 naver.css 파일을 만들고 head 태그 안에 link 태그를 사용해 연결합니다.

<head>
	//기타 메타 태그 및 타이틀 태그
	<link rel="stylesheet" href="naver.css" />
</head>

아래 코드를 복사해 붙여넣어보시면 그럴싸한 모습이 됩니다. css 역시 답은 없습니다. 다만 제가 작업한 css 가 있을뿐. 참고용으로만 훑어봐주세요.

* {
  padding: 0;
  margin: 0;
}

form {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

form > h1 {
  text-align: center;
  color: green;
}

form > fieldset {
  border: 1px solid lightgray;
  margin: 20px;
  padding: 20px;
  border-radius: 8px;
}

fieldset > div {
  display: flex;
  flex-direction: column;
}

fieldset label {
  font-size: 12px;
  color: gray;
}

fieldset input {
  border-radius: 8px;
  border: 1px solid lightgray;
  padding: 10px;
  min-height: 20px;
}

fieldset div:first-child {
  margin-bottom: 10px;
}

fieldset > div > input:focus {
  outline-color: green;
}

fieldset > input {
  width: 100%;
  height: 50px;
  background-color: green;
  color: white;
  cursor: pointer;
  margin-top: 20px;
}

fieldset > input:hover {
  opacity: 0.8;
}

fieldset > input:active {
  opacity: 0.5;
}

form > ul {
  display: flex;
  list-style-type: none;
  justify-content: center;
  column-gap: 20px;
}

form > ul button {
  border: none;
  background-color: transparent;
  color: gray;
  cursor: pointer;
}

form > ul button:hover {
  color: green;
}