정원영

정원영

항상 배우고 싶은 개발자입니다.

Category

HTML 3. Tag

업데이트:
2 분 소요

HTML - Tag

태그 이해하기

    열린 태그       닫힌태그
    시작 태그       종료태그
    --------       --------
    <태그명>  내용  </태그명>   <==요소(Element)

닫는 태그가 없는 형태

  • 빈(empty) 태그 (컨텐츠가 없는 태그)

자체 닫기 태그 (self closing tag)

  • img,input,link
    태그 시작       태그 종료
    ---------      
    <태그명 요소>  <-- 편리함
    <태그명 요소/> <-- 안전함

기능의 확장

        attribute
          ----
    <태그 속성="값">내용</태그>
               ---
               value

요소의 관계

            부모 요소
    ---------------------------
    <태그><태그>내용</태그></태그>
          ---------------
            자식 요소
  • 상위요소

alt alt

  • 하위요소

alt alt

대표적인 태그

h : 제목 태그

  • heading
  • 별도의 줄바꿈 없이 자동으로 줄이 바뀜
  • 숫자가 커질수록 글자 크기가 작아짐
  • HTML 한 페이지에서 h1 태그는 한번만 사용하기

h 태그가 중요한 이유

  • 검색 엔진이 h 태그에 기반하여 결과물을 보여주기 때문임.
  • 검색 되고 싶은 키워드가 있다면 h태그에 넣으면 좋음
    검색 엔진이 키워드를 찾는데 도움을 줌

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

alt

br(줄바꿈), p (문단 지정), div (영역 지정), span(범위 지정)

br

  • break (line break)
  • 한문단에서 줄을 바꿈
  • 줄 바꿈을 원하는 곳에서 작성
  • 줄바꿈이 1번 일어남

p

  • paragraph
  • 문단을 나눔
  • 줄바꿈이 2번 일어남
<p>
	새로 출시된 최신 Android는 사용자의 기기에서<br/>
	훨씬 더 개인적이고 안전하며 편리한 환경을 제공합니다. <br />
	UI 디자인을 변경하고 <br/>
	새로운 개인 정보 보호 기능을 도입하는 등 다각도로 개선했습니다.<br/>
</p>
<p>
 	Google Play 프로텍트는 정기적으로 보안을<br/>
 	업데이트하고 데이터 공유 방식을 제어합니다.<br />
 	Google은 25억 대가 넘는 활성 Android 기기를 <br/>
 	항상 보호하고 정보를 비공개로 유지하기 위해 최선을 다하고 있습니다.
</p>

alt

div

  • division
  • 페이지 안에서 영역을 나눔
  • 줄바꿈이 1번일어남
    스크린 리더, 음성 텍스트 변환을 <div>비롯한 새로운 방식으로</div> 
    주변 세상을 경험해 보세요.

alt

span

  • 줄바꿈을 하지 않은 채 글꼴, 색상, 여백 등을 조절
    스크린 리더, 음성 텍스트 변환을 <span>비롯한 새로운 방식으로</span>
    주변 세상을 경험해 보세요.

alt

  • 현재문서와 외부 소스를 연결해주는 태그
  • 현재 파일이 다른 파일과 연결되어 있는 관계 정보를 표현하는데 사용.
  • CSS는 외부 파일로 만들어 HTML에 연결해 줄때 사용.
    태그 시작                             태그 끝
    --------                              --
    <link rel = "속성값" href = "파일 경로" />
          ---           -----
          관계           경로
          relations      hyper-references
        (대상파일의 속성) (연결시 참조할 파일 위치)
    
    <link rel="stylesheet" href="link.css" />
  • ex) link.css

alt

img

  • 이미지를 나타내는 태그
  • HTML 문서에 이미지를 삽입하는 태그
    <img src="경로" alt="설명" width="폭" height="높이" />

alt alt

  • alt : alternative(대체하다), 이미지를 설명하는 문구
  • width : 이미지 가로 크기

form

  • 폼(입력 양식)을 만드는 태그
  • 사용자 입력 양식을 만들 때 사용함.

action 속성

  • 제출 버튼을 눌렀을 때 입력값을 처리할 대상을 지정하고 이동하라고 지정.

input

  • 사용자 입력을 받는 폼을 만듦
  • type=”submit” : 실행 버튼을 만듦
  • type=”text” : 텍스트 입력
  • id = “” : 이름을 지정해 줌.

label

  • 폼에 이름을 붙여줌
    <form>form 요소 태그</form>
  • form.html
    	<form action="myform.html">
		<label>First name : </label>
		<input type="text" id="fname" /> 
		
		<label>Last name : </label>
		<input type="text" id="Lname" />
		 
		<input type="submit" />
	</form>
  • myform.html
    <p>제출 되었습니다.</p>

alt alt

button

  • 버튼을 만드는 태그
  • 클릭할 버튼을 만들 때 사용함.
    <button type="속성값" >설명</button>
    <button type="reset">Click here!</button>

alt

type = “속성값”

  • button : 누룰 수 있는 버튼
  • submit : form을 제출하는 버튼
  • reset : form의 입력값을 초기화하는 버튼

ol, ul, li

  • 리스트를 나타내는 태그

ol : ordered list

  • 순서가 있는 리스트

ul : unordered list

  • 순서가 없는 리스트

li : list item

  • 목록을 구성하는 개별 항목(아이템)
    <h2>An Unordered List</h2>
	
	<ul>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ul>
	
	<h2>An Ordered List</h2>
	
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ol>

alt

a 태그

  • href 속성 : 링크로 이동할 수 있음
    <a href ="https://www.google.com">visit google</a>

alt

태그:

카테고리:

업데이트:

댓글남기기

참고