01_글자 관련 태그

kojam9041·2022년 4월 17일
0

KH정보교육원 - HTML

목록 보기
2/8

HTML 구조

1. head

head : 머리부를 나타냄
       해당 이 문서의 각종 환경설정 정보, 제목, 설명 및 스크립트, 
       스타일시트의 링크 등을 설정. 
       화면에 출력되지 않음.
       meta, title, link, style, script,... 
<!DOCTYPE html> <!-- HTML 문서 형식을 선언 : HTML5 형식임 -->
<html lang="ko"> <!--html의 시작과 끝을 표시해주는 태그
                     lang 속성은 이 문서가 어느나라 형식으로 되어있는지 표시 -->   
    <head>
        <meta charset="UTF-8"> 
        <!-- charset : 이 문서의 인코딩 방식을 정의-->
        <meta name="generator" content="VScode" > 
        <!-- generator : 이 문서를 생성한 프로그램--> 
        <meta name="author" content="KH">
         <!-- author : 이 문서를 작성한 저자-->
        <meta name="keyword" content="글자, 태그"> 
        <!-- keyword : 이 문서를 나타내는 키워드(=인스타그램의 태그)-->
        <meta name="description" content="이 문서는 글자와 관련된 태그를 공부하는 페이지입니다.">
        <!-- description : 이 문서에 대한 설명-->
        
        <title>글자 관련 태그</title> 
        <!-- 이 문서의 제목을 나타냄.
             마우스 오른쪽 - Open in browser를 열어보면, 브라우저의 탭 부분에 해당 내용이 반영됨.-->
    </head>

2. body

body : 몸통부를 나타냄
	   화면에 출력해서 보여주는 모든 정보 / 내용들을 작성하는 구문
[관련태그]       
1. 줄바꿈 태그 : br
2. 제목 태그 : h1 ~ h6
3. 구분선 태그 : hr
4. 문단 태그 : p, pre
5. 글자 관련 태그
b, strong / em, i(기울기) / mark(형광펜) / u(밑줄) / s, strike(취소선) 
small,big / abbr title="주석내용"(축약형) / sub,sup(첨자) 
    <body>
        안녕하세요? <br> <!-- 줄바꿈 태그-->
        반갑습니다.
        <br><br>
        안녕히 가세요.  <br>

        <!-- h관련 태그(h1 ~ h6)-->
        <!-- h관련 태그는 가로 한 줄을 통으로 차지하기 때문에 줄바꿈 해줄 필요가 없음.-->
        <h1>h1 태그입니다.</h1>
        <h2>h2 태그입니다.</h2>
        <h3>h3 태그입니다.</h3>
        <h4>h4 태그입니다.</h4>
        <h5>h5 태그입니다.</h5>
        <h6>h6 태그입니다.</h6>


        <h7>h7 태그가 있나?</h7> <!-- 존재하지 않는 태그를 사용 시 : 일반 글꼴로 나옴.-->

        <hr> <!-- 가로로 구분선, 수평선을 긋는 태그 -->

        <h3>문단을 나누는 태그</h3>
        <p>
            문단영역을 나누는 태그로는 p태그와 pre태그가 있음.<br>
            단, p태그는 줄바꿈 입력을 별도의 태그로 지정해야 함. <br>
            그리고,      공백은 한개의 공백만을 표시하기 때문에, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            기호문구를 작성해야 함.

        </p>

        <pre>
			pre태그는     여러 공백이 인식 가능하고,
            줄바꿈 등을 포함하여 입력한 내용 그대로를 표현하는 태그임.
        </pre>

        <hr>
        <h3>그 밖에 글자를 다루는 태그들</h3>

        일반글꼴(태그를 감싸지 않은 텍스트)
        <br><br>
        <b> b : 글자를 굵게 표시하는 태그</b>
        <br><br>
        <strong> strong : 글자를 굵게 표시하는 태그</strong>
        <br><br>
        <em>em : 글자를 기울여서 표시하는 태그</em>
        <br><br>
        <i> i : 글자를 기울여서 표시하는 태그</i>
        <br><br>
        <mark>mark : 글자에 형광펜 효과를 주는 태그</mark>
        <br><br>
        <u> u : 글자에 밑줄이 그어지는 태그 </u>
        <br><br>
        <s> s : 글자에 취소선을 넣어주는 태그</s>
        <br><br>
        <strike> strike : 글자에 취소선을 넣어주는 태그</strike>
        <br><br>
        <small>small : 글자를 작게 표현해주는 태그</small>
        <br><br>
        <big> big : 글자를 크게 표현해주는 태그</big>
        <br><br>
        <abbr title="Internet Of Things"> IOT </abbr> 란, 각종 사물에 센서와 통신기능을 내장해 인터넷을 연결하는 기술이다.
        <!--abbr(abbreviation) : 단어의 축약형, 머리글자로만 이루어진 단어를 정의할 때 쓰는 태그
                                 마우스를 올리면, 주석으로 title의 내용이 나타남 -->
        <br><br>
        sub : 기본 글자에 <sub> 아래첨자 </sub>를 나타내는 태그
        <br><br>
        sup : 기본 글자에 <sup> 위첨자</sup>를 나타내는 태그             
        
        <hr>

        <!-- html 응용문제 1-->
        <h3> 글자 관련 태그 응용 </h3>
        <p>
            태그들은 항상 태그 내에서 중첩으로 사용 가능하다. <br>
            <b>굵은 글자를</b> 사용할수도 있고, <br>
            <em>기울이거나</em>, <br>
            <s>취소선</s>을 넣는 등 다양하게 사용할 수 있다. <br>
            <mark>형광펜을 넣어</mark> 글자를 강조할 수도 있다.
        </p>    

    </body>
</html>
profile
kojam9041
이전 포스트

00_네트워크, 서버, 클라이언트, HTML

다음 포스트

02_목록 관련 태그

0개의 댓글