나의 기록, 현진록

[Web] HTML 기본 구조와 태그 본문

Programming/Web

[Web] HTML 기본 구조와 태그

guswlsdk 2017. 7. 3. 23:03
반응형

HTML이란?


웹을 위한 언어



HTML 기본 구조


1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
/* title이나 meta 태그 등을 입력*/
</head>
 
<body>
/* 내용 입력 */
</body>
</html>
cs




HTML 기본 태그


  • <!DOCTYPE html> : DTD 태그이다. HTML5 표준안을 사용할 경우에 html을 사용한다.
            DTD : 브라우저에게 웹 페이지의 문서 종류를 알려주는 선언문으로 XML 문서에 사용될 구성요소를 정의해 놓은 것이다.
  • <html> : HTML 문서의 속성을 지정하기 위한 태그이다. title 태그 또는 meta 태그 등을 입력한다.
  • <title> : HTML의 제목을 선언하는 태그이다.
  • <meta> : HTML의 부가 정보를 선언하는 태그이다.
  • <body> : HTML 문서의 내용, 즉 웹 브라우저에 표시될 내용을 body 태그 안에 넣으면 된다.

HTML 텍스트 태그

  • <h> : 제목(heading)을 표시할 때 사용된다. 폰트 크기는 <h1>이 가장 크고 <h6>가 가장 작다.
  • <p> : 새 문단(paragraph)을 연다. <p>태그를 사용할 때 문단 하단에 1줄의 공백이 생긴다.
  • <b> : 글꼴 두껍게<bold> 효과
  • <i> : 글꼴 기울임<italic> 효과
  • <strong> : 글꼴 강조 효과

  • <ins> : 밑줄을 표시한다.

  • <del> : 취소선을 표시한다.

  • <hr /> : 가로줄 삽입

  • <sup> : 위첨자 표시

  • <sub> : 아래첨자 표시

  • <small> : 텍스트 조금 더 작게 표시



HTML 목록(리스트) 태그

  • <ul> : 순서가 없는 목록
  • <ol> : 순서가 있는 목록
  • <li> : 목록에서 각 항목 내용

HTML 링크, 이미지 태그

  • <a> : 하이퍼링크 생성 태그, href 속성을 사용
            <a href="링크할 페이지">내용</a>
  • <img /> : 이미지 추가 태그
    1. src : 이미지 파일의 경로 지정
    2. alt : 이미지에 대한 설명 제공
    3. title : 이미지에 대한 추가 정보 제공
    4. height, width : 이미지의 세로폭, 가로폭 지정

HTML 테이블 태그

  • <table> : 테이블을 만드는 태그
  • <tr> : 행을 나타냄
  • <td> : 셀을 표현
  • <th> : 행 또는 열의 머리말, 가운데 정렬과 글꼴 굵게로 표시


반응형
저작자표시

'Programming > Web' 카테고리의 다른 글

[Web] PHP GET과 POST의 차이점  (0) 2017.07.11
[Web] PHP 로그인/로그아웃/회원가입  (8) 2017.07.11
[Web] APM 구동원리  (0) 2017.07.06
[Web] APM에 대해서  (0) 2017.07.06
[Web] 웹 서버와 웹 브라우저의 통신 구조  (0) 2017.07.03
'Programming/Web' Related Articles more