HTML5 정의 및 기본 태그

⏰ 2024.11.06 (D+20)

1. HTML5이란?

🔖 HTML 정의 ]
하이퍼 텍스트 마크업 언어 (Hyper Text Markup Language)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어

💡 HTML 태그 주석 처리 방법

주석 처리할 영억 선택 후 ctrl + / 하여 주석 처리

💡 HTML 줄바꿈 하는 방법
엔터키는 웹브라우저에서 인식 못하므로 스페이이스바 1 번과 같다.
줄바꿈을 하기 위해서는 엔터키 효과를 내는 <br>태그 사용

※ 엔터키(줄바꿈) 적용 안됨

2. HTML5 텍스트 꾸미기 태그

u 태그 : underline(밑줄)
i 태그 : italic(기울어짐)
b 태그, strong태그 : bold(두껍게)

sub : 아래첨자
sup : 위첨자

s, del, strike태그:가운데 선

inline element(가로배치)
: 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들

block element(세로배치)
: 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들

⭐ 중요 ]
인라인 엘리먼트 안에는 블럭 엘리먼트를 넣을 수 없다
블락엘리먼트안에는 인라인 및 블락 엘리먼트를 넣을 수 있다.

HTML5 태그를 이용한 예제 📖]

 <div>
    <h2>텍스트 꾸미기</h2>
    <u>밑줄 긋기</u><br>
    <i>이탤릭체</i><br>
    <strong>글자 진하게</strong><br>
    <b>글자 진하게</b><br>
    나의 닉네임은 <sup>자바 매니아</sup> 입니다.<br>
    나의 닉네임은 <sub>자바 매니아</sub> 입니다.<br>
    y = x2<br>
    <var>y</var> = <var>x</var> <sup>2</sup><br>
    가격 할인 : <i><strong><del>10,000</del></strong></i> → 5,000원
 </div>

3. HTML5 특수문자 태그

특수문자표 📖]

              : 스페이스바 한번(빈칸)
 >              : > (greater than)
 &lt;              : <  (less than)
 &amp;             : &
 &quot;            :"(double quotation)
 &apos; 혹은 &#39; : ' &apos;는 IE에서는 적용 안됨

특수문자 사용 예시 📖]

 <div>
    <h1>사용 예</h1>
    <ict>한국 ICT 인재 개발원</ict><br>
    &lt;ict&gt;한국 ICT 인재 개발원&lt;/ict&gt;<br>
    <!-- 참고자료 : https://www.w3schools.com/charsets/ref_utf_symbols.asp -->
    &#9742; 010-1234-5678<br>
    <h2 title="특수 &quot문자&quot 연습입니다">특수 문자 연습</h2><br>
    <h2 title='특수 "문자" 연습입니다'>특수 문자 연습</h2>
    <h2 title='특수 &#39문자&#39 연습입니다'>특수 문자 연습</h2>
    <h2 title="특수 '문자' 연습입니다">특수 문자 연습</h2>
 </div>

문제 📙] 다음 중 HTML태그가 아닌 것은?

 <ul style="list-style-type: decimal;">
    <li>&lt;u&gt;태그</li>
    <li>&lt;i&gt;태그</li>    
    <li>&lt;strike&gt;태그</li>
    <li>&lt;java&gt;태그</li>            
    <!-- 정답 4번 -->
 </ul>

4. 괘선을 나타내는 태그

hr: 괘선을 나타내는 태그

속성:
- color : 괘선의 색상 지정(style로 적용)
- size : 괘선의 두께 지정(숫자만)
- width : 괘선의 가로폭 지정(숫자또는 %로 지정가능)
- align-left,right,center(가운데정렬 기본)

• 상기 속성으로 지정시 웹표준에 어긋남
• css로 지정
• 종료 태그가 없음
• block element

괘선을 나타내는 태그 예제 📖 ]

 <h2>hr 태그 연습</h2>
<div style="background-color: rgb(209, 240, 159) ; width: 600px">

    <h3>hr 기본 태그</h3>
    <hr/>
    <!-- 웹 표준에 어긋남(속성이 제거됨) -->
    <!-- <hr color="blueviolet"; /> -->
    <hr style = "background-color:deeppink; height: 1px;"/> 

    <h3>괘선의 가로폭 지정</h3>
    <!-- 웹 표준에 어긋남*속성이 제거됨 -->
    <!-- <hr width="50%"/> -->
    <!-- <hr width="50%" align="right"/> -->

    <hr style="width: 50%; margin-right: 0%;"/>
    <h3>괘선의 두께 지정</h3>
    <!-- 웹 표준에 어긋남(속성이 제거됨) -->
     <hr size="30" color="blue"/>
     <hr style="height: 30px;background-color: aqua;"/>

문제 📙] 다음 중 HTML태그가 아닌 것은?

    <ul style="list-style: upper-alpha;">
        <li>크롬</li>
        <li>파이어 폭스</li>
        <li>익스 프롤러</li>
        <li>오페라</li>
        <li>사파리</li>
    </ul>