HTML 기초와 여러가지 태그

HTML(HyperText Markup Language)

- hypertext: 웹페이지에서 다른 페이지로 이동할 수 있도록 하는 것

- markup: 문서나 데이터의 구조를 명기하는 언어

markup 정리

 

 

 

html의 구조

html의 구조

1) 태그

head 태그: 눈에 보이지 않는 내용이 들어감(참조 링크, 제목 등의 기타정보)

body 태그: 눈에 보이는 내용이 들어감

#  head태그와 body태그는 무조건 한 번만 사용됨.

 

2) 요소(Element): 시작태그와 종료태그, 그 사이 내용

• 빈 요소: 내용 없이 구조적인 기능만 하는 요소(닫는 태그 필요X).

ex) <br>(줄 바꿈), <hr>(한 줄)

• 블록 요소: 전체 너비*가로) 100%를 차지(=줄 바꿈 효과).

                         모든 인라인 요소를 포함하거나 다른 블록 요소를 포함.

ex) <h1></h1>, <div></div>, <p></p>

#  <div>태그는 다른 블록 요소를 포함(div태그는 p태그를 포함함)

#  p태그는 인라인 요소만 포함함(ex. a/span/strong 태그), 다른 블록 요소를 포함하지 않음

#  <div>태그는 영역을 나누는 용도, <p>태그는 텍스트 정보 작성

• 인라인 요소: 필요한 공간만 차지하는 요소

                            블록 요소 안에 포함되어 있는 것으로 인라인 요소만 포함할 수 있음(블록 요소 포함 불가)

ex) <a></a>, <span></span>, <strong></strong>

 

3) 속성(attribute name):태그를 보조하는 명령어, 태그 안 쪽에서 작동.

                                      태그마다 사용가능한 속성이 정해져 있음.

ex) id, class, style, height, width 등

#  id, class. style속성은 모든 요소가 사용가능함.

 

 

 

자주 사용되는 태그 정리

<img>태그: 이미지를 나타내는 태그

#  주로 사용하는 속성: src, height, width, title, alt

    src: 이미지 경로

    height: 이미지 세로 길이

    width: 이미지 가로 길이

    title: 마우스를 이미지 위에 올렸을 때 나타나는 이름

    alt: 이미지가 깨졌을 때 나타나는 이름

 

<a>태그: 하이퍼링크를 걸어주는 태그

#  주로 사용하는 속성: traget(기본값: "_self")

    target="_self": 주소 클릭 시 현재 페이지에서 페이지 열림

    target="_blank": 주소 클릭 시 새 페이지에서 페이지 열림

 

<ul>태그: 순서가 없는 태그

<ol>태그: 순서가 있는 태그

#  <li>태그를 사용해서 내용을 넣음

#  <ul>태그와 <ol>태그는 서로 자식 혹은 부모 태그가 될 수 있음

# <ol>태그에서 주로 사용하는 속성: type, start, reversed

    type: 순서를 나타내는 속성(기본값: 1,2,3...)

    start: 순서의 시작을 지정하는 속성(start="3"일 경우, 3부터 순서가 시작됨)

    reversed: 순서를 반대로 배열하는 속성(3,2,1..)

 

<table>태그: 표를 만드는 태그

#  주로 사용하는 속성

    border: 테두리(경계선)

    cellpadding: 칸 안에서의 여백

    cellspacing: 경계선(테두리)사이의 여백

#  <tr>태그: 가로(줄)

#  <td>태그: 칸

    <td>태그에만 존재하는 속성

          - colspan: 열 병합

          - rowspan: 행 병합