본문 바로가기
Frontend/HTML

HTML (서식 태그, 목록 태그)

by code2772 2022. 10. 21.

[ 목차 ]

    728x90
    반응형
    1. 서식 태그
    <b> : 텍스트를 굵게 표현
    <i> : 텍스트를 이탤릭체로 표현
    // html1 버전
    
    웹 접슨성을 위한 태그이다.
    <strong> : 텍스트를 굵게 표현, 리더기에서 거쎈 발음
    <em> : 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음
    //html5 버전
    
    <b>여러분 아녕하세요.</b> 오늘은 <strong>HTML</strong>에 데헤서 베워볼게요
    
    
    https://validator.w3.org/
    잘못된 스크랩트나 토드가 있는지 확인하는 사이트

    예제 서식태그

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>서식태그</title>
    </head>
    <body>
        <h2>서식태그</h2>

        <p> b태그는 <b>단순히 글자가 굵게</b>> 표현됩니다</p>
        <p>strong 태그는 <strong>중요한 글자를 굵게</strong> 표현됩니다</p>
       
        <p>i 태그는 <i>단순히 글자를 이탤릭채로</i> 표현합니다</p>
        <p>em 태그는 <em>중요한 글자를 이탤릭체로 </em>기울여 표현합니다.</p>

        <p>del 태그는 글자를 <del>지운 것처럼</del> 표현합니다.</p>

        <p>ins 태그를 사용하면 <ins>중요한 글자에</ins> 맡줄을 그어줍니다</p>

        <p>sup 태그를 사용해서 수식을 표현 : x<sup>2</sup> + y<sup>3</sup> = z </p>

        <p>sub 태그를 사용해서 화학삭을 표현 : H<sub>2</sub>O</p>

       

    </body>
    </html>

     

     

    2. 목록 태그
    
    <ul> : 순서가 없는 목록 태그, 블록 태그
    
    · 김사과
    · 오렌지
    · 반하나
    
        <ul>
            <li>김사과</li>
            <li>오렌지</li>
            <li>반하나</li>
        </ul>
    
    <ol> : 순서가 있는 목록 태그 , 블록태그
    
    1. 김사과
    2. 오렌지
    3. 반하나
    
        <ol>
            <li>김사과</li>
            <li>오렌지</li>
            <li>반하나</li>
        </ol>
    
    <dl> : 정의 목록 태그, 블록 태그
    
    류정원 선생님
        김사과 학생
        오렌지 학생
        반하나 학생
    
        <dl>
            <dt> 류정원 선생님</dt>
            <dd> 김사과 학생</dd>
            <dd> 오렌지 학생</dd>
            <dd> 반하나 학생</dd>
        </dl>
    
        // 자식표현 dl>dt*3
        // 형제 표현 dl>dt+di*3
    

    예제 목록 태그

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>목록 태그</title>
    </head>
    <body>
        <h2>목록 태그</h2>
        <ul>
            <li>김사과</li>
            <li>오렌지</li>
            <li>반하나</li>
        </ul>

        <hr>

        <ol>
            <li>김사과</li>
            <li>오렌지</li>
            <li>반하나</li>
        </ol>

        <hr>

        <dl>
            <dt>류정원 선생님</dt>
            <dd>김사과</dd>
            <dd>오렌지</dd>
            <dd>반하나</dd>
        </dl>

        <hr>

        <ul>
            <li>김사과</li>
            <li>오렌지</li>
            <li>
                <ol>
                    <li>김사과</li>
                    <li>오렌지</li>
                    <li>반하나</li>
                </ol>
            </li>
        </ul>


    </body>
    </html>

     

     

    MDN - 태그 설명 및 좋은 자료들이 있는 곳
    https://developer.mozilla.org/ko/docs/Web/HTML
    반응형