๐Ÿ’ช HTML, CSS

maimadeยท2021๋…„ 8์›” 2์ผ
0

1-1. Today I Learned. HTML, CSS

๋ชฉ๋ก ๋ณด๊ธฐ
1/4
post-thumbnail

๐Ÿ“Œ ๊ฐœ๋ฐœ ๊ณต๋ถ€ 1๊ฐœ์›” ์ฐจ์ธ to-be ๊ฐœ๋ฐœ์ž์˜ ์ž์Šต ๋ธ”๋กœ๊ทธ๐Ÿ™‚๏พ Aug 2 ~ 6, 2021

ํ˜„์žฌ ์ƒํƒœ
์•„๋ฌด๋ฆฌ FE์˜ ๊ธฐ๋ณธ์ด HTML5, CSS3, JavaScript๋ผ์ง€๋งŒ... ํ•œ ์ฃผ ๋™์•ˆ ์ด ์„ธ ๊ฐ€์ง€ ๋ถ„์•ผ์˜ ์ง€์‹์„ ๋จธ๋ฆฌ์— ๋งˆ๊ตฌ ์‘ค์…”๋„ฃ๋Š” ์ค‘
๋‚ด์šฉ์ด ๋„ˆ๋ฌด ๋งŽ์œผ๋ฏ€๋กœ ์ด page์—์„œ๋Š” HTML๊ณผ CSS ๋‚ด์šฉ ์ค‘ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๊ธฐ์— ํ•ต์‹ฌ์ธ ๋‚ด์šฉ๋งŒ ์ถ”๋ ค์„œ ์ •๋ฆฌํ•ด ๋ณธ๋‹ค.

HTML

1. intro

Tim Berners-Lee๊ฐ€ ์ง์žฅ (CERN) ์— ๋‹ค๋‹ˆ๋‹ค๊ฐ€ ๊ฐœ๋ฐœํ•œ ์–ธ์–ด์ด๋‹ค.
๋‹น์‹œ์—” 20๊ฐœ ์ •๋„์˜ tag๋ฐ–์— ์—†์—ˆ๋‹ค. ์ง€๊ธˆ์€ ์•ฝ 200๊ฐœ ์ •๋„๋ผ๊ณ  ํ•œ๋‹ค.

2. tags

(์ถœ์ฒ˜ ์ฐธ์กฐ)
h, p, br, a, img, form, input, font, table ...

3. document type declaration

์‹œ๊ฐ„์ด ํ๋ฆ„์— ๋”ฐ๋ผ tag๊ฐ€ ๋”ํ•ด์ง€๊ฑฐ๋‚˜ ์‚ญ์ œ๋˜๊ณ , ํ˜น์€ ์˜๋ฏธ๊ฐ€ ๋ณ€ํ•˜๋ฏ€๋กœ ์–ด๋–ค ํ‘œ์ค€์— ๋”ฐ๋ฅธ tag์ธ์ง€ browser์—๊ฒŒ ์•Œ๋ ค์ฃผ๋Š” ๊ฒŒ doctype ์„ ์–ธ์ด๋‹ค.
ํ˜„์žฌ๋Š” HTML5 version์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฏ€๋กœ ์ด์— ๋”ฐ๋ฅธ ์•ฝ์†์ธ <!DOCTYPE html>์„ ์„ ์–ธํ•œ๋‹ค.

4. meta

meta data๋Š” data๋ฅผ ์„ค๋ช…ํ•˜๋Š” data์ด๋‹ค.
์–ด๋–ค web page์ธ์ง€์— ๋Œ€ํ•ด ์š”์•ฝํ•˜๋Š” ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ๋‹ค.
์ด ์ •๋ณด๋กœ ๊ฒ€์ƒ‰๋˜๊ฑฐ๋‚˜ ๋ถ„๋ฅ˜๋˜๊ธฐ๋„ ํ•˜๋ฉฐ, ์ด๋•Œ ์‚ฌ์šฉํ•˜๋Š” tag๊ฐ€ meta tag์ด๋‹ค.
ex. <meta charset="utf-8">
์ •๋ณด๋ฅผ computer์— ์ €์žฅํ•˜๋Š” ๊ฒƒ์„ 'encodingํ•œ๋‹ค'๋ผ๊ณ  ํ‘œํ˜„ํ•˜๊ณ , ์ด๋ ‡๊ฒŒ ์ €์žฅ๋œ ์ •๋ณด๋ฅผ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์„ (์•„์ฃผ ์—„๋ฐ€ํ•œ ํ‘œํ˜„์€ ์•„๋‹ˆ์ง€๋งŒ) decoding์ด๋ผ๊ณ  ํ•œ๋‹ค.
ex. <meta name="description" content="์ƒํ™œ์ฝ”๋”ฉ์˜ ์†Œ๊ฐœ ์ž๋ฃŒ"> : web page์˜ ์š”์•ฝ๋œ ์ž๋ฃŒ
ex. <meta name="keywords" content="์ฝ”๋”ฉ,coding,programming"> : web page์˜ ์š”์•ฝ, ๋ถ„๋ฅ˜

5. semantic

(์ถœ์ฒ˜, Assignment 2 ์ฐธ์กฐ)
web์˜ ์ •๋ณด๋Š” ์‚ฌ๋žŒ๊ณผ ๊ธฐ๊ณ„ ๋ชจ๋‘์—๊ฒŒ ํ™œ์šฉํ•˜๊ธฐ ์ข‹์€ ํ˜•ํƒœ์˜ data๋กœ ๋ฐœ์ „๋œ๋‹ค.
๊ธฐ๋Šฅ ์ƒ์˜ ๋ณ€ํ™”๋Š” ์—†์–ด์„œ semantic tag๋ฅผ ์‚ฌ์šฉํ•˜๊ฑด ํ•˜์ง€ ์•Š๊ฑด ํ™”๋ฉด ์ƒ์˜ ๋ณ€ํ™”๋Š” ์—†์ง€๋งŒ code ์ƒ์˜ ์˜๋ฏธ์—๋Š” ๋ณ€ํ™”๋ฅผ ์ค€๋‹ค.
semantic tag์—” article, aside, details, figure, footer, header, main, nav, section, time ๋“ฑ์ด ์žˆ๋‹ค.

6. search engine optimization

web site๊ฐ€ ๋งŒ๋“ค์–ด์ง€๋ฉด Google์ด๋‚˜ Naver๊ฐ™์€ ๊ฒ€์ƒ‰ engine ํšŒ์‚ฌ๋“ค์ด software๋ฅผ ๊ฐ€๋™ํ•ด ๊ฐ์ข… web site์˜ HTML file์„ download ๋ฐ›์•„ ํ•ด์„ํ•œ๋‹ค.
semantic tag๋ฅผ ์ž˜ ํ™œ์šฉํ–ˆ๋‹ค๋ฉด ์ด๋ฏธ ๊ฒ€์ƒ‰ engine์— ์ตœ์ ํ™”๋˜์–ด ์žˆ๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.
์ž์‹ ์ด ๋งŒ๋“œ๋Š” web site๋ฅผ ์ด๋Ÿฌํ•œ ๊ฒ€์ƒ‰ engine์— ์ตœ์ ํ™”ํ•˜๋Š” ๊ฒƒ์„ ๊ฒ€์ƒ‰์—”์ง„์ตœ์ ํ™”, ์ฆ‰ SEO (search engine optimization) ๋ผ๊ณ  ํ•œ๋‹ค.

ex. title, meta, URL์— ์ค‘์š”ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ธฐ

link๋ฅผ ๋”ฐ๋ผ ์ •๋ณด๋ฅผ crawling์„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋™ ๊ฒฝ๋กœ๋ฅผ ์ž˜ ๊ณ„ํšํ•˜๊ณ  ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค. (bread crumb)

link ๊ฐ„์˜ ์ด๋™์€ ์›ฌ๋งŒํ•˜๋ฉด hyper text๋กœ codingํ•œ๋‹ค.
์ด๋•Œ anchor text๋ฅผ ์ ์ ˆํ•˜๊ฒŒ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.

image tag๋ฅผ ์‚ฌ์šฉํ•  ๋• alt๋ผ๋Š” ๋Œ€์•ˆ text๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์ž‘์„ฑํ•ด์•ผ screen reader์— ์ฝํž ์ˆ˜๋„ ์žˆ๊ณ  image ๊ฒ€์ƒ‰์— ์ž˜ ๋…ธ์ถœ๋  ์ˆ˜ ์žˆ๋‹ค.

sitemap.xml๊ฐ™์€ ๊ฑธ ๋งŒ๋“ค์–ด์„œ robot.txt์— ์ž…๋ ฅํ•ด ์ฃผ๋ฉด ์ข‹๋‹ค.

page rank๋ฅผ ๋†’์ด๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ ๊ณณ์—์„œ ๋ชฉํ‘œํ•˜๋Š” site๋ฅผ ์ธ์šฉํ•˜๋ฉด ๊ฒ€์ƒ‰ ๋…ธ์ถœ์— ์ข‹๋‹ค.

๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ ์•„๋ฌด๋ฆฌ ๊ฒ€์ƒ‰์ด ์ž˜ ๋˜์–ด์•ผ ํ•œ๋‹ค๊ณ  ํ•ด๋„ ์ตœ์ข… ๋ชฉํ‘œ๋ฅผ ๊ฒ€์ƒ‰ engine ์ตœ์ ํ™”๊ฐ€ ์•„๋‹Œ ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ contents์— ์ค‘์‹ฌ์œผ๋กœ ๋‘๊ณ  ์ œํ’ˆ์„ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.

โž• afterthought

web site๋ฅผ ๋งŒ๋“œ๋Š” HTML (Hyper Text (link) ์„ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ํŠน์ง•์œผ๋กœ ํ•˜๋Š” Markup ํ˜•์‹์„ ๊ฐ€์ง„ computer programming Language) ๋ช‡ ์ค„์˜ code๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒŒ ์‹ ๊ธฐํ•˜๋‹ค.

ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ ์‰ฝ๋‹ค๊ณ  ํ•ด์„œ ๋ฌด์ž‘์ • ์“ฐ๋ฉด ์•ˆ ๋  ๊ฒƒ ๊ฐ™๋‹ค. ๋‚ด๊ฐ€ ํ•˜๋ ค๊ณ  ํ•˜๋Š” ๊ฒŒ ๋ฌด์—‡์ธ์ง€ ๋ช…ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•˜๊ณ  HTML์„ ์ž‘์„ฑํ•˜๋Š” ๊ฒŒ ์ค‘์š”ํ•  ๊ฒƒ ๊ฐ™๋‹ค. ์™œ๋ƒํ•˜๋ฉด HTML์—์„œ ๋‚ด๊ฐ€ ์–ด๋–ค tag๋ฅผ ์“ฐ๋Š๋ƒ์— ๋”ฐ๋ผ ์ •๋ณด๋ฅผ ๋ฐฐ์น˜์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” styling์— ์˜ํ–ฅ์„ ์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ฆ‰ ํ–ฅํ›„ ์–ด๋–ค styling์„ ์ค„์ง€ ๊ณ ๋ คํ•ด์„œ tag๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค. PPT๋ฅผ ์ œ์ž‘ํ•  ๋•Œ PowerPoint๋ถ€ํ„ฐ ์ผœ์ง€ ์•Š๋“ฏ์ด ๋ƒ…๋‹ค code๋ถ€ํ„ฐ ์ž‘์„ฑํ•˜๋Š” ๊ฒŒ ์•„๋‹Œ, ๋Œ€๋žต์ ์ธ ๊ตฌ์ƒ์„ ๋งˆ์นœ ํ›„ code๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค. ์‹ค์ œ๋กœ Naver๋ž‘ Daum์— ์ž‘์„ฑ๋œ HTML์„ ๋ดค๋”๋‹ˆ ์—„~~์ฒญ ๊ธธ๊ณ  ๋ณต์žกํ•˜๋‹ค... ์ด๋Ÿฐ ๊ฑธ ๋‹ค๋ฃฐ ๋• ์ดˆ์žฅ๋ถ€ํ„ฐ ์ž˜ ์„ค๊ณ„ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฑธ ์ง๊ฐ์ ์œผ๋กœ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๊ฒŒ๋‹ค๊ฐ€ ๊ฒ€์ƒ‰์— ์œ ๋ฆฌํ•˜๊ฒŒ ๋…ธ์ถœ๋  ์ˆ˜ ์žˆ๋Š” ์š”์†Œ๋ฅผ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ, ์›น ์ ‘๊ทผ์„ฑ ๋“ฑ์„ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ์„ ํฌํ•จํ•˜๋ฉด HTML์„ semanticํ•˜๊ฒŒ ์ž‘์„ฑํ•ด์•ผ ํ•˜๋ฉฐ ๊ทธ ์ˆ˜์ค€์ด ๊ฝค ๊ณ ๋‚œ์ด๋„์ธ ๊ฒƒ์œผ๋กœ ๋ณด์ธ๋‹ค.


CSS

1. intro

HTML tag ์•ˆ์—์„œ <style> tag๋ฅผ ํ†ตํ•ด CSS ๋ฌธ๋ฒ•์ž„์„ HTML์— ์•Œ๋ฆฐ๋‹ค.
selector, property, property value ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.

2. selector

id๋Š” ์œ ์ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— id๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์‹๋ณ„์ด ๊ฐ€๋Šฅํ•˜๊ณ , class๋Š” gruopingํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ดํ•ดํ•˜๋ฉด ๋œ๋‹ค.
๋‘˜ ์‚ฌ ์‚ฌ์šฉํ•ด๋„ ๋˜์ง€๋งŒ class ์œ„์— id๋ฅผ ์–น์–ด์„œ ๋””์ž์ธํ•˜๋Š” ๊ฒƒ์ด ๋‚ซ๋‹ค.

CSS ์šฐ์„ ์ˆœ์œ„๋Š” inline > document.querySelector('id > class > tag')์ด๋‹ค.

์ฐธ๊ณ ๋กœ div tag๋Š” ๋‚ด๋ถ€ ํฌ๊ธฐ์— ๋”ฐ๋ผ size๊ฐ€ ๋‹ฌ๋ผ์ง€๋ฏ€๋กœ ๊ตณ์ด height๋ฅผ ์ฃผ์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

3. box-sizing: border-box;

4. display: flex;

  • justify-content : flex ์š”์†Œ๋“ค์„ ๊ฐ€๋กœ ์„  ์ƒ์— ์ •๋ ฌ
  • align-items : flex ์š”์†Œ๋“ค์„ ์„ธ๋กœ ์„  ์ƒ์— ์ •๋ ฌ
  • flex-direction : flex๋œ ์š”์†Œ๋“ค์˜ ์ •๋ ฌํ•  ๋ฐฉํ–ฅ ์ง€์ •
  • order : flex ์š”์†Œ์˜ ์ˆœ์„œ ์ง€์ •
  • align-self : ์ง€์ •๋œ align-items ๊ฐ’์„ ๋ฌด์‹œํ•˜๊ณ  flex ์š”์†Œ๋ฅผ ์„ธ๋กœ ์ƒ์— ์ •๋ ฌ
  • flex-wrap : flex ์š”์†Œ๋ฅผ ํ•œ ์ค„ ๋˜๋Š” ์—ฌ๋Ÿฌ ์ค„์— ์ •๋ ฌ
  • flex-flow : flex-wrap๊ณผ flex-direction์„ ๊ฐ„๋žตํžˆ ํ•œ ์†์„ฑ
  • align-content : ์„ธ๋กœ ์„  ์ƒ์— ์—ฌ๋ถ„์˜ ๊ณต๊ฐ„์ด ์žˆ๋Š” ๊ฒฝ์šฐ flex ์ปจํ…Œ์ด๋„ˆ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์กฐ์ •

+++

  • jsutify-content๋Š” ๋˜ํ•œ ์š”์†Œ๋“ค ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์ง€์ •ํ•˜๋ฉฐ ๋‹ค์Œ์˜ ์ธ์ž๋ฅผ ๋ฐ›์•„ ์ •๋ ฌ ๊ฐ€๋Šฅ

    • flex-start : default
    • flex-end
    • center
    • space-around
    • space-between
    • space-evenly
      ๋“ฑ
  • align-items๊ณผ ํ•จ๊ป˜ ๋‹ค์Œ์˜ ์ธ์ž๋ฅผ ๋ฐ›์•„ ์ •๋ ฌ ๊ฐ€๋Šฅ

    • flex-start
    • flex-end
    • center
    • baseline
    • stretch : default
      ๋“ฑ
  • flex-direction์„ ์‚ฌ์šฉํ•˜๋ฉด

    • row :default
    • row-reverse
    • column
    • column-reverse
      ๋“ฑ
  • order: 1; ๋“ฑ

  • flex-wrap์„ ์‚ฌ์šฉํ•˜๋ฉด

    • nowrap : default
    • wrap
    • wrap-reverse
  • flex-flow๋Š” flex-wrap๊ณผ flex-direction์„ ๊ฐ„๋žตํžˆ ํ•œ ์†์„ฑ

    • row wrap
    • column wrap
  • align-content๋Š” ์—ฌ๋Ÿฌ ์ค„ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์ง€์ •

    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch

Assignment #1

Q. Replit 01~12๊นŒ์ง€ ๋ฐฐ์šด ๋‚ด์šฉ ์ค‘ ๋†“์น˜๊ณ  ์ง€๋‚˜๊ฐ„ ๊ฐœ๋…์€ ์—†๋Š”์ง€, ๋ชจํ˜ธํ•˜๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์žˆ๋Š” ๋‚ด์šฉ์€ ์—†๋Š”์ง€ ํ™•์ธํ•˜์ž.

A-1. HTML
๏พ ๏พ ๏พ ๏พ  HTML ๋ฌธ๋ฒ•์€ ์ž‘์„ฑํ•  ๋•Œ ํฌ๊ฒŒ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜๋Š” ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ์–ด์„œ ํ•™์Šตํ•  ๋‹น์‹œ์—๋Š” 'HTML๋กœ ๊ตฌ์กฐ๋ฅผ ์ง ๋‹ค.'๋ผ๋Š” ๋ง์ด ์‰ฝ๊ฒŒ ๋‹ค๊ฐ€์™”๋‹ค. ํ•˜์ง€๋งŒ 2์ฃผ ์ฐจ์— ๋ฉ˜ํ† ๋‹˜์ด ์ง  HTML์„ ๋ณด๊ณ  ๊นจ๋‹ฌ์•˜๋‹ค. '๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ๋ด๋„ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด ๊ตฌ์กฐ, style์ด ๊ฐ€๋Šฅํ•œ ๊ตฌ์กฐ๋กœ ์งœ๋Š” ๊ฒŒ ์ด๋Ÿฐ ๊ฑฐ๊ตฌ๋‚˜.'ํ•˜๋Š” ๊ฐ์ด ์™”๋‹ค. ์ฒ˜์Œ์—” coding์˜ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๊ตฌํ˜„์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ, ๊ฒฐ๊ตญ ๊ตฌํ˜„์ด ์ตœ์šฐ์„ ์ผ์ง€๋ผ๋„ ๊ทธ๋Ÿฌํ•œ ๊ตฌํ˜„์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” code์˜ ํ’ˆ์งˆ ์—ญ์‹œ ๊ตฌํ˜„ ๋ชป์ง€ ์•Š๊ฒŒ ์ค‘์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•„๊ฐ€๊ณ  ์žˆ๋‹ค. ๋‚˜๋„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์—๊ฒŒ ๋‹น๋‹นํžˆ ๊ณต๊ฐœํ•  ์ˆ˜ ์žˆ๋Š” codef๋ฅผ ์งœ์•ผ ํ•  ํ…๋ฐ...

A-2. CSS
๏พ ๏พ ๏พ ๏พ  ์•„์ง coding์„ ๋งŽ์ด ํ•ด๋ณด์ง€๋Š” ์•Š์•˜์ง€๋งŒ, margin์ด๋‚˜ padding์ฒ˜๋Ÿผ image์˜ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ •์ง“๋Š” ์š”์†Œ๋ฅผ ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜์ง€ ๋ชปํ•ด ์‹œ๊ฐ„์„ ๋‚ญ๋น„ํ•˜๋Š” ์ƒํ™ฉ์ด ๋งŽ์•˜๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ƒ์†(๋ถ€๋ชจ-์ž์‹ ๊ด€๊ณ„)์„ ๋ช…ํ™•ํžˆ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๋ฉด ์™œ ๋‚ด๊ฐ€ ์˜๋„ํ•œ ๋Œ€๋กœ style์ด ์ ์šฉ๋˜์ง€ ์•Š๋Š”์ง€ ์ฐพ๋Š” ๋ฐ์— ํ•œ์ฐธ์ด ๊ฑธ๋ฆฐ๋‹ค. ๊ด€๋ จ ๊ฐœ๋…์„ ๋ฐ˜๋ณตํ•ด์„œ ์ตํžˆ๊ณ  ์ ์šฉํ•ด๋ด์•ผ๊ฒ ๋‹ค.


๐Ÿ™‡ the source of this content

{code club}
Khan Academy
์ƒํ™œ์ฝ”๋”ฉ - HTML
CSS ๋ ˆ์ด์•„์›ƒ์„ ๋ฐฐ์›์‹œ๋‹ค
๊ตฌ๊ธ€ ๊ฒ€์ƒ‰ ์„ผํ„ฐ
CSS Diner (selector)
Flexbox Froggy - level beginner

profile
๋Š๋ ค๋„ ํ•  ๊ฑฐ์•ผ.......

0๊ฐœ์˜ ๋Œ“๊ธ€