(13) HTML 태그 - r,s

<rp> : 루비 주석(ruby annotation)을 지원하지 않는 브라우저에서만 표시될 문자를 정의할 때 사용함.

<rp> 요소는 <ruby> 요소 내부에 위치하며, <rt> 요소와 함께 사용합니다.

<rp> 요소는 보통 <rt> 요소를 감싸는 형태로 한 쪽에는 여는 괄호를 포함하며 다른 한 쪽에는 닫는 괄호를 포함하여, 루비 주석을 지원하지 않는 브라우저에서는 <rt> 요소의 내용이 괄호 안에 나타나도록 할 수 있습니다.

 

<ruby> 요소는 동아시아 일부 지역의 언어에서 일본어의 후리가나와 같이 해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석(ruby annotation)을 정의할 때 사용합니다.

<ruby> 요소는 발음이나 설명이 필요한 한 개 이상의 문자로 구성되며, <rt> 요소는 그에 대한 발음이나 설명을 정의합니다.

추가적으로 사용할 수 있는 <rp> 요소는 <ruby> 요소를 지원하지 않는 브라우저에서만 표시될 문자를 정의합니다.

<p>"공부"를 의미하는 일본어는 <ruby>勉強<rp>(</rp><rt>べんきょう</rt><rp>)</rp></ruby>입니다.</p>

 

 

<rt> : 루비 주석(ruby anntation)에서 발음이나 설명을 나타내는 윗첨자를 정의할 때 사용함.

<rt> 요소는 <ruby> 요소 내부에 위치하며, <rp> 요소와 함께 사용할 수 있습니다.

 

<ruby> 요소는 동아시아 일부 지역의 언어에서 일본어의 후리가나와 같이 해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석(ruby annotation)을 정의할 때 사용합니다.

<ruby> 요소는 발음이나 설명이 필요한 한 개 이상의 문자로 구성되며, <rt> 요소는 그에 대한 발음이나 설명을 정의합니다.

추가적으로 사용할 수 있는 <rp> 요소는 <ruby> 요소를 지원하지 않는 브라우저에서만 표시될 문자를 정의합니다.

<p>"공부"를 의미하는 일본어는 <ruby>勉強<rt>べんきょう</rt></ruby>입니다.</p>

 

 

 

<ruby> : 동아시아 일부 지역의 언어에서 일본어의 후리가나와 같이 해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석(ruby annotation)을 정의할 때 사용함.

<ruby> 요소는 <rt> 요소만 포함하거나, <rt> 요소와 함께 <rp> 요소도 포함할 수 있습니다.

 

<ruby> 요소는 발음이나 설명이 필요한 한 개 이상의 문자로 구성되며, <rt> 요소는 그에 대한 발음이나 설명을 정의합니다. 추가적으로 사용할 수 있는 <rp> 요소는 <ruby> 요소를 지원하지 않는 브라우저에서만 표시될 문자를 정의합니다.

<p>"공부"를 의미하는 일본어는 <ruby>勉強<rt>べんきょう</rt></ruby>입니다.</p>

 

 

<s> : 텍스트 한가운데 라인(line)을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현할 때 사용함.

<s> 요소를 사용하여 문서에서 대체되거나 삭제된 텍스트를 표현해서는 안 되며, 해당 텍스트는 <del> 요소를 사용해서 표현해야만 합니다.

<p><s>기간한정판매 : 1일부터 3일까지 무려 50% 세일에 들어갑니다!!</s></p>
<p>판매완료!</p>

 

 

 

<samp> : 컴퓨터 프로그램의 샘플 또는 인용 출력(output)을 나타낼 때 사용함.

<samp> 요소 내의 텍스트는 브라우저의 기본 고정폭 글꼴을 사용하여 표현됩니다.

<samp> 요소는 HTML5에서도 여전히 지원되지만, CSS를 대신 사용하면 더욱 다양한 효과를 얻을 수 있습니다.

<p>컴퓨터를 부팅하려고 했더니 다음과 같은 메시지가 뜹니다.</p>
<p><samp>Keyboard not found!<br>Press F1 to continue...</samp></p>

 

 

 

<script> : 자바스크립트와 같은 클라이언트 사이트 스크립트(client-side scripts)를 정의할 때 사용함.

<script> 요소는 스크립트 코드를 요소 내부에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있습니다. 하지만 src 속성이 명시된 <script> 요소에는 스크립트 코드를 직접 명시해서는 안 됩니다.

 

참조된 외부 스크립트 파일을 다음과 같이 여러 가지 방법으로 실행시킬 수 있습니다.

- async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안 스크립트가 실행됨.

- async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.

- async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.

 

이렇게 정의된 자바스크립트는 일반적으로 이미지 조정, 폼(form)에 대한 검증, 콘텐츠의 동적 변경 등에 사용됩니다.

 

또한, <noscript> 요소를 사용하여 클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 수 있습니다.

<script type="application/javascript">
    document.getElementById("para").innerHTML = "자바스크립트가 실행되었습니다.!";
</script>

 

 

 

<section> : HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용함.

<section> 요소는 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다.

<section>
    <h1>HTML</h1>
    <p>HTML(HyperText Markup Language)은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의
        웹 페이지를 위한 마크업 언어이다.</p>
</section>
<section>
    <h1>HTML의 역사</h1>
    <p>최초의 HTML은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.</p>
</section>

 

 

 

<select> : 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의할 때 사용함.

<select> 요소 내부의 <option> 요소는 드롭다운 리스트(drop-down list)에서 사용되는 각각의 옵션을 정의합니다.

이러한 <select> 요소는 사용자로부터 입력을 받기 위한 폼(form)에 사용될 수 있습니다.

<select>
    <option value="americano">아메리카노</option>
    <option value="caffe latte">카페라테</option>
    <option value="cafe au lait">카페오레</option>
    <option value="espresso">에스프레소</option>
</select>

 

 

 

<small> : 글자 크기가 작은 텍스트를 정의할 때 사용함.

<p>이 텍스트는 일반적인 크기의 텍스트입니다.</p>
<p><small>이 텍스트는 크기가 작은 텍스트입니다.</small></p>

 

 

 

<source> : <audio> 요소나 <video> 요소, <picture> 요소에서 사용할 수 있는 다중 미디어 자원(multiple media resources)을 정의할 때 사용함.

<source> 요소는 미디어 타입이나 코덱의 지원여부, 미디어 쿼리에 따라 브라우저가 선택할 수 있는 대체 비디오/오디오/이미지 파일을 명시할 수 있도록 해줍니다.

<audio controls>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mpeg">
    이 문장은 여러분의 브라우저가 audio 태그를 지원하지 않을 때 화면에 표시됩니다!
</audio>

 

 

 

<span> : HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용함.

<span> 요소는 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유하는 데 유용하게 사용할 수 있습니다.

<span> 요소는 <div> 요소와 매우 비슷하게 사용되지만, <div> 요소는 블록 타입의 요소인데 반해 <span> 요소는 인라인 타입의 요소입니다.

<style>
    .word { background-color: orange; font-style: italic; }
</style>

<p>HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.</p>
<p><span class="word">span 요소</span>는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 <span class="word">인라인(inline) 요소</span>입니다.</p>
<p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p>

 

 

 

<strike> : 텍스트 한가운데 라인을 추가할 때 사용함.

HTML5에서는 <strike> 태그를 더 이상 지원하지 않으며, 대신 <del> 요소나 <s> 요소를 사용해야 합니다.

<p><strike>기간한정판매 : 1일부터 3일까지 무려 50% 세일에 들어갑니다!!</strike></p>
<p>판매완료!</p>

 

 

 

<strong> : 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용함.

브라우저는 일반적으로 <strong> 요소의 콘텐츠를 굵은 텍스트로 표현합니다.

---

<strong> vs <b>

<b> 요소는 콘텐츠의 중요성보다는 텍스트 자체에 주의를 끌기 위해 사용되지만, <strong> 요소는 콘텐츠 자체의 중요성을 강조할 때 사용됩니다.

---

<strong> vs <em>

<em> 요소는 구어체 강조와 같이 문장의 의미를 변경하는데 사용되지만("I love cat." vs. "I love cat."), <strong> 요소는 문장의 일부분에 중요성을 추가하는데 사용됩니다.("Warning! This is very dangerous.")

<strong> 요소와 <em> 요소는 각각 중첩해서 사용함으로써 중요성이나 강조의 상대적인 정도를 증가시킬 수 있습니다.

---

<p><strong>주의!</strong> 이번 역은 승강장 사이와의 간격이 넓으니 주의하시기 바랍니다!</p>

 

 

 

<style> : 해당 HTML 문서의 스타일 정보를 정의할 때 사용함.

<style> 요소는 해당 요소가 포함된 HTML 문서의 콘텐츠에 적용되는 CSS를 명시하고 있으며, HTML 문서는 여러 개의 <style> 요소를 포함할 수 있습니다.

별도의 파일로 저장된 외부 스타일 시트는 <link> 요소를 사용하여 참조할 수 있습니다.

<head>
    <style>
        body { background-color: lightpink }
        h1 { color: red; }
        p { text-decoration: underline; }
    </style>
</head>

 

 

 

<sub> : 아랫첨자(subscript) 텍스트를 표현할 때 사용함.

<sub> 요소 내부의 텍스트는 일반 텍스트 라인보다 아래쪽에 절반 크기의 작은 문자로 표현되며,

이러한 아랫첨자는 수학 공식(ex) nPr = n!/(n-r)!)이나 분자식, 화학 반응식(ex) 2H2 + O2 → 2H2O) 등을 표현할 수 있습니다.

 

윗첨자(superscript) 텍스트를 표현할 때는 <sup> 요소를 사용합니다.

<p>물 분자가 만들어지는 화학 반응식은 다음과 같습니다.</p>
<p>2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O</p>

 

 

 

 

<summary> : <details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의할 때 사용함.

<summary> 요소는 반드시 <details> 요소의 첫 번째 자식 요소이어야 하며, 이 제목을 마우스로 클릭함으로써 <details> 요소를 보이도록 할 수도 있고 숨길 수도 있습니다.

 

<details> 요소는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용합니다.

<details>
    <summary>오늘의 환율</summary>
    <ul>
        <li>달러($) : 1,135.90</li>
        <li>유로(€) : 1,284.08</li>
        <li>엔(￥) : 1,014.88</li>
    </ul>
</details>

 

 

 

<sup> : 윗첨자(superscript) 텍스트를 표현할 때 사용함.

<sup> 요소 내부의 텍스트는 일반 텍스트 라인보다 윗쪽에 절반 크기의 작은 문자로 표현되며,

이러한 윗첨자는 수학 공식(ex) (a+b)2 = a2 + 2ab + b2)이나 각주(ex) WWW[1]) 등을 표현할 수 있습니다.

 

아랫첨자(subscript) 텍스트를 표현할 때는 <sub> 요소를 사용합니다.

<p>제곱 공식은 다음과 같습니다.</p>
<p>(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>

 

 

 

 

 

 

 

 

 

 

 

 

공부를 목적으로 정리한 게시글입니다.

출처 - http://www.tcpschool.com/html-tags/intro