HTML 태그 정리

밤무스·2022년 2월 22일
0

HTML은 따로 폰트/크기를 지정하지 않으면 브라우저의 Default값으로 표시된다.

- <!DOCTYPE html> : 이 코드가 HTML 코드라는 것을 나타내기 위해 관용적으로 사용

- <html></html> : HTML 코드 (head, body)를 묶어주는 태그

  - <head></head> : 본문(Body)를 설명하는 부분을 묶어주는 태그

    - <title></title> : 웹 페이지의 제목을 명시. 검색 엔진에 사용됨

    - <meta> : 웹 서버와 웹 브라우저 간에 상호 교환되는 정보를 정의 
      (문자 인코딩 방식 지정: charset="utf-8")

  - <body></body> : 본문(Body)를 묶어주는 태그
  
    - <a></a> : 하이퍼링크를 걸어주는 태그 (anchor)
      (링크 연결: href="URL")
      (새 탭에서 열기: target="_blank" [default:현재 페이지])

    - <h1></h1> to <h6></h6> : 제목 (Heading) 태그

    - <p></p> : 단락 (Paragraph) 태그

    - <li></li> : 요소를 나열할 때 사용. <ul></ul> 혹은 <ol></ol>과 같은 부모 태그로 그룹핑

    - <ul></ul> : Unordered List. Bullet point 형태로 나열

    - <ol></ol> : Ordered List. Numbering 형태로 나열

    - <img> : 이미지 첨부
      (파일 위치 지정: src="filepath")

    - <strong></strong>, <b></b> : Bold 처리

    - <u></u> : 밑줄 긑기

    - <br> : 줄 바꾸기
    
    - <table></table>: 테이블 표현
    	- <thead></thead>, <th></th>: 테이블의 열 (column) 리스트 나열; thead는 column title을 위한 행row; th는 각 열column의 title (head)
        - <tr></tr>, <td></td>: 테이블의 행 (row) 및 셀 나열; tr은 각 row; td는 각 row (tr)의 각 셀
        - border="[int]": 각 cell에 대해 테두리 표시 (int는 선 두께)
    
    - <form></form>: 웹 페이지의 입력 양식을 위한 태그
    	- method="get": HTTP GET 메소드를 사용해서 URL에 폼 입력 데이터를 추가해 서버로 전달 (길이 제한, 보안 취약)
        - method="post": HTTP POST 메소드 사용 (길이 제한 X, 브라우저 캐싱 X, 보안 O)
        - action="[URL]": 해당 URL 절대 주소 혹은 상대 주소 페이지로 이동
    
        - <input></input>: 사용자 입력 값을 받을 수 있는 태그
            - type="email": 이메일 입력
            - type="password": 패스워드 입력
            - type="text": 평문 text 입력
            - type="color": 색상 선택
            - type="submit": form 태그 안에서 입력한 값들을 submit하는 버튼 생성
            - type="radio": 같은 name을 가진 것 중 하나만 선택할 수 있는 라디오(옵션)버튼 생성
            - value="[value]": 입력창에 value가 입력된 채로 나타남
            - placeholder="[value]": 입력창에 value가 표시되지만 입력 시 사라짐

        - <select></select>: 고정된 여러가지 값 중 하나를 선택할 수 있는 콤보박스 생성
            - <option></option>: 콤보박스 안의 각 선택지
                - value="[value]": value는 콤보박스에 표시되는 텍스트; 내부적인 값은 태그 사이에 정의됨

        - <textarea></textarea>: 평문 text를 입력할 수 있는 텍스트박스 (페이지 상에서 크기 조절 가능)
        	- cols="[int]": 가로 길이의 초기값
            - rows="[int]": 세로 길이의 초기값

0개의 댓글