/woowa-html

πŸš€ μš°ν…Œμ½” 크루듀이 λ‹΄μ•„λ‚΄λŠ” 90년생 HTML의 이야기 Repository

Primary LanguageHTML

πŸš€ λ―Έμ…˜: 90년생 HTML μ†Œκ°œν•˜κΈ°

이번 λ―Έμ…˜μ˜ μ£Όμ œλŠ” λ°”λ‘œ 90년생 HTML을 주제둜 μ›ΉνŽ˜μ΄μ§€λ₯Ό μž‘μ„±ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. μž‘μ„±λ°©μ‹μ€ μžμœ μž…λ‹ˆλ‹€. 신문기사, λΈ”λ‘œκ·Έ, μœ„ν‚€λ°±κ³Ό 같은 사전 λ“± μ—¬λŸ¬κ°€μ§€ ν˜•νƒœλ‘œ 남길 μˆ˜λ„ μžˆμ„ν…λ°μš”. 본인이 μ›ν•˜λŠ” ν˜•νƒœλ‘œ μž‘μ„±ν•΄μ£Όμ‹œλ©΄ λ©λ‹ˆλ‹€. 90년생 HTML의 이야기λ₯Ό λ‹΄μ•„λ‚΄λ©΄μ„œ κΈ€, 링크, 사진, λ™μ˜μƒ, ꡬ독 메일 등을 담을 수 μžˆμ„ν…λ°μš”. κ·Έ κ³Όμ •μ—μ„œ ν•„μš”ν•œ HTML νƒœκ·Έλ“€μ„ MDN 링크λ₯Ό 톡해 직접 μ°Ύμ•„λ³΄μ‹œκΈΈ λ°”λžλ‹ˆλ‹€.


μ•ˆλ‚΄μ‚¬ν•­

  • μœ„ λ―Έμ…˜μ€ Repositoryμ—μ„œ 기쑴의 λ―Έμ…˜μ„ μ§„ν–‰ν•˜λ˜ 방식과 λ™μΌν•˜κ²Œ μ§„ν–‰ν•©λ‹ˆλ‹€.
  • PR을 보내면 @eastjun이 확인 ν›„ mergeν•  μ˜ˆμ •μž…λ‹ˆλ‹€.
  • λ§ˆκ°κΈ°ν•œμ€ 2020λ…„ 3μ›” 23μ›” μ›”μš”μΌ 23:59λΆ„ κΉŒμ§€μž…λ‹ˆλ‹€.
  • μž‘μ„±ν•œ html은 @eastjun이 μ›Ήν•Έλ“œλΆμœΌλ‘œ μ œμž‘ν•˜μ—¬ 배포할 μ˜ˆμ •μž…λ‹ˆλ‹€. 예쁘게 λ§Œλ“€ ν•„μš”λŠ” μ—†μ§€λ§Œ λ‚΄μš©μ— μ„±μ˜λ₯Ό λ³΄μ—¬μ£Όμ„Έμš” πŸ˜€

μš”κ΅¬μ‚¬ν•­

  • <html> <head> <title> <body> νƒœκ·Έλ₯Ό λ°˜λ“œμ‹œ ν¬ν•¨ν•œλ‹€.
  • <head> νƒœκ·Έ μ•ˆμ—λŠ” <meta charset="utf-8"> λ₯Ό μ‚½μž…ν•œλ‹€.
  • μœ„ 5개의 νƒœκ·Έλ₯Ό μ œμ™Έν•˜κ³  μ΅œμ†Œ 10개 μ΄μƒμ˜ νƒœκ·Έλ₯Ό μ΄μš©ν•œλ‹€.
  • 1개 μ΄μƒμ˜ 이미지 λ˜λŠ” λΉ„λ””μ˜€λ₯Ό μ‚½μž…ν•œλ‹€.
  • λŒ“κΈ€μ„ μž‘μ„±ν•˜λŠ” input λ˜λŠ” textarea νƒœκ·Έλ₯Ό μ‚¬μš©ν•œλ‹€. (μ‹€μ œ λ™μž‘ν•  ν•„μš”λŠ” μ—†μŒ)
  • μžμ‹ μ΄ μ‚¬μš©ν•œ νƒœκ·Έλ“€μ˜ κΈ°λŠ₯을 README.md에 μž‘μ„±ν•œλ‹€.

μ‚¬μš©ν•œ HTML νƒœκ·Έλ“€

  • <h1> ~ <h6>
    • 각 section의 제λͺ©μ„ λ‚˜νƒ€νƒœλŠ” νƒœκ·Έ
    • ν•˜λ‚˜μ˜ sectionλ‹Ή ν•˜λ‚˜μ˜ h1 νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λŠ” 것을 ꢌμž₯
    • 계측 ꡬ쑰에 맞게 μˆœμ„œλŒ€λ‘œ μž‘μ„±λ˜λŠ” 것이 μ’‹μŒ
  • <a>
    • ν…μŠ€νŠΈμ— 링크λ₯Ό μ„€μ •ν•˜λŠ” νƒœκ·Έ
    • target="_blankλ₯Ό μ‚¬μš©ν•˜λ©΄ 링크λ₯Ό μƒˆ 창으둜 λ„μšΈ 수 있음
  • <header>
    • λ„€λΉ„κ²Œμ΄μ…˜μ„ λ•κ±°λ‚˜ μ†Œκ°œλ₯Ό λ‚˜νƒ€λ‚΄λŠ” 그룹을 ν‘œν˜„
    • 일반적으둜 section의 제λͺ©μ„ ν‘œν˜„
  • <footer>
    • 주둜 μ €μž‘κΆŒ μ •λ³΄λ‚˜ μ„œλΉ„μŠ€ 제곡자 정보등을 λ‚˜νƒ€λƒ„
    • 주둜 μ‚¬μ΄νŠΈ ν•˜λ‹¨μ— μœ„μΉ˜
  • <ol>
    • μˆœμ„œκ°€ μžˆλŠ” λͺ©λ‘μ„ λ‚˜νƒ€λƒ„
    • <li> 속성을 ν¬ν•¨ν•˜κ³  있음
  • <li>
    • λͺ©λ‘ μ•„μ΄ν…œμ„ λ‚˜νƒ€λƒ„
    • λΆ€λͺ¨κ°€ <ol>이라면 μˆœμ„œκ°€ μžˆλŠ” λͺ©λ‘ μ•„μ΄ν…œ
    • λΆ€λͺ¨κ°€ <ul>라면 μˆœμ„œκ°€ μ—†λŠ” λͺ©λ‘ μ•„μ΄ν…œ
  • <section>
    • λ¬Έμ„œλ‚˜ μ‘μš©ν”„λ‘œκ·Έλž¨μ˜ 일반적인 section을 ν‘œν˜„
    • 제λͺ©μœΌλ‘œ μ‹œμž‘ν•˜λŠ” 컨텐츠λ₯Ό 의미적으둜 κ·Έλ£Ήν•‘ν•˜κΈ° μœ„ν•΄ μ‚¬μš©
  • <article>
    • λ¬Έμ„œλ‚΄μ˜ 독립적인 μ½˜ν…μΈ 
    • ν•˜λ‚˜μ˜ λ¬Έμ„œμ•ˆμ— μ—¬λŸ¬κ°œμ˜ article이 올 수 μžˆμŠ΅λ‹ˆλ‹€.
  • <nav>
    • λ‹€λ₯Έ νŽ˜μ΄μ§€λ‚˜ 같은 νŽ˜μ΄μ§€ μ•ˆμ— λ‹€λ₯Έ λΆ€λΆ„μœΌλ‘œ μ΄μ–΄μ£ΌλŠ” λ„€λΉ„κ²Œμ΄μ…˜ 링크둜 κ΅¬μ„±λœ section을 ν‘œν˜„
    • μ£Όμš” λ„€λΉ„κ²Œμ΄μ…˜ 블둝을 κ΅¬μ„±ν•˜λŠ” section
  • <textarea>
    • μ—¬λŸ¬μ€„μ˜ ν…μŠ€νŠΈλ₯Ό νŽΈμ§‘ν•  수 μžˆλŠ” μ»¨νŠΈλ‘€μ„ 생성

πŸ‘ Contributing

λ§Œμ•½ λ―Έμ…˜ μˆ˜ν–‰ 쀑에 κ°œμ„ μ‚¬ν•­μ΄ 보인닀면, μ–Έμ œλ“  자유둭게 PR을 λ³΄λ‚΄μ£Όμ„Έμš”.