유데미 웹개발 부트캠프 섹션 4-5

The web Developer Bootcamp 유데미 강의에서는

developer.mozilla.org 를 강의 자료로 활용을 많이 하는데 확실히 도움이 됩니다.

친절하게 정의랑 여러가지 자료들이 잘 정리되어 있습니다.

오늘 항해99 사전스터디 미팅에서 나온 단어 중에 html5semantic elements가 나왔는데

바로 오늘 유데미 강의에서 정리해줘서 좋았습니다.

 

저는 이러한 자료들(mozilla 사이트 등)을 조원들이랑 공유하고 싶은데

영어라서 조금 조심스러운 면이 있습니다.

구글이 잘 번역해주니까 괜찮지 않을까 싶기도 해요.

일단은 보류입니다.

 

HTML5

  • a buzzword that refers to a set of modern web technologies. This includes the HTML Living Standard, along with JavaScript APIs to enhance storage, multimedia, and hardware access.
 

API - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. The API can be seen as a simple contract

developer.mozilla.org

Inline elements

  • <span>: a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. 

Block elements

  • <div> :the content division elements

other elements

  • <hr> : 가로 라인 만듦
  • <br>: break 줄바꿈
  • <sup>: superscript 작은 글자 위에
  • <sub>: subscript 작은글자 밑에

HTML Entity codes

  • 코딩 기호들이랑 겹칠수 있는 기호들 (>,<,;, 등등)을 대체해서 쓰는 코드들
  • ex) < = &lt;
  • 검색하면 나옴

Semantic Markup

  • relating to meaning
  • <div>만 있는 거 대신 <main>, <header>, <nav>, <footer>, <section> 등 직관적인 이름을 붙여서 씀
  • <main>: dominant content of the <body> of a document
  • <nav>: provide navigtion links (menus, tables of contents, and indexes)
  • <section>: 말그대로 섹션
  • <article>: self-contained composition in a document, page, application, or site (e.g. a forum post, magazine, newspaper article, blog entity)
  • <aside>: a portion of a document whose content is only indirectly related to the document's main content (sidebars, call-out boxes)
  • <header>: 헤더는 헤더
  • <footer>: 풋터도 풋터
  • <time>: represents a specific period in time (24-hour clock,, calender, datetime ...)
  • <figure>: figure, its caption, and its contents are referenced as a single unit.
    • <figure><img src="url" alt="desc"><figcaption>caption</figcaption></figure>
  • <abbr>, <data>, etc...

Screen reader

  • command + f5
  • vocie over 기능

Emmet

  • VScode 에서 html 빨리 쓸수 있게 도와주는 프로그램

 

HTML Tables

  • <td>: The Table Data Cell element - a cell of a table that contains data..
  • <tr>: table row element
  • <th>:header cell element
  • <thead>, <tbody>, <tfoot> :semantic markup
  • <Colspan> : column 만듦 (줄 몇개 차지)
  • <Rowspan>: row (열 몇개 차지)

Form Elements

  • <form>: a shell or container that doesn't have any visual impact; fill the form with a collection of inputs, checkboxes, buttons, etc.
  • represents a document section containing interactive controls for submitting information
  • the action attribute specifies WHERE the form data should be sent
  • The method attribute specifies which HTTP method should be used

 

<input>

  • create a variety of different form controls (20+ possible types ...)
  • 여러가지 input type 예시들
<form action="/tacos">
        <input type="text" placeholder="username">
        <input type="password" placeholder="password">
        <input type="color">
        <input type="number" placeholder="숫자">
        <input type="range">
    </form>
 

input types and placeholder

Label

  • a caption for an item in a user interface
  • <label>
  • <label>이 안에 <input>넣는게 더 일반적(굳이 id 안넣어도 됨)</label>
<form action="/tacos">
        <p>
            <label for="username">Enter a username:</label>
            <input id="username" type="text" placeholder="username">
        </p>
        <p>
            <label for="password">Enter a password:</label>
            <input id="password" type="password" placeholder="password">
        </p>
        <p>
            <label for="color">Enter a color:</label>
            <input id="color" type="color">
        </p>
        <p>
            <label for="number">Enter a number:
            <input type="number" placeholder="숫자">
            </label>
            
        </p>


    </form>

label 예시

Buttons

  • <button></button>
  • <form action="">이 가라는 곳으로 submit 한다.

Name

  • <name="이름"> 인풋에 사용
  • file:///tacos?username=Jenni&password=jennifer&color=%236f2f2f&num=3
 <form action="/tacos">
        <p>
            <label for="username">Enter a username:</label>
            <input id="username" type="text" placeholder="username" name="username">
        </p>
        <p>
            <label for="password">Enter a password:</label>
            <input id="password" type="password" placeholder="password" name="password">
        </p>
        <p>
            <label for="color">Enter a color:</label>
            <input id="color" type="color" name="color">
        </p>
        <p>
            <label for="number">Enter a number:</label>
            <input type="number" placeholder="숫자" id="number" name="num">
        </p>
        <button>submit</button>


    </form>

 

 

 

구글, 유튜브, 레딧 검색창 뺏어오기

 <form action="https://www.reddit.com/search">
        <h1>검색하기</h1>
        <h2>레딧 검색하기</h2>
        <input type="text" name="q" placeholder="reddit.com">
        <button>Search reddit</button>
    </form>


    <form action="https://www.google.com/search">
        <h2>구글 검색하기</h2>
        <input type="text" name="q" placeholder="Google.com">
        <button>Search Google</button>
    </form>

    <form action="https://www.youtube.com/results">
        <h2>유튜브 검색하기</h2>
        <input type="text" name="search_query" placeholder="Youtube.com">
        <button>Search Youtube</button>
    </form>

Hijacking Google & Reddit Search

Radio buttons, Checkboxes & Selects

  • Checkbox: 
<input type="checkbox" name="agree_tos" id="agree" checked>
<label for="agree">I agree to everything</label>
 
  • Radio button:
 	<label for="xs">XS:</label>
            <input type="radio" name="size" id="xs" value="xs">
            <label for="s">S:</label>
            <input type="radio" name="size" id="s" value="s">
            <label for="m">M:</label>
            <input type="radio" name="size" id="m" value="m">
  • Selects:
  <label for="meal">Please select a Meal Type.</label>
            <select name="meal" id="meal">
                <option value="fish">Fish</option>
                <option value="meat" selected>Meat</option>
                <option value="veg">Veggies</option>
                <option value="wat">Water</option>
            </select>

Radio buttons, Checkboxes & Selects


Range & Textarea

Range

<label for="cheese">amount of cheese</label>
            <input type="range" name="cheese_level" id="cheese" step="1" min="1" max="10" value="3">

Textarea

 <label for="text">any special requests?</label>
            <br>
            <textarea name="text" id="text" cols="30" rows="3" placeholder="I request..."></textarea>

range and textarea

HTML5 Validations

  • 글자수나 포맷에 제한 주기 
  • required : 필수입력
  <label for="first">Enter First name</label>
        <input type="text" name="first" id="first" required>
        <button>Submit</button>

  • minlength: 최소 글자수
  • maxlength: 최대 글자수
  • min, max: 최소치, 최대치 (숫자)
  • pattern: 암호, email, url 등등

<label for="email">Type email...</label> <input type="email" name="email" id="email" required>

 

+ Recent posts