HTML/태그

< HTML
편집 시 주의사항

그냥 수정할 경우 태그 예시에 적혀있는 <가 <로 바뀌어 태그가 적용되어 버립니다. (편집버튼을 눌러보면 <가 <로 바뀌어 있는 것을 확인할 수 있습니다.) 따라서 여기를 복사한 후 편집창에 덮어쓰기해서 수정하시기 바랍니다.
  • 상위 문서: HTML

목차

 [숨기기

1 개요

2 기본 구조

  • <!DOCTYPE>: 마크업 언어용 DTD 태그이다. HTML5의 경우 맨 위에 다음과 같이 써 주면 된다.

span style="color: #0000CC"html/spanspan style="color: #007700">

  • 위의 DTD를 제외한 전체를 이 태그로 둘러싼다.
  • : HTML 문서의 속성을 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다.
  • : HTML 문서의 본 모양을 나타내기 위한 태그이다. 표시될 문서의 레이아웃을 이 태그 안에 넣으면 된다. 속성으로 background=배경그림, bgcolor=배경색, text=글자색, link=링크색, vlink=방문링크색, alink=활성링크색 이렇게 6가지가 있었으나 [[CSS]]가 도입되면서부터 굳이 body 태그에 직접 속성을 지정해야 할 이유가 사라졌고 HTML5에서부터 지원하지 않게 되었다. 예를 들어, HTML 4.01 시절엔 body 태그를 다음과 같은 형식으로 쓸 수 있었다.
    • 이렇게 쓰면 배경색은 핑크, 글자색은 파랑, 링크색은 진분홍, 방문링크색은 보라, 활성링크색은 자주색으로 표시된다. 하지만 HTML5에서는 이렇게 지정하는 것을 지원하지 않기 때문에 다음과 같이 CSS로 대체해야 한다.

    body {
    
    background-color: pink;
    color: navy;
    }
    a:link {
    color: #ff0055;
    }
    a:visited {
    color: #5500ff;
    }
    a:active {
    color: #ff00ff;
    }

    • <title> : HTML의 제목을 선언하는 태그.
    • <meta> : HTML의 부가 정보를 선언하는 태그.
    • <charset> : 인코딩을 선언하는 태그로 HTML5에서 추가되었다. 이전까지는 <meta> 태그로 선언했었다.
    • <link> : 별도의 CSS 선언 파일, 파비콘[1] 등을 연결하는 태그.

    3 텍스트 관련

    • <h>: 제목(heading)을 표시할 때 사용된다.

      4 이 가장 크고
      이 가장 작다. 크기는 브라우저마다 표시하는 방법이 달라 다르게 나타날 수 있다. CSS를 쓰면 크기, 색상, 폰트 등을 변경할 수 있다.</li></ul>

      1단계

      2단계

      3단계

      4단계
      5단계
      6단계
      1단계
      2단계
      3단계
      4단계
      5단계
      6단계
      • : 새 문단(paragraph)을 연다.

        로 닫는다. 극초창기에는 닫는 태그가 없고 단순히 문단을 구분하는 역할만 했는데 HTML 2.0에서 닫는 태그가 추가되어 문단을 묶어주는 역할을 하게 되었다. 이 태그를 쓸 경우 기본적으로 문단 하단에 약 1줄 가량의 빈 공간이 생기기 때문에
        을 선호하는 경우가 많은데, 문단이라면

        태그로 묶어주는 것이 올바른 사용법이다. 빈 공간은 CSS를 지정해서 없앨 수 있다.</li></ul>

        2015년 4월 17일에 만들어진 한국어 위키위키. 리그베다 위키의 포크사이트로 시작했다.

        리그베다 위키는 2015년 4월 약관 개정, 사유화 및 영리화 논란으로 인해 홍역을 앓았으며, 급기야 4월 17일에는 해킹을 당하여 데이터가 4월 15일로 롤백 되고 편집이 모두 막히는 초유의 사태가 일어났다.


        2015년 4월 17일에 만들어진 한국어 위키위키. 리그베다 위키의 포크사이트로 시작했다.

        리그베다 위키는 2015년 4월 약관 개정, 사유화 및 영리화 논란으로 인해 홍역을 앓았으며, 급기야 4월 17일에는 해킹을 당하여 데이터가 4월 15일로 롤백 되고 편집이 모두 막히는 초유의 사태가 일어났다.

        • : 두껍게(bold) 효과를 준다. 그러나 HTML 4.01부터 비권장 태그로 들어갔는데, 이 이유는 이 태그가 비주얼적인 효과를 주기 위한 태그라 비권장으로 지정된 것. 강조의 의미를 줄 때는 태그로 대체하고 그 이외에는 CSS의 font-weight: bold; 속성으로 쓸 것을 권장하고 있다.[2] 하지만 HTML5에서 보다 약한 의미의 강조로 다시 복귀했다.</li></ul>
          : 텍스트를 기울임꼴(italic)로 표시한다. 기술 용어, 외국어, 일반적으로 기울임꼴로 사용되는 용어 등을 강조한다.
          굵게 표시합니다.
          기울임꼴로 표시됩니다.
          

          굵게 표시합니다.
          기울임꼴로 표시됩니다.
          /div>
          • : 포함된 텍스트를 강하게 강조할 때 사용한다.</li></ul>
            : 보다 약한 강조를 나타낼 때 사용한다.
            강하게 강조합니다.
            약하게 강조합니다.
            

            강하게 강조합니다.
            약하게 강조합니다.
            • : 문서에 삽입(insert)된 텍스트를 표시한다.</li></ul>
              : 문서에서 삭제(delete)된 텍스트를 표시한다. 당신이 생각하는 그거다
              밑줄이 표시됩니다.
              취소선이 표시됩니다.
              

              밑줄이 표시됩니다.
              취소선이 표시됩니다.
              • : 텍스트를 위첨자(superscript)로 표시한다.</li></ul>
                : 텍스트를 아래첨자(subscript)로 표시한다.
                E=MC2
                H2O는 산소. 물은 O2아니냐? 문과출신인 나도 알고있음
                

                E=MC2
                H2O는 산소. 물은 O2아니냐? 문과출신인 나도 알고있음

                • : 문단 내 줄바꿈(line break). 강제개행을 하는 태그이다. 문단의 흐름을 해치기 때문에 권장되는 태그는 아니다.

                : 가로줄(horizontal rule)을 넣는다.
                ,
                같은 태그는 닫는 태그 없이 하나만으로 작동하는 태그이다. 이런 태그는 닫는 태그 대신 슬래시를 쓴다.

                2015년 4월 17일에 만들어진 한국어 위키위키. />리그베다 위키의 포크사이트로 시작했다.
                 />
                리그베다 위키는 2015년 4월 약관 개정, 사유화 및 영리화 논란으로 인해 홍역을 앓았으며, />급기야 4월 17일에는 해킹을 당하여 데이터가 4월 15일로 롤백 되고 편집이 모두 막히는 초유의 사태가 일어났다.
                

                2015년 4월 17일에 만들어진 한국어 위키위키.
                리그베다 위키의 포크사이트로 시작했다.


                리그베다 위키는 2015년 4월 약관 개정, 사유화 및 영리화 논란으로 인해 홍역을 앓았으며,

                급기야 4월 17일에는 해킹을 당하여 데이터가 4월 15일로 롤백 되고 편집이 모두 막히는 초유의 사태가 일어났다.

                목록 관련

                  • : 순서 없는 목록(unordered list)을 표시한다.
                • : 목록에서 각 항목(list item)은
                • 사이에 넣는다.

                      
                  • 나무위키의 문서는 독자를 위한 문서여야 합니다.
                  •   
                  • 나무위키의 문서는 독자에게 정보를 제공해야 합니다.
                  •   
                  • 나무위키의 문서는 독자에게 재미를 제공해야 합니다.

                  • 나무위키의 문서는 독자를 위한 문서여야 합니다.
                  • 나무위키의 문서는 독자에게 정보를 제공해야 합니다.
                  • 나무위키의 문서는 독자에게 재미를 제공해야 합니다.

                    1. : 순서 있는 목록(ordered list)을 표시한다.</ul>

                          
                      1. 태그를 쓴다.
                      2.   
                      3. 태그 사이에 글자를 쓴다.
                      4.   
                      5. ??????
                      6.   
                      7. PROFIT!!

                      1. 태그를 쓴다.
                      2. 태그 사이에 글자를 쓴다.
                      3.  ??????
                      4. PROFIT!!

                      • 사이에 또 목록을 넣으면 하위 목록도 가능하다.

                          
                      • 첫 번째
                      •   
                      • 두 번째     
                                
                        • 두 번째 속 첫 번째
                        •       
                        • 두 번째 속 두 번째
                        •     
                          
                      •   
                      • 세 번째

                      • 첫 번째
                      • 두 번째
                        • 두 번째 속 첫 번째
                        • 두 번째 속 두 번째
                      • 세 번째

                      4.1 링크, 이미지 관련

                      • <a>: 하이퍼링크를 생성하는 태그이다. href 속성을 써서 <a href="링크할 페이지">내용</a>와 같이 작성한다.

                       href="https://namu.wiki">나무위키:대문
                      

                      나무위키:대문

                      • : 페이지에 이미지를 추가하는 태그이다.
                      src: 이미지파일의 경로를 지정한다.
                      alt: 이미지를 볼 수 없는 경우에 이미지에 대한 설명을 제공한다.[3]
                      title: 이미지에 대한 추가 정보를 제공한다. 세피로트 이미지에 마우스를 갖다대면 말풍선으로 뜨는 것을 확인할 수 있다.
                      height, width: 이미지의 세로, 가로폭을 지정한다.

                       src="/file/세피로트sd1.png"
                      alt="세피로트 SD버전" title="세피로트" width="200px" />
                      
                      "200"px

                      4.2 테이블 관련

                      • : 테이블을 만드는 태그이다.</li></ul>
                        : 행(table row)을 시작한다.
                        : 표의 내용(table data), 셀을 표현한다.
                        
                          
                            
                            
                            
                          
                          
                            
                            
                            
                          

                        : 테이블의 행, 열의 머리말(table heading)을 나타낸다. 기본적으로 가운데로 정렬되고 굵은 글씨로 표시된다.

                        
                          
                            
                            
                            
                          
                          
                            
                            
                            
                          
                        날짜수입수출
                        1월 1일100,000100,000

                        날짜수입수출
                        1월 1일100,000100,000

                        • colspan, rowspan속성으로 셀을 병합할 수 있다. colspan은 열 병합, rowspan은 행을 병합한다.

                        
                          
                            
                            
                            
                            
                          
                          
                            
                             rowspan="2">국어
                            
                            
                          
                          
                            
                            
                            
                            
                          
                        1교시수학영어
                        2교시과학사회

                        1교시국어수학영어
                        2교시과학사회

                        4.3

                        CGI(PHP, ASP, JSP 등)와 상호작용하기 위해 입력값을 받는 역할을 한다.

                        • <form>: 입력값을 받는 영역을 지정한다. 한 페이지에 여러 개가 들어갈 수는 있지만, 영역 안에 영역이 들어가는 것은 불가능하다.
                        • <input>: 입력값 요소를 지정한다. type에 따라 다른 입력값을 취한다.
                          • text : 한 줄 짜리 문자열 값. 가본값이다.
                          • number : 숫자.
                          • url : 도메인 주소.
                          • email : 이메일.
                          • tel : 전화번호.
                          • search : 검색어.
                          • range : 지정한 범위의 숫자.
                          • color : 색.
                          • date : 날짜.
                          • time : 시각.
                          • datetime : 날짜+시각.
                          • checkbox : 선택/해제할 수 있는 항목.
                          • radio : 선택/해제할 수 있는 항목이나 중복 선택은 불가능하다.
                          • button : 누를 수 있는 버튼을 생성한다.
                          • submit : 누를 경우 입력값을 전송시키는 버튼을 생성한다.
                          • reset : 누를 경우 입력값을 초기화시키는 버튼을 생성한다.
                          • hidden : 투명라인(...). 입력값을 수정하지 않고 곧바로 보낼 때 쓰인다.
                          • file : 파일 업로드에 쓰인다.
                        • <textarea> : 여러 줄의 문자열 값을 받는다.
                        • <button> : <input type="button">와 대동소이하다. 차이점은 태그 내에도 HTML 지정이 가능해서 표현의 폭이 넓다.
                        • <output>: input 태그처럼 입력값이지만 수정할 수 없다. 외형상으로는 그냥 문자열.
                        • <datalist> : 검색어에 들어갈 목록을 지정한다.
                        • <select> : 선택 목록.
                          • <option> : 선택 목록에 들어갈 항목. <input type="radio">와 대동소이하다.
                        • <legend> : 나는 전설이다 범례를 지정한다.
                        • <label> : 해당 요소의 이름을 지정한다. 해당 이름을 클릭하면 요소가 자동으로 선택된다.

                        4.4 기타

                        • <iframe>: 페이지 안에서 또 페이지를 볼 수 있다. 예를 들면 문서에서 구글 지도 등을 넣는 것이 있다.
                        src: 넣을 페이지의 주소를 지정한다.
                        height, width: 프레임의 높이, 너비를 지정한다.
                        frameborder: 프레임의 테두리 표시 여부를 지정한다. 0은 표시하지 않음, 1은 표시함.

                         src="https://namu.wiki"
                          height="400px" width="100%" frameborder="0">


                        이런 식으로 위키 안에서 위키질을 할 수 있다.인셉션 위키안에서 위키안에서 위키안에서 위키안에서..... 위키를 해보자.

                        [4]

                        • <embed>: 외부 프로그램을 임베드하여 다양한 효과를 준다. HTML 4.01에서 삭제되고 <object>로 대체되었으나 HTML 5 규격에서 다시 표준으로 들어갔다.
                        • <style>: CSS 사용. 되도록이면 <link> 태그를 쓰기를 권장한다.
                        • <script>: 자바스크립트나 VB스크립트 사용.
                        • <div>: 박스 또는 레이어. 일명 '웹 표준' 개념이 많은 사람들에게 퍼지게 된 이후 테이블 태그 대신 레이아웃을 만드는 데 자주 사용되고 있다. 태그를 디자인에 쓰면 안 되는 이유(영어) 사실 div만 남발하는 것도 올바른 사용법은 아니고, 용도에 따라 여러가지 태그를 적절히 사용하는 것이 중요하다. <div> 이외에도 많은 태그가 <div>와 같은 박스 스타일로 렌더링되기 때문에 CSS만 잘 지정하면 된다. </li></ul>

                          4.5 시맨틱 태그

                          HTML5에서 추가된 태그들이다. 디자인을 할 때 <table> 대신 <div>를 쓸 것을 권장했더니 그 부작용으로 코드가 온통 <div> 투성이라 알아보기 어렵다는 지적이 있었다. 그래서 HTML5에서 나온 것이 시맨틱 태그이다. HTML5 문서 참고.

                          4.6 비권장 태그

                          사용하지 않는 것이 권장되는 태그. 이 분류에는 많이 사용하였지만, HTML5에서 제거된 태그나 아직 실험단계이므로 권장하지 않는 태그 등이 들어간다. 앞으로의 홈페이지 제작에서는 사용하지 않는 것을 추천한다.

                          4.6.1 폐기된 태그

                          다음은 CSS로 대체할 수 있어 폐기된 태그들이다.

                          • <font>: 글꼴 특성을 지정한다. 글꼴 이름이나 크기나 기타 등등. HTML 4.01 비권장 태그이므로 <span style="…">…</span>을 사용하자. 아예 HTML5 규격에서는 없어졌다. CSS를 쓰면 글꼴뿐만 아니라 조작할 수 있는 모양이 압도적으로 많으니 그걸 쓰자. 애초에 CSS가 도입된 이유가 이런 <font> 태그와 같이 HTML 코드에 디자인적인 요소를 욱여넣다 보니 코드가 개판이 되어버리는 상황을 개선하기 위함이었다.
                          • <basefont>: 페이지의 기본 글꼴을 지정한다. 지정 가능한 범위는 글꼴 색과 모양, 크기였다. 하지만 CSS로 인해 굳이 이 태그를 써야 할 이유가 사라지면서 IE 9를 끝으로 지원 중단됨에 따라 완전히 사장되었다. 당연히 HTML5 규격에서도 없어졌다. 역시 조작할 수 있는 기본 모양이 압도적으로 많은 CSS를 쓰길 권장한다.
                          • <big>: 글꼴 크기를 상대적으로 크게 한다. HTML5에서 없어졌으니 크기를 숫자로 표현 할 수 있는 CSS를 쓰길 권장한다.
                          • <center>: 글자를 가운데 정렬한다. 이것도 HTML5에서 없어졌으니 오른쪽 정렬과 왼쪽 정렬 등 다양하게 표현할수 있는 CSS를 쓰자.
                          • <tt>: 텔레타이프 글꼴로 한다. HTML5에서 사용이 불가하니 더 다양한 글꼴을 표현할 수 있는 CSS를 쓰자.

                          다음은 그 외 사용성이나 접근성 등에 문제가 있어 폐기된 태그들이다.

                          • <bgsound>: 배경음악을 넣는 태그이다. IE 전용 비표준 태그이므로 <embed>나 HTML5에서 추가된 <audio> 등으로 대체하는 것을 추천한다.
                          • <frame>, <frameset>, <noframe>: 프레임(HTML 태그) 참고.
                          • <noembed>: 위의 <noframe>처럼 <embed> 태그를 지원하지 않는 브라우저에서 메시지를 대신 표시하도록 하는 태그였다. 하지만 <embed> 태그가 HTML5 표준에 포함됨에 따라 존재의 의미가 사라진 관계로 폐기되었다.

                          4.6.2 아직 실험 단계인 태그

                          • <dialog>: 다이얼로그 상자를 위한 태그이다. 아직은 크롬오페라에서만 지원하며 그마저도 아직 완전하지 않다.
                          • <hgroup>: 제목 태그(<h1>~<h6>)를 그룹으로 묶기 위한 태그이다.
                          • <menu>, <menuitem>: 메뉴를 위한 태그이다. 아직 제대로 지원되는 웹 브라우저가 없다.
                          • <picture>: HTML5에서 추가된 이미지 태그로 <audio> 태그와 <video> 태그에 대응한다.
                          1. 이동 홈페이지 제목과 같이 나오는 아이콘
                          2. 이동 이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다.
                          3. 이동 IE 구버전(7 이하)에서는 alt 속성이 title 속성으로 렌더링되는 버그가 있다.
                          4. 이동 할 수 없다. 동심파괴
                          이 문서의 내용 중 전체 또는 일부는 HTML문서에서 가져왔습니다.</div></div>