Ahranah

총 10분 중 11분

재생

2001

시즌 2개, 그리고 영화

시즌 2: 5화 “아일랜드”

출연: 이나영, 김민준, 김민정, 현빈
장르: 애초에 역경을 딛고 이룩하는 숭고한 사랑이란 없다. 그 역경 자체가 사랑이다.
프로그램 특징: 그 곳에서 살아남는 사랑이 어떤 모습으로 걸어오는지 기다려 보고 싶다.

회차

KB_ITs_Your_Life_6th/HTML_CSS_JS HTML 기본 구조 - 태그

728x90

block vs. inline

html 구조의 핵심이다. 한 행을 기준으로 \n되냐 내용만큼만 영역을 차지하냐의 차이인데, 요소들 놓을 때 둘의 차이를 잘 고려해야 한다.

fieldset: table

table(표 삽입)은 tr -> th -> td을 순서로 가진다.

비슷하게 목록태그가 있다. ul(unordered list), ol -> li

fieldset으로 테두리 두르고 table로 값을 묶어주고, tr : table row , th: table heading(헤더), td : table data

    <form class="email">
      <fieldset>
        <legend>input form</legend>
        <table>
          <tr>
            <td><label for="name"> name </label></td>
            <td><input name="text" id="text" /></td>
          </tr>
          <tr>
            <td><label for="name"> name </label></td>
            <td><input name="text" id="text" /></td>
          </tr>
        </table>
      </fieldset>
    </form>

semantic 웹

시멘틱 구조가 뭐냐? div, body 로 나누면 웹 상에서 어디를 지칭하는 지 단번에 알수가 없다. 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있도록 각 부위별로 이름을 다르게 나눠준 지능형 웹이다.

<html>   
    <header>
      <h1>HTML5 기본</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">메뉴- 1</a></li>
        <li><a href="#">메뉴- 2</a></li>
        <li><a href="#">메뉴- 3</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </article>
      <article>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </article>
    </section>
    <footer>
      <span>서울특별시 강서구 내발산동</span>
      <span>서울특별시 강서구 내발산동</span>
      <span>서울특별시 강서구 내발산동</span>
      <span>서울특별시 강서구 내발산동</span>
      <span>서울특별시 강서구 내발산동</span>
      <span>서울특별시 강서구 내발산동</span>
      <span>서울특별시 강서구 내발산동</span>
    </footer>
  </body>
</html>

name vs. id

name

<form method = "post">
  <input type="text" name="username" value="john_doe">
  <input type="submit">
</form>

사용자가 폼을 제출하면 서버로 name = value 형태로 데이터 전송

post vs. get

post: 동적 웹 페이지 데이터 전달 방법 : 주소를 변경하지 않고 데이터 전달(용량 제한 X)

get: 정적 웹 페이지 데이터 전달 방법 : 주소에 데이터를 입력해서 전달, 크기 제한
-> http:// ~.html?search= {keyword}

app.post("/submit", (req, res) => {
  console.log(req.body.username); // "john_doe"
});

id

    <select name="name" id="foodSelect" multiple>
      <option [value="pizza"]>pizza</option>
      <option [value="honey"]>honey</option>
      <option [value="water"]>water</option>
      <option [value="berry"]>berry</option>
    </select>

name도 있고 id도 있다?? id는 클라이언트(브라우저)에서만 사용되며, 서버로 자동 전송되지 않음.

JavaScript에서 특정 요소를 조작하는 데 사용됨:

document.getElementById("userInput").value = "Hello!";

입력 양식 종류