The web Developer Bootcamp 유데미 강의에서는
developer.mozilla.org 를 강의 자료로 활용을 많이 하는데 확실히 도움이 됩니다.
친절하게 정의랑 여러가지 자료들이 잘 정리되어 있습니다.
오늘 항해99 사전스터디 미팅에서 나온 단어 중에 html5랑 semantic 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.
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) < = <
- 검색하면 나옴
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>
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>
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>
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>
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>
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 등등