λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
Mark Up/HTML

[HTML5]HTML ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ

by YJ Dev 2024. 5. 15.
728x90
λ°˜μ‘ν˜•
SMALL

ν…μŠ€νŠΈλŠ” μ›ΉνŽ˜μ΄μ§€μ—μ„œ κ°€μž₯ 기본적인 μš”μ†Œ 쀑 ν•˜λ‚˜μ΄λ©°, HTMLμ—μ„œλŠ” ν…μŠ€νŠΈλ₯Ό λ‹€λ£¨λŠ” λ‹€μ–‘ν•œ νƒœκ·Έλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” HTML의 μ£Όμš” ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έλ₯Ό μ†Œκ°œν•˜κ³  μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€.

≣ λͺ©μ°¨


    μ•„λž˜ ν¬μŠ€νŒ…μ„ μ°Έκ³ ν•˜μ—¬ CSS ν…μŠ€νŠΈ 속성을 ν™œμš©ν•˜μ—¬ ν…μŠ€νŠΈλ₯Ό μŠ€νƒ€μΌλ§ν•  수 μžˆμŠ΅λ‹ˆλ‹€βœ¨

     

    [CSS3]CSS ν…μŠ€νŠΈ μ†μ„±μœΌλ‘œ ν…μŠ€νŠΈ μŠ€νƒ€μΌλ§

    ν…μŠ€νŠΈ 속성은 μ›Ή νŽ˜μ΄μ§€μ˜ 가독성과 μ‹œκ°μ μΈ 맀λ ₯을 λ†’μ΄λŠ” 데 μ€‘μš”ν•œ 역할을 ν•©λ‹ˆλ‹€. 이 κΈ€μ—μ„œλŠ” CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ ν…μŠ€νŠΈλ₯Ό μŠ€νƒ€μΌλ§ν•˜κ³ , μ›Ήμ‚¬μ΄νŠΈμ˜ κ°€μ‹œμ„±μ„ ν–₯μƒν•˜λŠ” 방법에 λŒ€ν•΄ μ•Œμ•„λ³΄

    creativevista.tistory.com

     

    html ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ

    제λͺ© νƒœκ·Έ(Heading Tag)🀠

    제λͺ© νƒœκ·ΈλŠ” μ›ΉνŽ˜μ΄μ§€μ˜ 제λͺ©μ΄λ‚˜ μ†Œμ œλͺ©μ„ μ •μ˜ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.
    주둜 h1λΆ€ν„° h6κΉŒμ§€μ˜ νƒœκ·Έκ°€ 있으며, μˆ«μžκ°€ λ†’μ•„μ§ˆμˆ˜λ‘ 제λͺ©μ˜ 크기가 μž‘μ•„μ§‘λ‹ˆλ‹€. 이λ₯Ό 톡해 λ¬Έμ„œμ˜ ꡬ쑰λ₯Ό λͺ…ν™•νžˆ ν‘œν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
    검색 엔진은 νŽ˜μ΄μ§€μ˜ ν…μŠ€νŠΈλ₯Ό 탐색할 λ•Œ 주둜 hn νƒœκ·Έλ₯Ό ν™œμš©ν•©λ‹ˆλ‹€. λ”°λΌμ„œ νŽ˜μ΄μ§€μ˜ ν‚€μ›Œλ“œ μ΅œμ ν™”λ₯Ό μœ„ν•΄μ„œλŠ” λ³Έλ¬Έμ—μ„œ 핡심 λ‚΄μš©μ„ h1 νƒœκ·Έλ‘œ μ μ ˆν•˜κ²Œ λ§ˆν¬μ—…ν•΄μ•Ό ν•©λ‹ˆλ‹€. 그리고 h2, h3, h4, h5, h6 νƒœκ·Έλ₯Ό ν™œμš©ν•  λ•ŒλŠ” κ±΄λ„ˆλ›°μ§€ 말고 μ—°μ†μ μœΌλ‘œ μ‚¬μš©ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. 검색 엔진은 순차적으둜 h1 νƒœκ·ΈλΆ€ν„° νƒμƒ‰ν•˜λ©°, h4 νƒœκ·Έλ₯Ό κ±΄λ„ˆλ›°λŠ” 경우 ν•΄λ‹Ή νŽ˜μ΄μ§€μ˜ 정보λ₯Ό 놓칠 수 μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ hn νƒœκ·Έλ₯Ό μ‚¬μš©ν•  λ•Œμ—λŠ” 번호λ₯Ό κ±΄λ„ˆλ›°μ§€ 말고 h1 νƒœκ·ΈλΆ€ν„° μ‹œμž‘ν•˜μ—¬ μ°¨λ‘€λŒ€λ‘œ ν™œμš©ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€.

    <h1>제λͺ© 1</h1>
    <h2>μ†Œμ œλͺ© 1</h2>
    <h3>μ†Œμ œλͺ© 2</h3>

    hn νƒœκ·Έ


    예λ₯Ό λ“€μ–΄ μœ„μ˜ μ˜ˆμ œμ—μ„œλŠ” h1 νƒœκ·Έκ°€ κ°€μž₯ 큰 제λͺ©μ„ ν‘œν˜„ν•˜κ³  있고, h2, h3 νƒœκ·ΈλŠ” κ·Έ λ°‘μ˜ μ†Œμ œλͺ©μ„ ν‘œν˜„ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. νŽ˜μ΄μ§€μ˜ ꡬ쑰λ₯Ό λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ μ ˆν•œ 제λͺ© νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€.

    단락 νƒœκ·Έ(Paragraph Tag)πŸ‘₯

    단락 νƒœκ·ΈλŠ” μ›ΉνŽ˜μ΄μ§€μ—μ„œ ν…μŠ€νŠΈλ₯Ό λ‹¨λ½μœΌλ‘œ λ‚˜λˆ„λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.
    <p>와 </p> 사이에 μžˆλŠ” ν…μŠ€νŠΈλŠ” ν•˜λ‚˜μ˜ λ‹¨λ½μœΌλ‘œ μ²˜λ¦¬λ©λ‹ˆλ‹€. 이 νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ 본문을 κ΅¬μ„±ν•˜κ³  각각의 μ£Όμ œλ‚˜ 아이디어λ₯Ό λΆ„λ¦¬ν•˜μ—¬ ν‘œν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    <p>μ›Ή νŽ˜μ΄μ§€λ₯Ό λ””μžμΈν•˜κ³  μ½˜ν…μΈ λ₯Ό μ œκ³΅ν•˜λŠ” 것은 μ€‘μš”ν•œ κ³Όμ •μž…λ‹ˆλ‹€. HTML을 μ‚¬μš©ν•˜μ—¬ μ μ ˆν•œ ꡬ쑰둜 ν…μŠ€νŠΈλ₯Ό λ°°μΉ˜ν•˜κ³  단락을 λ‚˜λˆ„λŠ” 것이 쒋은 μ›Ή λ””μžμΈμ˜ ν•΅μ‹¬μž…λ‹ˆλ‹€.</p>
    
    <p>단락 νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λ©΄ μ›Ή νŽ˜μ΄μ§€λ₯Ό 읽기 쉽고 μ΄ν•΄ν•˜κΈ° μ‰½κ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. 각각의 μ£Όμ œλ‚˜ λ‚΄μš©μ„ λΆ„λ¦¬ν•˜μ—¬ ν‘œν˜„ν•¨μœΌλ‘œμ¨ λ…μžλ“€μ΄ μ½˜ν…μΈ λ₯Ό μ‰½κ²Œ μŠ΅λ“ν•  수 μžˆμŠ΅λ‹ˆλ‹€.</p>

    pνƒœκ·Έ


    예λ₯Ό λ“€μ–΄ μœ„μ˜ μ˜ˆμ œμ—μ„œ 두 개의 단락이 <p>와 </p>둜 κ΅¬λΆ„λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. μ΄λ ‡κ²Œ 단락을 λ‚˜λˆ„λ©΄ μ½˜ν…μΈ κ°€ 보닀 κ΅¬μ‘°ν™”λ˜μ–΄ μžˆμ–΄μ„œ λ…μžκ°€ 읽기 쉽고 μ΄ν•΄ν•˜κΈ° μ‰½μŠ΅λ‹ˆλ‹€.

    쀄 λ°”κΏˆ νƒœκ·Έ(Link Break Tag)πŸƒ‍♀️

    μ€„λ°”κΏˆ νƒœκ·ΈλŠ” HTMLμ—μ„œ 쀄을 λ°”κΏ€ λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€. 주둜 단락 λ‚΄μ—μ„œ 쀄을 λ°”κΏ€ λ•Œλ‚˜ κ°„λ‹¨ν•œ 쀄 λ°”κΏˆμ„ ν‘œν˜„ν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€. <br> νƒœκ·ΈλŠ” μ‹œμž‘ νƒœκ·Έμ™€ μ’…λ£Œ νƒœκ·Έκ°€ μ—†λŠ” 빈 νƒœκ·Έμž…λ‹ˆλ‹€.

    <p>첫 번째 쀄<br>두 번째 쀄</p>

    brνƒœκ·Έ


    μœ„μ˜ μ˜ˆμ œμ—μ„œλŠ” <p> νƒœκ·Έ μ•ˆμ— 두 개의 쀄이 ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. <br> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ 첫 번째 쀄과 두 번째 쀄을 κ΅¬λΆ„ν•˜κ³ , 이둜써 두 쀄이 λ”°λ‘œ 좜λ ₯λ©λ‹ˆλ‹€.

    λ˜ν•œ HTMLμ—μ„œλŠ” 곡백이 μ—°μ†μœΌλ‘œ λ‚˜νƒ€λ‚˜λ„ ν•˜λ‚˜μ˜ 곡백으둜 μ²˜λ¦¬λ˜λ―€λ‘œ, <br> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ μ—¬λŸ¬μ€„μ„ λ°”κΎΈλŠ” 효과λ₯Ό 얻을 수 μžˆμŠ΅λ‹ˆλ‹€.

    <p>첫 번째 쀄<br><br><br>λ„€ 번째 쀄</p>

    brνƒœκ·Έ


    μœ„μ˜ μ˜ˆμ œμ—μ„œλŠ” μ„Έ 개의 곡백 라인이 μΆ”κ°€λ˜μ–΄ 있으며, μ΄λŠ” μ„Έ 번의 μ€„λ°”κΏˆμ„ λ‚˜νƒ€λƒ…λ‹ˆλ‹€.

    μˆ˜ν‰ 쀄 νƒœκ·Έ(Horizontal Rule Tag)πŸ“

    μˆ˜ν‰μ€„ νƒœκ·Έ <hr> λŠ” HTMLμ—μ„œ κ°€λ‘œλ‘œ μˆ˜ν‰μ„ μ„ κ·Έλ¦¬λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. Horizontal Rule의 약어인 <hr>은 단락 κ°„μ˜ κ΅¬λΆ„μ΄λ‚˜ 주제 변경을 λ‚˜νƒ€λ‚΄λŠ” λ“± λ‹€μ–‘ν•œ μš©λ„λ‘œ ν™œμš©λ©λ‹ˆλ‹€.
    μˆ˜ν‰μ„ μ€ 주둜 λ‹€μŒκ³Ό 같은 κ²½μš°μ— μ‚¬μš©λ©λ‹ˆλ‹€.

    1. 단락 κ°„μ˜ μ‹œκ°μ μΈ ꡬ뢄: κΈ€μ˜ λ‚΄μš©μ΄ λ°”λ€” λ–„ 단락 간에 μˆ˜ν‰μ„ μ„ μ‚¬μš©ν•˜μ—¬ μ‹œκ°μ μΈ ꡬ뢄을 λ§Œλ“€μ–΄ μ€λ‹ˆλ‹€.
    2. 주제 λ³€κ²½: μ›Ή νŽ˜μ΄μ§€μ—μ„œ λ‹€λ₯Έ 주제둜 λ„˜μ–΄κ°ˆ λ•Œ, 각 주제 간에 μˆ˜ν‰μ„ μ„ μ‚¬μš©ν•˜μ—¬ λͺ…ν™•ν•œ ꡬ뢄을 μ œκ³΅ν•©λ‹ˆλ‹€.
    3. κΈ€μ˜ ꡬ쑰화: κΈ΄ λ¬Έμ„œμ—μ„œ μ„Ήμ…˜ κ°„μ˜ ꡬ뢄을 λͺ…ν™•ν•˜κ²Œ ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ©λ‹ˆλ‹€.

    <hr> νƒœκ·ΈλŠ” λ³„λ„μ˜ λ‹«λŠ” νƒœκ·Έκ°€ 없이 단일 νƒœκ·Έλ‘œ μ‚¬μš©λ©λ‹ˆλ‹€. λ”°λΌμ„œ λ‹¨μˆœνžˆ <hr>만 μž‘μ„±ν•˜λ©΄ μˆ˜ν‰μ„ μ΄ μƒμ„±λ©λ‹ˆλ‹€.

    <h1>HTML μˆ˜ν‰μ„  νƒœκ·Έ 예제</h1>
        
        <p>첫 번째 λ‹¨λ½μž…λ‹ˆλ‹€.</p>
        <hr>
        <p>μˆ˜ν‰μ„ μœΌλ‘œ κ΅¬λΆ„λœ 두 번째 λ‹¨λ½μž…λ‹ˆλ‹€.</p>
        
        <p>λ‹€λ₯Έ λ‹¨λ½μž…λ‹ˆλ‹€.</p>
        <hr>

    hr νƒœκ·Έ

    인용문 νƒœκ·Έ(Blockquote Tag), (q Tag)πŸ“–

    μΈμš©λ¬Έμ„ ν‘œμ‹œν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” HTML νƒœκ·Έμ—λŠ” <q> νƒœκ·Έμ™€ <blockquote> νƒœκ·Έκ°€ μžˆμŠ΅λ‹ˆλ‹€.
    β–Ά<blockquote>: κΈ΄ μΈμš©λ¬Έμ„ ν‘œν˜„ν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€. 이 νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λ©΄ 인용된 ν…μŠ€νŠΈκ°€ λ“€μ—¬ μ“°κΈ° λ˜μ–΄ μ‹œκ°μ μœΌλ‘œ κ΅¬λΆ„λ©λ‹ˆλ‹€. 보톡 인용된 ν…μŠ€νŠΈμ˜ μ‹œμž‘κ³Ό 끝에 <blockquote>와 </blockquote> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ ν‘œμ‹œν•©λ‹ˆλ‹€. 인용문이 μΆœμ²˜κ°€ λͺ…ν™•ν•œ 경우, cite 속성을 μ‚¬μš©ν•˜μ—¬ 좜처 경둜λ₯Ό λͺ…μ‹œν•΄μ•Ό ν•©λ‹ˆλ‹€. λ˜ν•œ , <blockquote> νƒœκ·Έ μ•ˆμ—λŠ” λ°˜λ“œμ‹œ 1개 μ΄μƒμ˜ <p> νƒœκ·Έλ₯Ό 포함해야 ν•©λ‹ˆλ‹€.
    μ•„λž˜ μ˜ˆμ œμ—μ„œ <p> </p> νƒœκ·Έμ™€ <blockquote> </blockquote> νƒœκ·Έ μ•ˆμ˜ λ™μΌν•œ λ‚΄μš©μ„ μž‘μ„±ν–ˆμ§€λ§Œ<blockquote> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λ©΄ 내뢀에 μžˆλŠ” ν…μŠ€νŠΈλŠ” 인용문으둜 κ°„μ£Όλ˜λ©° λΈŒλΌμš°μ €μ—μ„œλŠ” 일반 ν…μŠ€νŠΈμ™€λŠ” λ‹€λ₯΄κ²Œ λ“€μ—¬ μ“°κΈ°κ°€ μ μš©λ©λ‹ˆλ‹€.

    <h1>인용문</h1>
        <p>blockquote : κΈ΄ μΈμš©λ¬Έμ„ λ‚˜νƒ€λ‚Ό λ•Œ μ‚¬μš©ν•˜λŠ” νƒœκ·Έ, λ“€μ—¬μ“°κΈ°</p>
        <blockquote>
          blockquote : κΈ΄ μΈμš©λ¬Έμ„ λ‚˜νƒ€λ‚Ό λ•Œ μ‚¬μš©ν•˜λŠ” νƒœκ·Έ, λ“€μ—¬μ“°κΈ°
        </blockquote>

    blockquote νƒœκ·Έ


    이 μ˜ˆμ œμ—μ„œλŠ” "https://example.com/quote-source"λ₯Ό 좜처둜 μ§€μ •ν•˜μ—¬ 인용된 ν…μŠ€νŠΈμ˜ 좜처λ₯Ό λͺ…μ‹œν•˜κ³ , λ“€μ—¬ μ“°κΈ°λœ 두 개의 문단을 ν¬ν•¨ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

    <blockquote cite="https://example.com/quote-source">
      <p>인용된 ν…μŠ€νŠΈκ°€ λ“€μ—¬ μ“°κΈ°λ˜μ–΄ μ‹œκ°μ μœΌλ‘œ κ΅¬λΆ„λ©λ‹ˆλ‹€.</p>
      <p>이 νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λ©΄ κΈ΄ μΈμš©λ¬Έμ„ ν‘œν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.</p>
    </blockquote>


    β–Ά<q>: 짧은 μΈμš©λ¬Έμ„ ν‘œμ‹œν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€. λΈŒλΌμš°μ €λŠ” 이 νƒœκ·Έ λ‚΄μ˜ ν…μŠ€νŠΈλ₯Ό 인용 λΆ€λΆ„μœΌλ‘œ μ²˜λ¦¬ν•˜κ³ , 기본적으둜 λ”°μ˜΄ν‘œλ₯Ό κ°μ‹Έμ„œ ν‘œμ‹œν•©λ‹ˆλ‹€. 인용 뢀뢄이 μ‹œκ°μ μœΌλ‘œ κ°•μ‘°λ˜μ–΄ ν…μŠ€νŠΈ λ‚΄μš©κ³Ό κ΅¬λ³„λ©λ‹ˆλ‹€. 주둜 인라인으둜 μ‚¬μš©λ©λ‹ˆλ‹€.
    인용된 ν…μŠ€νŠΈμ˜ μ‹œμž‘κ³Ό 끝에<q>와</q>νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ ν‘œμ‹œν•©λ‹ˆλ‹€.

    <p>λ‹€μŒμ€ <q>짧은 인용문</q>μž…λ‹ˆλ‹€.</p>

    qνƒœκ·Έ

    ν‚€λ³΄λ“œ κ°’ κ·ΈλŒ€λ‘œ ν‘œν˜„ νƒœκ·Έ(Preformatted Text Tag)πŸ‘©‍πŸ’»

    ν‚€λ³΄λ“œ κ°’ κ·ΈλŒ€λ‘œ ν‘œν˜„ν•˜λŠ” νƒœκ·ΈλŠ” <pre> νƒœκ·Έμž…λ‹ˆλ‹€. 이 νƒœκ·ΈλŠ” κ·Έ μ•ˆμ˜ λ‚΄μš©μ„ 곡백과 쀄 λ°”κΏˆμ„ κ·ΈλŒ€λ‘œ μœ μ§€ν•˜μ—¬ ν‘œμ‹œν•©λ‹ˆλ‹€. 주둜 μ†ŒμŠ€ μ½”λ“œ, ν‚€λ³΄λ“œλ‘œ μž…λ ₯된 λͺ…λ Ήμ–΄, 미리 μ„œμ‹μ΄ 적용된 ν…μŠ€νŠΈ 등을 ν‘œμ‹œν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€.
    예λ₯Ό λ“€μ–΄, λ‹€μŒκ³Ό 같은 HTML μ½”λ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ ν‚€λ³΄λ“œ 값을 κ·ΈλŒ€λ‘œ ν‘œν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    <pre>
        곡    λ°±μ΄λ‚˜ 
        쀄 λ°”κΏˆ 등이
        κ·Έ          λŒ€        둜
        ν‘œν˜„λ˜μ–΄μ§€λŠ” 
        νƒœκ·Έ
    </pre>

    pre νƒœκ·Έ

    κ°•μ‘° νƒœκ·Έ(Inline Tag)와 μ€‘μš” λΆ€λΆ„ κ°•μ‘° νƒœκ·Έ(Mark Tag)✨

    HTMLμ—μ„œλŠ” ν…μŠ€νŠΈλ₯Ό μ‹œκ°μ μœΌλ‘œ κ°•μ‘°ν•˜κΈ° μœ„ν•΄ λ‹€μ–‘ν•œ νƒœκ·Έλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. μ΄μ—λŠ” <strong>, <b>, <em>, <i>, <mark> 등이 ν¬ν•¨λ©λ‹ˆλ‹€. 이 쀑, HTML5μ—μ„œλŠ” 의미λ₯Ό 더 λͺ…ν™•ν•˜κ²Œ μ „λ‹¬ν•˜κΈ° μœ„ν•΄ <strong>κ³Ό <em> νƒœκ·Έλ₯Ό ꢌμž₯ν•©λ‹ˆλ‹€. <b>와 <i> νƒœκ·ΈλŠ” μŠ€νƒ€μΌμ„ μ μš©ν•˜λŠ” μš©λ„λ‘œ μ‚¬μš©ν•  수 μžˆμ§€λ§Œ, 의미둠적인 λͺ©μ μ€ λ–¨μ–΄μ§‘λ‹ˆλ‹€. λ˜ν•œ, <strong>, <b>, <em>, <i> νƒœκ·ΈλŠ” μ€‘μ²©ν•˜μ—¬ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” ν…μŠ€νŠΈλ₯Ό 더 κ°•μ‘°ν•˜κ±°λ‚˜ νŠΉμ • 뢀뢄을 λΆ€κ°μ‹œν‚€κΈ° μœ„ν•΄ μœ μš©ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ 쀑첩을 μ‚¬μš©ν•  λ•Œμ—λŠ” 각 νƒœκ·Έμ˜ 의미λ₯Ό λͺ…ν™•νžˆ μ΄ν•΄ν•˜κ³  μ‚¬μš©ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€.

    β–Ά <strong>: ν…μŠ€νŠΈλ₯Ό ꡡ게 κ°•μ‘°, 의미적(ꡬ쑰적)으둜 μ€‘μš”ν•œ ν…μŠ€νŠΈλ₯Ό λ‚˜νƒ€λ‚΄λŠ” 데 μ‚¬μš©
    β–Ά<b>: ν…μŠ€νŠΈλ₯Ό ꡡ게 κ°•μ‘°, μ‹œκ°μ μœΌλ‘œ μ€‘μš”ν•œ ν…μŠ€νŠΈλ₯Ό λ‚˜νƒ€λ‚΄λŠ” 데 μ‚¬μš©

    β–Ά<em>: μ΄νƒ€λ¦­μ²΄λ‘œ κ°•μ‘°, μ£Όμœ„ ν…μŠ€νŠΈμ— λΉ„ν•΄ κ°•μ‘°λœ λΆ€λΆ„μ΄λ‚˜ μ €μžμ˜ 생각을 λ‚˜νƒ€λ‚΄λŠ” 데 μ‚¬μš©

    β–Ά<i>: μ΄νƒ€λ¦­μ²΄λ‘œ κ°•μ‘°, λ‹¨μˆœνžˆ ν…μŠ€νŠΈλ₯Ό μ΄νƒ€λ¦­μ²΄λ‘œ ν‘œμ‹œν•  λ•Œ μ‚¬μš©

    β–Ά<mark>: ν…μŠ€νŠΈλ₯Ό ν˜•κ΄‘νŽœμœΌλ‘œ κ°•μ‘°ν•œ κ²ƒμ²˜λŸΌ ν‘œμ‹œ, μ€‘μš”ν•œ 뢀뢄을 κ°•μ‘°ν•  λ•Œ μ‚¬μš©

    <p>HTML ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ λ‹€μŒκ³Ό 같이 ν…μŠ€νŠΈλ₯Ό κ°•μ‘°ν•  수 μžˆμŠ΅λ‹ˆλ‹€:</p>
    
    <p>λ‹€μŒμ€ <strong>의미적으둜 μ€‘μš”ν•œ</strong> ν…μŠ€νŠΈμž…λ‹ˆλ‹€.</p>
    
    <p>이 뢀뢄은 <b>μ‹œκ°μ μœΌλ‘œ μ€‘μš”ν•œ</b> ν…μŠ€νŠΈμž…λ‹ˆλ‹€.</p>
    
    <p>이 λ¬Έμž₯은 <em>κ°•μ‘°λ˜μ–΄ μžˆμ§€ μ•Šμ€ λΆ€λΆ„</em>이고, <em>이 뢀뢄은 κ°•μ‘°λœ</em> ν…μŠ€νŠΈμž…λ‹ˆλ‹€.</p>
    
    <p>이 뢀뢄은 <i>μ΄νƒ€λ¦­μ²΄λ‘œ ν‘œμ‹œλœ</i> ν…μŠ€νŠΈμž…λ‹ˆλ‹€.</p>
    
    <p>νŠΉλ³„νžˆ μ€‘μš”ν•œ 뢀뢄은 <mark>ν˜•κ΄‘νŽœμœΌλ‘œ ν‘œμ‹œλœ</mark> ν…μŠ€νŠΈμž…λ‹ˆλ‹€.</p>

    κ°•μ‘°νƒœκ·Έ


    μœ„μ˜ μ˜ˆμ œλŠ” 각각의 κ°•μ‘° νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ ν…μŠ€νŠΈλ₯Ό κ°•μ‘°ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. <strong>κ³Ό <b>λŠ” ν…μŠ€νŠΈλ₯Ό ꡡ게 ν‘œμ‹œν•˜λ©°, <em>κ³Ό <i>λŠ” ν…μŠ€νŠΈλ₯Ό μ΄νƒ€λ¦­μ²΄λ‘œ ν‘œμ‹œν•©λ‹ˆλ‹€. <mark>λŠ” ν˜•κ΄‘νŽœμœΌλ‘œ ν…μŠ€νŠΈλ₯Ό κ°•μ‘°ν•©λ‹ˆλ‹€.

    μŠ€νƒ€μΌ 지정 νƒœκ·Έ(Span Tag)πŸ‘’

    <span> νƒœκ·ΈλŠ” νŠΉμ • λΆ€λΆ„μ˜ ν…μŠ€νŠΈμ— μŠ€νƒ€μΌμ„ μ μš©ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ©λ‹ˆλ‹€. 이 νƒœκ·ΈλŠ” 주둜 ν…μŠ€νŠΈμ˜ 일뢀λ₯Ό κ°•μ‘°ν•˜κ±°λ‚˜ μŠ€νƒ€μΌμ„ λ³€κ²½ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. <span> νƒœκ·ΈλŠ” 블둝 μš”μ†Œκ°€ μ•„λ‹Œ 인라인 μš”μ†Œλ‘œ, μ£Όλ³€ ν…μŠ€νŠΈμ— 영ν–₯을 λ―ΈμΉ˜μ§€ μ•Šκ³  μŠ€νƒ€μΌμ„ μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, λ‹€μŒμ€ <span> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ ν…μŠ€νŠΈλ₯Ό λΉ¨κ°„μƒ‰μœΌλ‘œ κ°•μ‘°ν•˜λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

    <p>이 λ¬Έμž₯μ—μ„œ <span style="color: red;">νŠΉμ • λΆ€λΆ„</span>μ—λ§Œ 색상을 μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.</p>

    span νƒœκ·Έ

    λ™μ•„μ‹œμ•„ κΈ€μž ν‘œν˜„ νƒœκ·Έ(Ruby Tag)πŸ‘™

    λ™μ•„μ‹œμ•„ κΈ€μž ν‘œν˜„μ„ μœ„ν•œ νƒœκ·ΈμΈ <ruby>λŠ” 주둜 λ™μ•„μ‹œμ•„ κ΅­κ°€λ“€μ˜ κΈ€μž ν‘œν˜„κ³Ό ν•¨κ»˜ λ°œμŒμ„ ν‘œκΈ°ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ©λ‹ˆλ‹€. 주둜 ν•œμžλ₯Ό ν•¨κ»˜ ν‘œκΈ°ν•  λ•Œ μ‚¬μš©λ˜λ©°, ν•œμžμ˜ λ°œμŒμ΄λ‚˜ 해석을 ν‘œκΈ°ν•˜λŠ” 데 ν™œμš©λ©λ‹ˆλ‹€. <ruby> νƒœκ·Έ μ•ˆμ—λŠ” λ‹€μŒκ³Ό 같은 두 가지 μš”μ†Œκ°€ ν¬ν•¨λ©λ‹ˆλ‹€.

    1. <rt>: 주둜 ν…μŠ€νŠΈμ˜ λ°œμŒμ΄λ‚˜ 해석을 λ‚˜νƒ€λƒ…λ‹ˆλ‹€. 이 뢀뢄은 주둜 λ™μ•„μ‹œμ•„ κΈ€μžμ˜ λ°œμŒμ„ ν‘œκΈ°ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.
    2. <rp>: Ruby μ£Όμ„μ˜ μ‹œμž‘κ³Ό 끝을 μ§€μ •ν•©λ‹ˆλ‹€. <rp> μš”μ†ŒλŠ” λΈŒλΌμš°μ €κ°€ <ruby>λ₯Ό μ§€μ›ν•˜μ§€ μ•Šμ„ λ•Œ λŒ€μ²΄λ˜λŠ” ν…μŠ€νŠΈλ₯Ό μ§€μ •ν•©λ‹ˆλ‹€.

    일반적으둜 <ruby> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ μ£Όμš” ν…μŠ€νŠΈ μœ„μ— μž‘μ€ κΈ€μžλ‘œ ν•œμžμ˜ λ°œμŒμ΄λ‚˜ 해석을 ν‘œκΈ°ν•©λ‹ˆλ‹€. 이것은 주둜 μΌλ³Έμ–΄μ—μ„œ κ°€μž₯ 널리 μ‚¬μš©λ˜λ©°, 쀑ꡭ어와 ν•œκ΅­μ–΄μ—μ„œλ„ μ‚¬μš©λ  수 μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, λ‹€μŒμ€ <ruby> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ λ™μ•„μ‹œμ•„ κΈ€μžμ™€ κ·Έ λ°œμŒμ„ ν•¨κ»˜ ν‘œμ‹œν•˜λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

    <ruby>
      ιŸ“εœ‹ <rp>(</rp><rt>ν•œκ΅­</rt><rp>)</rp>
    </ruby>

    ruby νƒœκ·Έ


    ν•œκ΅­μ΄λΌλŠ” ν•œκΈ€ ν…μŠ€νŠΈ μœ„μ— ιŸ“εœ‹μ΄λΌλŠ” ν•œμžμ™€ κ·Έ 발음 ν•œκ΅­μ„ ν•¨κ»˜ ν‘œμ‹œν•©λ‹ˆλ‹€.

    μ·¨μ†Œμ„  및 밑쀄 νƒœκ·Έ(Strike Through and Underline Tag)✍

    μ·¨μ†Œμ„  및 밑쀄을 λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ HTMLμ—μ„œλŠ” <del> 및 <ins> νƒœκ·Έλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. μ΄λŸ¬ν•œ νƒœκ·Έλ“€μ€ λ¬Έμ„œμ—μ„œ ν…μŠ€νŠΈκ°€ μˆ˜μ •λ˜μ—ˆμŒμ„ λͺ…ν™•ν•˜κ²Œ ν‘œμ‹œν•˜κ³ , μ‚¬μš©μžμ—κ²Œ λ³€κ²½λœ λ‚΄μš©μ„ μ‹œκ°μ μœΌλ‘œ μ „λ‹¬ν•˜λŠ” 데 도움이 λ©λ‹ˆλ‹€.

    β–Ά
    <del>: λ¬Έμ„œμ—μ„œ μ‚­μ œλœ ν…μŠ€νŠΈλ₯Ό λ‚˜νƒ€λƒ„,μ·¨μ†Œμ„ μ΄ κ·Έμ–΄μ§€λŠ” 효과

    β–Ά<ins>: λ¬Έμ„œμ— μΆ”κ°€λœ ν…μŠ€νŠΈλ₯Ό λ‚˜νƒ€λƒ„,밑쀄이 κ·Έμ–΄μ§€λŠ” 효과

    예λ₯Ό λ“€μ–΄, 이전 ν…μŠ€νŠΈλ₯Ό μ·¨μ†Œμ„ μœΌλ‘œ ν‘œμ‹œν•˜κ³ , μƒˆλ‘œμš΄ ν…μŠ€νŠΈλ₯Ό λ°‘μ€„λ‘œ ν‘œμ‹œν•˜λ €λ©΄ λ‹€μŒκ³Ό 같이 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    <p><del>이전 ν…μŠ€νŠΈ</del></p>
    <p><ins>μƒˆλ‘œμš΄ ν…μŠ€νŠΈ</ins></p>

    delνƒœκ·Έ insνƒœκ·Έ

    μœ„μ²¨μž 및 μ•„λž˜μ²¨μž νƒœκ·Έ(Superscript and Subscript Tag)🎏

    μœ„μ²¨μžμ™€ μ•„λž˜μ²¨μžλ₯Ό νƒ€λ‚˜λ‚΄κΈ° μœ„ν•΄μ„œλŠ” <sup>와 <sub> νƒœκ·Έλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

    β–Ά<sup>: κΈ€μžμ˜ μœ„λ‘œ μ˜¬λΌκ°€λŠ” μœ„μ²¨μžλ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€. 일반적으둜 ν™”ν•™μ‹μ΄λ‚˜ μˆ˜ν•™μ‹μ—μ„œ μ‚¬μš©λ˜λ©°, μ§€μˆ˜λ₯Ό ν‘œν˜„ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.

    β–Ά<sub>: κΈ€μžμ˜ μ•„λž˜λ‘œ λ‚΄λ €κ°€λŠ” μ•„λž˜μ²¨μžλ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€. 일반적으둜 ν™”ν•™μ‹μ΄λ‚˜ μˆ˜ν•™μ‹μ—μ„œ μ‚¬μš©λ˜λ©°, 첨자λ₯Ό ν‘œν˜„ν•˜λŠ”λ° 자주 μ‚¬μš©λ©λ‹ˆλ‹€.

    예λ₯Ό λ“€μ–΄, Hβ‚‚O와 같은 화학식을 λ‚˜νƒ€λ‚΄λ €λ©΄ λ‹€μŒκ³Ό 같이 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    <p>화학식: H<sub>2</sub>O</p>

    sub νƒœκ·Έ

    특수 문자 ν‘œν˜„ νƒœκ·Έ

    특수 문자 ν‘œν˜„μ„ μœ„ν•΄ HTMLμ—μ„œλŠ” μ—”ν‹°ν‹°(Entity)λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. μ—”ν‹°ν‹°λŠ” μ˜ˆμ•½λœ 문자λ₯Ό λ‚˜νƒ€λ‚΄λŠ” 데 μ‚¬μš©λ˜λ©°, 특수 λ¬Έμžλ‚˜ μ˜ˆμ•½ 문자λ₯Ό ν‘œν˜„ν•  λ•Œ μœ μš©ν•©λ‹ˆλ‹€. μ—”ν‹°ν‹°λŠ” 일반적으둜 & 기호둜 μ‹œμž‘ν•˜λ©°, μ„Έλ―Έμ½œλ‘  ; 으둜 λλ‚©λ‹ˆλ‹€. λͺ‡ 가지 ν”ν•œ μ—”ν‹°ν‹°λŠ” λ‹€μŒκ³Ό 같은 것듀이 μžˆμŠ΅λ‹ˆλ‹€.
    β–Ά&lt;: < 기호λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.
    β–Ά &gt;: > 기호λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.
    β–Ά &amp;: & 기호λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.
    β–Ά &nbsp;: 곡백을 λ‚˜νƒ€λƒ…λ‹ˆλ‹€. μ΄λŠ” 쀄 λ°”κΏˆ μ—†λŠ” 곡백을 생성할 λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€.

    예λ₯Ό λ“€μ–΄, ν…μŠ€νŠΈμ—μ„œ < 기호λ₯Ό μ‚¬μš©ν•˜λ €λ©΄ &lt; μ—”ν‹°ν‹°λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

    <p>HTML νƒœκ·ΈλŠ” λ‹€μŒκ³Ό 같이 λ‚˜νƒ€λ‚Ό 수 μžˆμŠ΅λ‹ˆλ‹€: &lt;h1&gt;제λͺ©&lt;/h1&gt;</p>

    &amp;lt;


    μ΄λ ‡κ²Œ ν•˜λ©΄ ν…μŠ€νŠΈμ—μ„œ <h1> 제λͺ© </h1>κ³Ό 같이 ν‘œμ‹œλ˜μ§€ μ•Šκ³ , HTML νƒœκ·Έλ‘œ ν•΄μ„λ˜μ–΄ λΈŒλΌμš°μ €μ— ν‘œμ‹œλ©λ‹ˆλ‹€.

    핡심 λ‚΄μš©πŸ‘€

    html ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ
    ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ

    728x90
    λ°˜μ‘ν˜•