회식하고 기분 좋으면 2차, 3차도 가잖아!
이해가 안되면 10%를 이해한 그 기쁨에 2차, 3차 반복하면서 연습하자!
첫번째 Html
<body>
<div class="main">
<div class="logo">westagram</div>
<div class="user">
<div class="input-wrap" id="num">
<input type="text" placeholder="전화번호, 사용자 이름 또는 이메일">
</div>
<div class="input-wrap" id="pwd">
<input type="text" placeholder="비밀번호">
</div>
</div>
<button class="btn">로그인</button>
<a href="">비밀번호를 잊으셨나요?</a>
</div>
</body>-
태그 이름을 정하는 것이 간단한듯하면서도 알맞고 확실한 이름을 지어주는게 쉽진 않은 것같다.
-
구역 분할도 좋지만 묶을 수 있는 것을 묶어준다면 CSS에서 공통적인 관리가 가능해지니깐 유지보수에 더 좋지 않을까?
-
Html 뼈대에서 뼈의 역할을 정확하게 의미를 줄 수 있는 작성 연습이 필요해보인다.
두번째 Html
<body>
<div class="container">
<div class="loginbox">
<h1>Westagram</h1>
<form class="loginForm">
<input id="id" type="text" placeholder="전화번호, 사용자 이름 또는 이메일">
<input id="pw" type="password" placeholder="비밀번호">
<button id="loginBtn" type="button" disabled>로그인</button>
</form>
<a href="">비밀번호를 잊으셨나요?</a>
</div>
</div>
</body>- 강의를 들은 후 필요한 태그들이 하나의 구역 안에 쏙 들어갈 수 있도록 수정해보았다. 확실히 눈이 편하고 무엇으로 구성되어있는지 확실하게 잘 보인다.
<form>폼이 있었다!
<form>
- 사용자의 입력을 수집하여 서버에 전송하는 역할
- 단순히 텍스트이 내용만 보여 주는 페이지에는 필요 없지만 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 요소
- form 요소: 다양한 타입의 입력(input),체크박스(checkbox), 라디오(radio)버튼, 제출(sumit)버튼 등
🤔 짧은 Html 뼈대 잡기였지만 내 머릿속에서 생각하는 것을 간결하지만 정확하게 작성해야함을 명심해야겠다.
영원히 공부하는 멋진 장선생!!