๐Ÿ“–
Mini's Today I Learned
  • Today I Learned
  • ๐Ÿ’ปComputer Science
    • ๐ŸงฑComputer Science
      • Computer Architecture
    • ๐Ÿฆ•OperatingSystem
      • System Structure
      • 01. ์šด์˜์ฒด์ œ ์—ญํ• 
      • 02. History๋กœ ์ดํ•ดํ•˜๋Š” ์šด์˜์ฒด์ œ
      • 03. ์šด์˜์ฒด์ œ ๊ตฌ์กฐ
      • 04. ํ”„๋กœ์„ธ์Šค ์Šค์ผ€์ฅด๋ง
      • 05. ์Šค์ผ€์ฅด๋ง ์•Œ๊ณ ๋ฆฌ์ฆ˜
      • 06. ํ”„๋กœ์„ธ์Šค ์ƒํƒœ์™€ ์Šค์ผ€์ฅด๋Ÿฌ
      • 07. ์ธํ„ฐ๋ŸฝํŠธ
      • 08. ํ”„๋กœ์„ธ์Šค์™€ ์ปจํ…์ŠคํŠธ ์Šค์œ„์นญ
      • 09. ํ”„๋กœ์„ธ์Šค๊ฐ„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜(IPC ๊ธฐ๋ฒ•)
      • 10. Thread(์Šค๋ ˆ๋“œ)
      • 11. ๊ฐ€์ƒ๋ฉ”๋ชจ๋ฆฌ (Virtual Memory System)
      • 12. ํŒŒ์ผ์‹œ์Šคํ…œ ์ดํ•ด
      • 13. ๋ถ€ํŒ…์˜ ์ดํ•ด
      • 14. ๊ฐ€์ƒ๋จธ์‹ (Virtual Machine)
  • ๐Ÿ“ˆDatabase
    • MySQL CLI (Frequently used)
    • 1-Tier, 2Tier, 3Tier
    • Basic SQL
    • Built in function
    • Sub Query
    • View
    • Stored Program
    • index
    • Normalization(์ •๊ทœํ™”)
    • Transaction
    • Transaction
  • ๐ŸŒ Network
    • ๐Ÿ”Œ TCP&IP Basic
      • 01 TCP/IP ๋ง›๋ณด๊ธฐ
      • 02 TCP/IP ๊ฐœ์š”
      • 03 ํ†ต์‹  ์„œ๋น„์Šค์™€ ํ”„๋กœํ† ์ฝœ
      • 04 ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ณ„์ธต
      • 05 ํŠธ๋ Œ์ŠคํฌํŠธ ๊ณ„์ธต
      • 06 ๋„คํŠธ์›Œํฌ๊ณ„์ธต
      • 07 ๋ฐ์ดํ„ฐ ๊ณ„์ธต๊ณผ ๋ฌผ๋ฆฌ๊ณ„์ธต
      • 08 ๋ผ์šฐํŒ…
      • 09 ๋ณด์•ˆ
      • 10 HTTP ํ”„๋กœํ† ์ฝœ
    • ๐Ÿฟ๏ธHTTP ์™„๋ฒฝ ๊ฐ€์ด๋“œ ์š”์•ฝ
      • 1. HTTP: ์›น์˜ ๊ธฐ์ดˆ
      • 2. URL ๊ณผ ๋ฆฌ์†Œ์Šค
      • 3. HTTP Message
      • 4. Connection Management
      • 5. Overview of web server architectures
      • 6. Proxies
      • 7.Caching
      • 8. Integration Points: Gateways, Tunnels, and Relays
      • 9. Web Robots
      • 10. HTTP/2.0
      • 11. Client Identification and Cookies
      • 12. Basic Authentication
      • 13. Digest Authentication
      • 14. Secure HTTP
      • 15. Entities and Encodings
      • 16. Internationalization
      • 17. Content Negotiation and Transcoding
      • 18. Web Hosting
  • ๐ŸดLanguage
    • โ˜•JAVA
      • Comparable vs Comparator
  • ๐Ÿ› ๏ธ Framework
  • ๐ŸงฉDesign Pattern
    • ๊ฐ์ฒด ์ง€ํ–ฅ ์„ค๊ณ„ ์›์น™ (SOLID)
    • Design Pattern ๊ฐœ์š”
    • Template method
    • Singleton
  • ๐ŸฅFrontEnd
    • HTML&CSS
      • 01 Intro
      • 02 HTML Basic
      • 03 Content Section
      • 04 Block and Inline Elements
      • 05 Text Contents
      • 06 Inline Elements
      • 07 Multi Media
      • 08 Table&Form&etc
      • 09 Global Attribute & etc
      • 10 css basic
      • 11 css config
      • 12 css unit
      • 13 Box Model
      • 14 Font & Text
      • 15 Float(๋„์›€) & Position
      • 16 Background
      • 17 Transitions & Transforms
      • 18 Animation & Multi Columns(๋‹ค๋‹จ)
      • 19 Flex
      • 20 Grid
    • Sass(SCSS)
    • TypeScript
    • Webpack Introduction
      • ์›นํŒฉ์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ
      • CommonJS
      • ESM
      • WebpackConfig
        • 1. Handlebars
        • 2. Caching
        • 3. Minification & Mangling
        • 4. Mode(Development mode & Production Mode)
        • 5. ์ด๋ฏธ์ง€ ํŒŒ์ผ ๋ชจ๋“ˆ๋กœ ๋‹ค๋ฃจ์–ด๋ณด๊ธฐ(file-loader)
        • 6. ์ด๋ฏธ์ง€ ํŒŒ์ผ ๋ชจ๋“ˆ๋กœ ๋‹ค๋ฃจ์–ด๋ณด๊ธฐ(url-loader)
        • 7. SASS Loader
        • 8. Post CSS
        • 9. BLOWSERS LIST
        • 10. Stylelint
        • 11. Babel
      • Webpack-Practice
    • ETC
      • GIT
      • MarkDown
Powered by GitBook
On this page

Was this helpful?

  1. FrontEnd
  2. HTML&CSS

02 HTML Basic

Previous01 IntroNext03 Content Section

Last updated 4 years ago

Was this helpful?

  1. ํƒœ๊ทธ

    1. ์š”์†Œ(element): ์—ด๋ฆฌ๊ณ  ๋‹ซํžˆ๋Š” ํƒœ๊ทธ ๊ตฌ์กฐ(ํ•œ ์Œ)

    2. ๋‹ซํžˆ๋Š” ํƒœ๊ทธ ์ด๋ฆ„ ์•ž์— ์Šฌ๋ž˜์‹œ

    3. ๋นˆํƒœ๊ทธ(empty tag): ๋‹ซํžˆ๋Š” ํƒœ๊ทธ๊ฐ€ ์—†์Œ

      ์˜ˆ: <img />

    4. ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•˜๋˜, ํ˜ผ์šฉํ•˜์ง€ ๋ง๊ณ  ์‚ฌ์šฉ.

  2. ์†์„ฑ(Attribute)๊ณผ ๊ฐ’(Value)

    1. ํƒœ๊ทธ(์š”์†Œ) ์˜ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜๊ธฐ ์œ„ํ•ด '์†์„ฑ' ์‚ฌ์šฉ

       <TAG ์†์„ฑ = '๊ฐ’'></TAG>
    2. ํƒœ๊ทธ A ๊ฐ€ ํƒœ๊ทธ B์˜ ์ฝ˜ํ…์ธ ๋กœ ์‚ฌ์šฉ๋˜๋ฉด

      • ํƒœ๊ทธ B๋Š” ํƒœ๊ทธ A์˜ ๋ถ€๋ชจ์š”์†Œ

      • ํƒœ๊ทธ A๋Š” ํƒœ๊ทธ B์˜ ์ž์‹์š”์†Œ

        <B>
          <A></A>
        </B>
      • ๋ถ€๋ชจ์™€ ์ž์‹ ์š”์†Œ๋Š” ์ƒ๋Œ€์ ์ธ ๊ฐœ๋…

        • ์กฐ์ƒ์š”์†Œ: ๋ถ€๋ชจ์˜ ์ƒ์œ„ ์š”์†Œ

        • ๋ถ€๋ชจ์š”์†Œ

        • ์ž์‹์š”์†Œ

        • ํ›„์†์š”์†Œ: ์ž์‹์˜ ํ•˜์œ„ ์š”์†Œ

  3. HTML ๋ฌธ์„œ์˜ ๋ฒ”์œ„

     <!DOCTYPE html>
     <html>
         <head>
             ๋ฌธ์„œ์˜ ์ •๋ณด
         </head>
         <body>
             ๋ฌธ์„œ์˜ ๊ตฌ์กฐ
         </body>
     </html>
    1. html: ์ „์ฒด ๋ฒ”์œ„, ์›นํ”„๋ผ์šฐ์ €๊ฐ€ ํ•ด์„ํ•  ์‹œ์ž‘๊ณผ ๋์„ ์•Œ๋ ค์ค€๋‹ค.

    2. head: ๋ฌธ์„œ ์ •๋ณด ๋ฒ”์œ„, ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ์„ค์ •

      • title(๋ฌธ์„œ์ œ๋ชฉ)

      • meta(์›น ํŽ˜์ด์ง€ ์ •๋ณด)

        • charset: ๋ฌธ์ž ์ธ์ฝ”๋”ฉ ๋ฐฉ์‹(UTF-8)

        • name: ๊ฒ€์ƒ‰์—”์ง„ ๋“ฑ์— ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ์ •๋ณด ์ข…๋ฅ˜ (author, description ๋“ฑ)

        • content: name์ด๋‚˜ http-equiv ์†์„ฑ์˜ ๊ฐ’์„ ์ œ๊ณต

      • link: ์™ธ๋ถ€ css ํŒŒ์ผ ์—ฐ๊ฒฐ ์‹œ ์‚ฌ์šฉ, ๋นˆํƒœ๊ทธ

        • rel: ํ˜„์žฌ ๋ฌธ์„œ์™€ ์™ธ๋ถ€๋ฌธ์„œ๊ฐ„์˜ ๊ด€๊ณ„(stylesheet, icon..)

        • href: ์™ธ๋ถ€๋ฌธ์„œ์˜ ์œ„์น˜

      • style: html ๋‚ด๋ถ€์— css ์ž‘์„ฑํ•  ๋•Œ ์‚ฌ์šฉ

      • script: JS ์™ธ๋ถ€ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ค๊ฑฐ๋‚˜, ๋‚ด๋ถ€์— ์ž‘์„ฑํ•  ๋•Œ ์‚ฌ์šฉ

    3. body: ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด์„ํ•ด์•ผํ•  html ๋ฌธ์„œ ๊ตฌ์กฐ๋ฒ”์œ„, (์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๋Š” ๋‚ด์šฉ, ๋ ˆ์ด์•„์›ƒ๋“ฑ)

      • div(division): ๋ฌธ์„œ์˜ ๋ถ€๋ถ„์ด๋‚˜ ์„น์…˜ ์ •์˜, ๋‹จ์ˆœํžˆ wrap ์šฉ๋„

      • img : html์‚ฝ์ž… & css (background) ์‚ฝ์ž… ๊ฐ€๋Šฅ

    4. DOCTYPE(DTD): ๋งˆํฌ์—… ์–ธ์–ด ๋ฌธ์„œ ํ˜•์‹

  4. ์›น ํ‘œ์ค€ ๊ฒ€์‚ฌํ•˜๊ธฐ

    • ํ…Œ์ŠคํŠธ ํ†ต๊ณผ๊ฐ€ ์›นํ‘œ์ค€/์ ‘๊ทผ์„ฑ ์ค€์ˆ˜ ์—ฌ๋ถ€๋ฅผ ์ตœ์ • ๊ฒฐ์ •ํ•˜์ง€ ์•Š๋Š”๋‹ค.

      ๊ธฐ๋ณธ ๋ฌธ๋ฒ• ๊ฒ€์‚ฌ์— ๊ฐ€๊น๋‹ค.

๐Ÿฅ
W3C validator