(12) HTML 태그

Notice

Recent Comments

Link

instagram

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

관리 메뉴

Minwoo Dev.

(12) HTML 태그 - o,p,q 본문

Web

(12) HTML 태그 - o,p,q

itisminu 2023. 7. 10. 11:42

728x90

SMALL

<object> : 외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체(embedded object)를 정의할 때 사용함.

이러한 <object> 요소는 <body> 요소 내부에만 위치할 수 있으며, <object> 요소를 지원하지 않는 브라우저를 위해 <object> 태그와 </object> 태그 사이에 대체 텍스트를 포함시킬 수 있습니다. 또한, <object> 요소는 data 속성이나 type 속성 중 하나를 반드시 명시해야만 합니다.

<param> 요소를 사용하여 <object> 요소에 의해 호출되는 플러그인의 매개변수를 정의할 수 있으며, 페이지에 이미지를 삽입할 때도 <img> 요소가 아닌 <object> 요소를 대신 사용할 수도 있습니다.

<object data="/examples/media/sample.mp4" height="180" width="288">
    현재 사용 중인 브라우저는 object 요소를 지원하지 않습니다!
</object>

<ol> : 순서가 있는 HTML 리스트(list)를 정의할 때 사용함.

<ol> 요소에 속하는 각 아이템은 <li> 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 아라비아 숫자나 알파벳으로 표현됩니다.

<ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>

<optgroup> : 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 옵션들의 그룹을 정의할 때 사용함.

드롭다운 리스트에서 옵션의 수가 많을 경우 <optgroup> 요소를 사용하여 관련된 옵션끼리 각각의 그룹으로 묶어주면 사용자가 좀 더 쉽게 드롭다운 리스트를 사용할 수 있습니다.

<select>
    <optgroup label="커피(Coffee)">
        <option value="americano">아메리카노</option>
        <option value="caffe latte">카페라떼</option>
        <option value="espresso">에스프레소</option>
    </optgroup>
    <optgroup label="티(Tea)">
        <option value="earl grey">얼그레이티</option>
        <option value="jasmine">자스민티</option>
    </optgroup>
</select>

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

이러한 <option> 요소는 <select> 요소나 <datalist> 요소 내부에만 위치할 수 있습니다.

<option> 요소는 아무런 속성도 명시하지 않은 채 사용할 수 있지만, 서버로 제출되는 값을 명시하는 value 속성은 명시하는 것이 일반적입니다.

만약 옵션의 개수가 많다면, <optgroup> 요소를 사용하여 관련된 옵션들을 좀 더 보기 좋게 서로 묶어 줄 수 있습니다.

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

<output> : 스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 나타낼 때 사용함.

<form action="/examples/media/action_target.php" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" name="a" value="20"> + 
    ( 0 <input type="range" id="b" name="b" value="0"> 100 )=
    <output name="result" for="a b"></output><br>
    <input type="submit">
</form>

<p> : 문단(paragraph)을 정의할 때 사용함.

브라우저는 자동으로 <p> 요소의 위쪽과 아래쪽에 약간의 여백을 추가합니다.

이러한 여백은 CSS의 margin 속성을 사용하여 조정할 수 있습니다.

<p>이 문장은 단락입니다.</p>
<p>이 문장은 단락입니다.</p>
<p>이 문장은 단락입니다.</p>

<param> : <object> 요소에 의해 호출되는 플러그인의 매개변수(parameter)를 정의할 때 사용함.

<object data="/examples/media/sample.mp4">
    <param name="autoplay" value="true">
    현재 사용 중인 브라우저는 object 요소를 지원하지 않습니다!
</object>

<picture> : <img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용함.

<picture> 요소는 뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줍니다. 이러한 <picture> 요소는 웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로, 반응형 디자인(responsive design)에서 주로 사용합니다.

<picture> 요소는 0개 이상의 <source> 요소와 하나의 <img> 요소로 구성되며, 브라우저는 <source> 요소 중에서 해당 뷰포트와 가장 잘 어울리는 <source> 요소를 다음과 같은 방법을 사용하여 선택합니다.

브라우저는 <source> 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 <source> 요소를 사용하고, 나머지 <source> 요소들은 무시합니다. 이 때 <img> 요소는 <picture> 요소의 자식 요소 중에서 가장 마지막에 위치해야 합니다. 이러한 <img> 요소는 <picture> 요소를 지원하지 않는 브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나 명시된 <source> 요소가 모두 조건을 만족하지 못 할 경우 사용됩니다.

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

<pre> : 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용함.

<pre> 요소 내의 텍스트는 시스템에서 미리 지정된 고정폭 글꼴(fixed-width font)을 사용하여 표현되며, 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타납니다.

이러한 <pre> 요소를 사용하면, 독특한 서식의 텍스트나 컴퓨터 코드 등을 HTML 문서에 그대로 표현할 수 있습니다.

<pre>
    pre 요소 내의 텍스트는
고정폭 글꼴(fixed-width font)을 사용하여 표현되며, 
사용된      띄어쓰기와      줄바꿈이 모두 그대로

브라우저 화면에 나타납니다.
</pre>

<progress> : 작업의 진행률을 나타낼 때 사용함.

이러한 <progress> 요소는 자바스크립트와 함께 작업의 진행 정도를 표현할 때 사용되며, 범위를 나타내는 데 사용하기에는 적합하지 않습니다.

범위를 나타낼 때는 <progress> 요소 대신 <meter> 요소를 사용해야 합니다.

<h3>다운로드 중..</h3>
<p>진행률 : <progress max=100 value="25">25%</progress></p>

<q> : 짧은 인용구(short quotation)를 정의할 때 사용함.

이러한 인용구를 브라우저는 보통 앞뒤에 따옴표를 추가하여 표현합니다.

다른 출처로부터 인용된 인용 블록을 정의할 때는 <q> 요소보다는 <blockquote> 요소를 사용하는 것이 바람직합니다.

<p>통계 사이트인 StarCounter에 따르면,
        <q>2019년 2월 현재 가장 높은 점유율을 보이는 웹 브라우저는 크롬 브라우저</q>라고 합니다.</p>

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

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