TIL004_210323

JIYOON·2021년 3월 23일

html udemy

TIL

목록 보기

4/42

TIL

🪓 감상

📙 열품타 8hour
👍🏼 늦게 일어난 것 만회 위해 열심히 공부
👎🏼 늦게 일어남

🚀 목표

노마드 코더 React 복습
Udemy에서 Javascript 강좌 수강하기 (50/682)
매일 커밋 연속 30일 달성하기 (3/30)

[링크 목록]

⭐️ MDN Web Docs
The Web Developer Bootcamp 2021
HTML 페이지 소스 보기 좋은 사이트

📣 The Web Developer Bootcamp 2021: 3.20-5.45

HTML 3: The Essentials

검색법
html form MDN

🔸 vsc에서 오른쪽 끝으로 가는 법
cmd+➡︎

Elements (Paragraph & Heading)

h1은 한 페이지 당 하나씩만!

<p>lorem + tab->Lorem ipsum text</p>

lorem3 +tab: Lorem ipsum text3

h1, h2 안 쓰고 h3 쓰지 말 것 (사이즈 맞춰서 쓰지 말고 정석대로)

✅ ~~Pangolin Practice (Done)~~

HTML: Boilerplate

HTMl element=Root element

<!DOCTYPE html>
<Head> meata infromation
<Title> Doensn't show up in the page itself,
shows up in the browser.</Title></Head>
<Body> all of the content of the document</Body>

🔸 !+tab: !DOCTYPE html 생성

HTML: List elements

<ol>orderd elements (numbered list)</ol> 
<ul>unorderd elements (bullet point)</ul> 
<li>list item(single itme in list) </li>

parent & childern 관계 - ul 안에 li, li 안에 ul, ul 안 ol, 모두 가능

🔸 shift+option+↑ or ↓ : duplicate the line

✅ ~~Favorit movies Excercies(Done)~~

HTML: Anchor elements

a tag: create a hyperlink
-> attribute(속성):
href: hyper text reference
http protocol: 문서, 정보를 주고받을 수 있는 protocol
www: to say this is on the world wide web, not a file that I have(relative to where I am right now).

<a href="image address"></a>

HTML: Image

<Tag attribute="">
<img src="image address" alt="text description of the image">

HTML: Comment

<!--adding notes or text, not rendered, ignored by browser,
used for feedback, reminder, or notes.-->

🔸 cmd+/: comment 단축키
🔸 cmd+2,3...: 작업창 2,3개로 만들기
🔸 cmd+shift+p: commands 입력 창, 단축키 볼 수 있음

HTML 4: Next steps & Semantics

HTML5

HTML5: latest evolution of the standard that defines HTML.
html spec

Div: the content division element

generic cotainer to hold things or to group elements together

Span: generic container, but inline element

hr: a line across the screen horizontally, like divider (can get by adding a border to the bottom)

br: makes a break

sup: squared, citations, elevated off the baseline

sub: baseline

<p><sup>1</sup>/<sub>2</sub> + <sup>1</sup>/<sub>2</sub> = 1</p>

Entitiy Codes

<h1> 1 < 6 </h1>

-> 이런 식으로 쓰면 브라우저에서는 정상적으로 보여도 코드 내에서는 헷갈려함
'어 뭐지? tag인가? bracket을 깜박한 건가?'

나중에 문제될 수 있으니 entitiy code를 써야 함
구글 검색: html entity less than

<h1> 1 &lt; 6 </h1>

&를 쓰는 것도 주의할 것->browser가 entity code로 착각

✅ ~~Snowman Logo Exercise(Done)~~

Senmantic Markup: add meaning to the markup

footer, navigation, div, header, section, article, main => all behave just like divs. 근데 왜 다르게 쓰냐-> 다른 브라우저나 google같은 곳에서 코드를 해석하기 때문, to make the code more tolerable and friendly to other applications or other code, and more accessible to screen readers and other developers. And essential for SEO

time, figure

Emet: extention that can use shortened syntax

vscode에 기본적으로 있으므로 쓸 수 있음
*, $, {}, >, +

HTML 5: HTML: Forms & Tables

HTML Table

예전에는 꾸미는 데 자주 썼지만 요새는 안 그럼.

<table> 표 생성 </table>
<td> 셀(table data) </td>
<tr> 가로줄(table row) </tr>
<tr><th> table header </th></tr>
<thead><tr> headers </tr></thead>
<tbody><tr> body </tr></tbody>
<tfoot><tr> foot </tr></tfoot>

<!-- 병합된 셀 만드는 법 -->
<tr>
    <th rowspan="2">Animal</th>
    <th colspan="2">Average Mass</th>
    <th rowspan="2">Flighted</th>
</tr>
<tr>
    <th>KG</th>
    <th>LB</th>
</tr>

✅ ~~Table Practice Exerciese(Done)~~

JIYOON

이전 포스트

TIL003_210322

다음 포스트

TIL004_210323

TIL

TIL

🪓 감상

🚀 목표

[링크 목록]

📣 The Web Developer Bootcamp 2021: 3.20-5.45

HTML 3: The Essentials

Elements (Paragraph & Heading)

HTML: Boilerplate

HTML: List elements

HTML: Anchor elements

HTML: Image

HTML: Comment

HTML 4: Next steps & Semantics

HTML5

Div: the content division element

Span: generic container, but inline element

hr: a line across the screen horizontally, like divider (can get by adding a border to the bottom)

br: makes a break

sup: squared, citations, elevated off the baseline

sub: baseline

Entitiy Codes

Senmantic Markup: add meaning to the markup

Emet: extention that can use shortened syntax

HTML 5: HTML: Forms & Tables

HTML Table

TIL003_210322

TIL005_210324

0개의 댓글

TIL004_210323

TIL

TIL

🪓 감상

🚀 목표

[링크 목록]

📣 The Web Developer Bootcamp 2021: 3.20-5.45

HTML 3: The Essentials

Elements (Paragraph & Heading)

HTML: Boilerplate

HTML: List elements

HTML: Anchor elements

HTML: Image

HTML: Comment

HTML 4: Next steps & Semantics

HTML5

Div: the content division element

Span: generic container, but inline element

hr: a line across the screen horizontally, like divider (can get by adding a border to the bottom)

br: makes a break

sup: squared, citations, elevated off the baseline

sub: baseline

Entitiy Codes

Senmantic Markup: add meaning to the markup

Screen reader (Voice Over: cmd+f5)

Emet: extention that can use shortened syntax

HTML 5: HTML: Forms & Tables

HTML Table

TIL003_210322

TIL005_210324

0개의 댓글