→ https://docs.emmet.io/cheat-sheet/ 참고
Child: >
ex. nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
Sibling: +
ex. div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
Climb-up: ^
ex.div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
Grouping: ()
ex.div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Multiplication: *
ex.ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Item numbering: $
ex.ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
Implicit tag names
ex).class
<div class="class"></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul>
<li class="class"></li>
</ul>
table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
Text: {}
ex.a{Click me}
<a href="">Click me</a>
form은 클라이언트가 입력하거나 선택한 정보를 서버에 전송할 양식이다.
action = "서버에 전송할 경로"
<div class="container">
<h1>폼(form) 요소 작성하기</h1>
<form action="login.jsp">
<label for="email">이메일</label>
<input type="text" id="email" name="email">
<label for="pwd">비밀번호</label>
<input type="password" name="pwd" id="pwd">
<button type="submit">로그인</button>
</form>
</div>
label의 for속성의 값과 input의 id속성의 값과 동일하게 작성이 되어야 된다.
name 속성의 값은 서버에서 필요한 값이다.
특정 div를 가운데 정렬하는 방법
width를 결정하고 좌우 마진을 auto로 지정하면 좌우 마진이 동일하게 설정되면서 가운데 정렬이 된다.
.container{
width: 768px;
margin-left: auto;
margin-right: auto;
}
서버에서 클라이언트에게 폼을 응답할 때 이미 저장된 값을 출력한 채로 응답을 해야 할 때가 있다.
예를 들어, 회원 가입된 정보 보기로 이동한다면 DB에 이미 저장된 내용을 출력해주어야 한다.
회원 가입 (signup.jsp)
이메일<h1>회원 가입 폼 입니다.</h1> <form action="signup.jsp"> <label for="email">이메일</label> <input type="text" id="email" name="email" />
성별 정보 (radio)
성별 정보 선택 남자 여자<fieldset> <legend>성별 정보 선택</legend> <label> <input type="radio" name="gender" value="man" checked />남자 </label> <label> <input type="radio" name="gender" value="woman" />여자 </label> </fieldset>
취미 정보 (checkbox)
축구 베이킹 피아노 기타<fieldset> <legend>취미 정보 선택</legend> <label> <input type="checkbox" name="hobby" value="soccer" />축구 </label> <label> <input type="checkbox" name="hobby" value="baking" />베이킹 </label> <label> <input type="checkbox" name="hobby" value="piano" />피아노 </label> <label> <input type="checkbox" name="hobby" value="etc" />기타 </label> </fieldset>
직업 정보 (select)
선택 프로그래머 의사 피아니스트 기타<label for="job">직업</label> <select name="job" id="job"> <option value="">선택</option> <option value="programmer">프로그래머</option> <option value="doctor">의사</option> <option value="pianist">피아니스트</option> <option value="etc">기타</option> </select>
점심 선택 (select - optgroup)
라면 쫄면 김밥 자장면 짬뽕 군만두<label for="lunch">점심 선택</label> <!-- option에 value가 없으면 innerText가 전송된다. --> <select name="lunch" id="lunch"> <optgroup label="분식"> <option>라면</option> <option>쫄면</option> <option>김밥</option> </optgroup> <optgroup label="중식"> <option>자장면</option> <option>짬뽕</option> <option>군만두</option> </optgroup> </select>
첨부파일 (file)
<label for="myFile">첨부파일</label> <input type="file" id="myFile" name="myFile">
첨부파일
-웹브라우저의 종류와 버전별로 지원이 될 수도 있고 안될 수도 있다.
> https://caniuse.com" > 여기서 확인
색상 선택
<input type="color" name="color" />
범위 선택
<input type="range" name="range" min="0" max="100" step="10" value="30">
날짜 선택
<input type="date" name="date" />
시간 선택
<input type="time" name="time" />
날짜, 시간 선택
<input type="datetime-local" name="datetime" />
숫자 선택
<input type="number" name="number" />
이메일 선택
<input type="email" name="email" />
a(anchor) 요소는 하이퍼 링크, 책갈피, javascript 등을 수행할 때 사용한다.
inline 요소는 원래 block요소를 자식 요소로 가질 수 없다.
단, a 요소만 예외적으로 div 같은 블럭요소를 자식 요소로 가질 수 있다.
동일한 페이지 내에서의 이동(책갈피)
밑의 예시와 같이 id 값을 넣어주고, a요소에 #id값을 넣어주면 이동할 수 있다.
<div class="container"> <ul> <li><a href="#one">one</a></li> <li><a href="#two">two</a></li> <li><a href="#three">three</a></li> </ul> <div class="spacer"></div> <div id="one">하나 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, numquam voluptatum aliquam voluptate illo consectetur rerum delectus sunt ullam aperiam officia doloribus dolor recusandae quasi dolorum? Eum cum officiis aut? </div> <div class="spacer"></div> <div id="two">두울 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, numquam voluptatum aliquam voluptate illo consectetur rerum delectus sunt ullam aperiam officia doloribus dolor recusandae quasi dolorum? Eum cum officiis aut? </div> <div class="spacer"></div> <div id="three">세엣 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, numquam voluptatum aliquam voluptate illo consectetur rerum delectus sunt ullam aperiam officia doloribus dolor recusandae quasi dolorum? Eum cum officiis aut? </div> </div>
anchor의 또 다른 기능
javascript 실행 가능
모바일 웹브라우저에서 전화 가능
이메일 보내기 가능
<ul>
<li>
<a href="javascript:alert('링크를 눌렀네?')">javascript 실행하기</a>
</li>
<!-- 모바일 웹브라우저에서 전화 가능 -->
<li><a href="tel:010-1111-2222">전화걸기</a></li>
<li><a href="mailto:aaa@naver.com">이메일 보내기</a></li>
</ul>