기본 글자 태그

Tag description
b 굵은 글자
i 기울어진 글자
small 작은글자
sub 아래에 붙는다
sup 위에 붙는다
ins 밑줄 그어짐
del 가운데 줄이 그어짐

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 자습하기</title>
    <style>
    @font-face {
        font-family: 'Cafe24Oneprettynight';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
        body{
            font-family: 'Cafe24Oneprettynight';
            font-weight: 500;
            font-size: 1.5em;
            line-height: 150%;
        }
    </style>
</head>
<body> 
    <h1><b>글자에 태그를  넣는다</b></h1>
    <p>
        기본글자이다 <br/>
        <b>글자에 태그를 넣는다 bold </b><br/>
        <i>글자에 태그를 넣는다 italic </i><br/>
        <small>글자에 태그를 넣는다 small </small><br/>
        <sub>글자에 태그를 넣는다 sub </sub></br>
        <sup>글자에 태그를 넣는다 sup </sup></br>
        <ins>글자에 태그를 넣는다 ins </ins></br>
        <del>글자에 태그를 넣는다 del</del></br>
    </p>

</body>
</html>

기본글자태그
기본글자태그

루비문자

 

루비는 일본어에서 사용되는 글자형식이다. 한자어가 많은 일본어 특성상 후리가나를 달기 위해서 사용된다.(후리가나: 한자어 발음)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 자습하기</title>
    <style>
        body{
            font-family:Arial, Helvetica, sans-serif;
            font-weight: 500;
            font-size: 1.5em;
            line-height: 150%;
            background-color:lightgreen;
        }
    </style>
</head>
<body> 
    <h2><b>루비문자</b></h2>
    <p>
        <ruby>
            가나다라
            <rt>마바사아</rt>
        </ruby>
    </p>
</body>
</html>

 

한국어에서는 그다지 사용할 일이 없을 것 이다. 사실 일본에서도 후리가나는 어린이들 보는 책에나 다는 것으로 인식을 해서 인터넷에서는 적극적으로 사용하지 않는다. 검색이 발달하기도 했고. 오프라인 책 중에서도 저연령 책이나 만화 또는 학습교재 정도에 달린다. 이러한 기능이 있다는 정도만 알면 충분하다.

 

루비문자

*목록태그 list tag *정의태그 description tag

목록태그는 리스트를 만든다. 순서가 있는 리스트와 순서가 없는 리스트가 있다.

 

정의태그는 뜻의 정의에 어울리는 태그이다. 검색엔진이 봤을 때는 둘사이에 유의미한 구분이 되는지는 모르겠다.

 

잘 사용하면 자료의 구조화가 잘 되있는 페이지로 인식될 수 있다. 무엇보다 사용자가 읽기 편하다.

 

div나 span을 많이 사용하는 지금도 의외로 아직까지도 사용이 되고 있는 태그다. 이 티스토리에서도 사용된다.

 

형식은 한번 보면 이해가 될 것이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 자습하기</title>
    <style>
    @font-face {
        font-family: 'Cafe24Oneprettynight';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
        body{
            font-family: 'Cafe24Oneprettynight';
            font-weight: 500;
            font-size: 1.5em;
            line-height: 150%;
        }
    </style>
</head>
<body> 
    <h1>목록</h1>
    <ol>
        <li>순서 있는 리스트 1</li>
        <li>순서 있는 리스트 2</li>
        <li>순서 있는 리스트 3</li>
        <ol>
            <li>중첩된 순서있는 항목 1</li>
            <li>중첩된 순서있는 항목 2</li>
            <li>중첩된 순서있는 항목 3</li>
        </ol>
    </ol>
     <h2>목록2</h2>
     <ul>
         <li>순서없는 리스트</li>
         <li>순서없는 리스트</li>
         <li>순서없는 리스트</li>
         <ul>
             <li>중첩된 순서없는 항목</li>
             <li>중첩된 순서없는 항목</li>
             <li>중첩된 순서없는 항목</li>
         </ul>
     </ul>
     <dl>
         <dt>Description Term 항목 정의 1</dt>
         <dd>definition descriptinon 1</dd>
         <dt>Description Term 항목 정의 2</dt>
         <dd>definition descriptinon 2</dd>
         <dd>definition descriptinon 3</dd>
     </dl>
</body>
</html>

목록태그

 

공유하기

facebook twitter kakaoTalk kakaostory naver band