HTML, CSS, Javascript #2

HTML Emmet cheat sheet

→ 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 요소

• 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;
             }

  
  

form type example

서버에서 클라이언트에게 폼을 응답할 때 이미 저장된 값을 출력한 채로 응답을 해야 할 때가 있다.
예를 들어, 회원 가입된 정보 보기로 이동한다면 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">

첨부파일

HTML:5 에서 추가된 폼 요소

-웹브라우저의 종류와 버전별로 지원이 될 수도 있고 안될 수도 있다.

> 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" />

anchor

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 실행 가능
모바일 웹브라우저에서 전화 가능
이메일 보내기 가능

• 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>