만물상 :: HTML 기본태그 정리 1탄
본문으로 바로가기

HTML 기본태그 정리 1탄

category PC/HTML 2018. 8. 22. 15:35
반응형

오늘은 기본 태그에 대해서 몇 글자 적어 보도록 하겠습니다.
공부 하면서 쓴다고 생각 하면서 적었는데 생각 보다 시간이 많이 걸렸네요
블러그에 올려 놓으니 별로네요 다음번에는 표로 정리 해야 겠네요
너무 난잡 하게 되어 있어서 저도 아~ 시간만 들이고 실수 했구나 싶은데...

오늘은 일단 이걸로 만족 해야 겠내요 시간도 많이 들였는데 싶어서 올려 봅니다.

 

 

                    <!--여기서 부터기본문서 태그 입니다.-->
<!DOCTYPE html>
<html><!--문서의 시작을 나타냅니다.-->
<head><!--HTML문서의 머릿말의 시작을 나타냅니다.-->
  <meta charset="UTF-8"><!--문서의 문자코드입니다.-->
  <title>Document</title> <!--문서의 제목입니다.-->
</head><!--문서의 머릿말의 끝을 나타냅니다.-->
  <body><!--문서의 시작을 나타냅니다.-->
                    <!-- 여기까지 기분문서 태그 입니다(바디태그까지 기본문서 태그 입니다.).-->
                    <!-- 주석으로 나타내는건 보시는 대로 입니다.-->
                    <!-- 여기서부터는 본문 특성 항목 입니다.-->
            <body bgcolor="#ECF6CE"><!--백그라운드의 컬러를 나타냅니다 (연두색으로 설정).-->
            <body text="#4000FF"<--text의 색상을 나타냅니다(파랑색으로설정).--> <br>
              <a href="http://html-color-codes.info" title="HTML color codes">HTML color codes</a><br>
            <body link="#F781BE"> <!--한번도 방문하지 않았을 때의 링크색상 지정(기본값 파랑)(연분홍색으로설정)-->
            <body vlink="#2EFEF7"><!--방문한 기록이 있는 링크색상(기본값 보라)(연파랑지정)-->
            <body alink="#58ACFA"><!--마우스 오버시 색상(기본값 빨강)(블루지정) -->
                    <!-- 여기까지 본문 특성 항목 입니다.-->
                    <!-- 여기서부터는 글자 태그 항목 입니다.-->
            <h2> 제목 2번째</h2><!-- 숫자가 낮을 수록 크기가 큽니다.-->
            <h3> 제목 3번째</h3>
            <h4> 제목 4번째</h4>
            <h5> 제목 5번째</h5>
            <h6> 제목 6번째</h6>
            <h1> 제목을 입력 하는 태그(본문)</h1><!-- 크기 별로 h1,h2,h3,h4,h5,h6 로 나뉘어져 있다.-->
            <b>굵은 글씨를 지정한다.</b> <br>
            일반 글씨 <br>
            <i> 글씨 체를 기울림 한다.</i> <br>
            <tt> 타자기 글씨 체를 출력한다.</tt> <br>
            <em> 특정 글자를 강조할 때 사용 합니다. i태그와 비슷한 역할입니다. </em><br>
            <i> 이탈리체로 표시 할 때 사용합니다.</i><br>
            <strong> b태그와 같은 역할 입니다. 글자를 굵게 만들어 줍니다.</strong> <br>
            <font size="7">글자의 크기를 나타 냅니다 <br>글의 크기는 1~7까지로 지정됩니다.</font> <br>
            <font color="#FF0080">글자의 색상를 나타 냅니다.</font> <br>
            <font size="7"><font color="#ff0080"> 위의 두가지 응용사례입니다.</font> <br>
            <!-- 여기까지 글자 태그 항목 입니다.-->
            <!-- 여기서부터는 공통 서식 태그 항목 입니다.-->
            <p>단락을 정의 합니다. 단락의 정리 후 1칸을 공백으로 남깁니다.</p>
            <!--<p>로도 사용이 가능 합니다.-->
            이렇게 한칸이 비게 됩니다.
            <p align="left"> 왼쪽 정렬</p>
            <p align="right"> 오른쪽 정렬</p>
            <p align="center"> 중간 정렬</p>
            <p align="justify"> 나중에 문서의 끝이 변경 될 때 가장 끝 부분에 일정하게 맞춰주는 기능입니다.</p>
            <!--한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날때
            그 가장자리 부분을 일정하게 맞춰주는 기능입니다.
            언듯보면 왼쪽정렬(기본정렬)과 비슷하지만 줄바꿈이 일어난
            오른쪽 가장자리를 비교하면 그 차이를 확인할 수 있습니다-->
          <br>줄 바꿈을 사용 합니다.</br>다음 줄로 내려 가 집니다.<!--<br>로만 사용도 가능 합니다.-->
            <blockquote>블럭 인용문 및 양측의 들여 쓰기 텍스트를 정의 합니다.</blockquote>
            예로
            <blockquote cite="https://terms.naver.com/entry.nhn?docId=1111278&cid=40942&categoryId=33383">
              <p>"정면 5칸, 측면 2칸, 중층(重層)의 우진각지붕 다포(多包)집이다.
              서울 도성의 남쪽 정문이라서 통칭 남대문(南大門)이라고 불린다.
              1395년(태조 4)에 짓기 시작하여 1398년(태조 7)에 완성되었고,
              1447년(세종 29)에 개축하였다. 그러나 1961∼1963년에 있었던 해체,
              수리에 의한 조사에서 1479년(성종 10)에도 비교적 대규모의 보수공사가 있었던 것이 밝혀졌다.</p>

              <cite>[네이버 지식백과] 서울 숭례문 (두산백과)</cite></blockquote>
            </blockquote> <!-- 저 사이트 명이 왜 들어 가는지 모르겠네요-->
            <ol>주된 목록의 시작과 끝을 의미 합니다.
            <li>이렇게</li>
            <li>저렇게</li>
            <li>요렇게</li>
            <li>조렇게</li></ol>
            <ul>순서가 지정되지 않은 목록의 시작과 끝을 정의합니다.
            <li>이렇게</li>
            <li>저렇게</li>
            <li>요렇게</li>
            <li>조렇게</li></ul><!-- ol은 숫자로 목록이 있는 목록을 UL 은 순서가 없는 목록을 작성합니다.-->
                  <h1>오늘은 여기까지~!!</h1>
            </body>
</html>

반응형