HTML의 id와 class

#와이어프레임
-와이어로 설계된 모양을 의미
-단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한것
-웹 애플리케이션을 개발할때, 와이어프레임은 레이아웃의 형태를 잡는 단계를 의미한다.

---

<웹페이지의 구조잡기>
#프로토타이핑: 개발초기에 모형을 만들어 기능의 요구사항을 파악후 반영하는 개선방식
1. 큰틀에서 영역나누기
2.각 영역을 태그로 표현하기
#여러태그를 하나의 div로 감싸줘야 합니다. div는 영역이라는 의미이다.
# section
-보통제목, 컨텐츠가 포함된 구획을 나눌때 사용
-렌더링은 div와 크게 다른 점은 없습니다.
#form (양식, 문서양식)
-일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할을 한다(사용자 입력을 제출하는 용도)
-input요소, button요소 등의 자식 요소를 감싸는 경우에 자주 사용된다. (보통 input, button 등을 포함한다)
-목적이 명확하므로 단순히 영역을 나누기 위해 사용하는 div요소보다는 더 sementic(의미의)한 요소 사용이라고 할수 있다.
-화면을 전환해버리는 기능이 있어서 사용시 유의해야한다.

-form안에 input, label같이 사용할수있다.

---

//쓰기부분
<div>
  <div>댓글 9</div>
  <input type="text" placeholder="댓글을 입력해주세요">
  <button>등록</button>
</div>

//읽기부분
<ul>
  <li>
     <div>out0****</div>
     <div>시각장애인들을 위한 지원이 정말 반갑네요 앞으로도 이러한 지원이 많았으면 좋겠어요!</div>
     <span>2018-03-22 23:29:22</span>
     <button>
        <img src="thumbup.png"> 0
     </button>
     <button>
        <img src="thumbdown.png"> 0
     </button>
   </li>
   <li>
     <div>cake****</div>
     <div>앞으로도 시각 장애인들이 일상생활에서 별다른 문제없이 살아갈수 있도록 많은 배려 부탁드립니다</div>
     <span>2017-04-06 18:21:58</span>
     <button>
        <img src="thumbup.png"> 0
     </button>
     <button>
        <img src="thumbdown.png"> 1
     </button>
   </li>
 </ul>

---

<id와 class를 목적에 맞게 사용하기>
html에 이름을 붙여줬던 속성
id : 고유(unique)한 이름을 붙일때 
class: 반복되는 영역을 유형별로 분류할때
html에 id와 class라는 속성을 이용해서 이름을 붙여준다.

html태그-> selector
<div id="writing-section">          ->         div#writing-section
<li class="comment">                 ->         li.comment

쓰기부분
div -> div#writing-section
input -> input#new-comment-content
button -> button#register

읽기부분: 중복되는게 많아서 id말고 class로 이름 붙여야한다.

ul -> ul#comments
li -> li.comment
div -> div.username     div.content
span -> span.createdAt
button -> button.voteUp     button.Down

읽기부분 자체는 고유하므로 id로 이름을 붙인다.
반복되는 항목은 class로 지정한다. 같은 class값을 지정해줌으로서, 동일한 유형임을 알수 있다.

---

<로그인페이지만들기2>
#원본
<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label>

<link rel="stylesheet" href="style.css"> 

#id자리를 먼저생각하면
id는 id-input을 넣을거고
class는 input과 focus를 넣을거다
<input id="id-input" class="input focus" type="text" placeholder="ID">

#최종
<input id="id-input" class="input focus" type="text" placeholder="ID"></input>
<input id="password-input" class="input focus" type="password" placeholder="password"></input>
<button id="login-button">Login</button>
<input id="keep-checkbox" type="checkbox">Keep Login</input>
<link rel="stylesheet" href="style.css">

 

출처

-코드스테이츠