IT정보

HTML 이란 / 사용 하는 방법

dachshund-dream 2018. 4. 24.
반응형



HTML이란

어렵죠. 쉽게 설명해서 알아볼게요.


HyperText Markup Language

HTML은 웹 페이지를 작성하기 위한 표준 마크업 언어





기본적인 HTML 구성


<!DOCTYPE html> HTML5 정의


<html> 루트 엘리먼트


<head> 문서에 대한 메타정보 포함


<title> 문서의 타이틀 지정


<body> 페이지의 컨텐츠



기본적인 태그의 종류


제목태그 <h1> ~ <h6>


단락태그 <p>


             <pre> 쓴 그대로 반영


링크태그 <a href="주소">


이미지태그<img src="주소" alt="대체 텍스트" width="너비" height="높이">


줄바꿈태그 <br> (닫는태그 없음)


수평선태그 <hr>


스타일태그 <style> 색상,글꼴,배경색 등.. 변경



HTML 속성


언어 선언 속성 <html lang="ko"> 필요한 응용프로그램, 검색엔진에 중요


제목 속성 <p title=""> title 속성 값이 툴팁으로 표시(단락 위에 마우스)


링크 속성 <a href=""> 링크 주소


크기 속성 <img src="주소" alt="대체 텍스트" width="너비" height="높이">


alt 속성 이미지를 표시할 수 없을때 대체 텍스트 지정




HTML 서식


<b> 굵게


<strong> 중요 텍스트


<i> 기울임


<em> 강조


<mark> 하이라이트


<small> 작은 텍스트


<del> 삭제된 텍스트


<ins> 삽입된 텍스트


<sub> 아랫첨자


<sup> 윗첨자



HTML 인용


<q> 따옴표 삽입


<blockquote cite=""> 인용구 삽입


<abbr title=""> 약어 정의


<address> 문서의 연락처 정보 정의 (이탤릭체 표시)


<cite> 작품의 제목 (이탤릭체 표시)


<bdo dir="rtl"> 텍스트 방향 재정의 



HTML 컴퓨터 코드


<kba> 키보드 입력 정의


<samp> 샘플 출력 정의


<code> 코드의 일부 정의 <pre>코드와 같이 사용


<var> 변수 정의




HTML 주석


<!-- -->


조건부 댓글


<!-- [if IE 9]> <![endif]-->




HTML 색상


rgb(255,255,255) or 16진법 #FFFFFF




HTML 링크


링크 전체 작성 or 로컬 링크 작성


로컬링크란 동일한 웹 사이트에서 상대url 지정 ex)html_images.asp




타겟 속성


<a href="" target="_blank">


_blank 새창이나 탭에서 문서 열기


_self 같은 창/탭에 문서 열기 (기본값)


_parent 부모 프레임에서 문서 열기


_top 윈도우 전체에 열기


 framename 명명된 프레임에 문서 열기


링크로 이미지를 사용하는게 일반적임


하이퍼링크 밑줄 없애기 text-decoration:none 설정



책갈피 만들기


id값을 준 뒤 <a href="#id">로 추가



HTML 이미지


<img src="주소" alt="대체텍스트" style="스타일">


닫는태그 x


항상 이미지 폭,높이 지정/미지정시 이미지 로드시 페이지 깜빡임


스타일 속성을 직접 사용하는것이 좋음


<a>태그를 사용해 이미지에 링크 사용


border:0; 속성은 IE9 이전을 위해 추가


이미지맵 <map>태그 사용


ex)


<img src="abc.gif" alt="dachshund-of-dream" usemap="#dachshund-of-dream" style="width:145px;height:126px;">


<map name="dachshund-of-dream">

  <area shape="rect" coords="0,0,52,126" alt="Sun" href="sun.htm">

  <area shape="circle" coords="60,58,3" alt="Mercury" href="mercur.htm">

  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>



HTML 테이블


<tr> 테이블 정의


<th> 테이블 헤더 정의


<td> 테이블 데이터 정의 (text,img,list 등등 HTML모든 요소 포함 가능)


<caption> 캡션 추가시 사용


<colgroup>,<col>열 그룹 지정/ <caption> 뒤 <tr> 전에 지정해야함


<thead>,<tbody>,<tfoot> 테이블을 부분화함


테두리 설정시 table, th, td 모두에 정의해야함


축소 테두리 사용시 border-collapse: collapse; 사용


간격 사용시 padding 사용


정렬시 text-align 사용


테이블 간격 사용시 border-spacing 사용


열 병합시 <th colspan="2"> 사용


행 병합시 <th rowspan="2"> 사용


HTML 리스트


<ul> 정렬되지 않은 리스트 style="list-style-type:~"


style - disc(기본값),circle,square,none


<ol> 정렬된 리스트 type="~"


type - 1(기본값),A,a,I,i


Description List


<dl> 목록, <dt> 용어(이름), <dd> 설명


HTML 블록,인라인


블록-<div>,<hi>,<p>,<form>


인라인-<span>,<a>,<img>


<div> 다른 element의 container로 사용, style,class가 일반적


<span> text의 container로 사용, style,class가 일반적


div class는 .class명으로 스타일 설정


HTML iframe


웹 페이지 내에 웹 페이지를 표시하기 위해 사용


<iframe src="url" height="~' width="~"></iframe>


style="border:none;" 테두리 제거


링크사용시 iframe에 name값을주고 a태그로 target지정


ex)<iframe src="demo_iframe.htm" name="iframe_a"></iframe>


<p><a href="~" target="iframe_a">babo</a></p>


HTML JavaScript


JS로 HTML요소 선택시 document.getElementById(ID) 사용


.innerHTML로 내용변경


.style.fontSize="10px";로 스타일변경


<nonscript> 스크립트를 지원하지 않는 브라우저를 위한 대체 컨텐츠


HTML <head>


<title> <style> <link> <script> 포함


<meta charset="UTF-8">사용 문자 집합 정의


<meta name="정의" content="설명">


<meta http-equiv="refresh" content="30"> 30초마다 새로고침


<base> 모든 상대 url의 기본 url과 베이스 대상 지정


HTML 레이아웃


HTML5 시맨틱 요소


HTML <form>


<input type="~"> text/한줄의 텍스트 radio/선택버튼 submit/제출버튼 name속성 생략시 데이터 전송 x


<form action="양식 데이터를 처리하는서버,미지정시 현재페이지">


method 속성 get,post


get-크기제한, 짧은양 적합, 중요한정보 x


post-크기제한x 대용량 데이터, 중요한 정보


<fieldset> 그룹 관련 데이터에 사용


<legend> <fieldset> 캡션 정의


HTML 폼 양식


*<input> 여러 방법으로 표현 가능


*<select name="~"> 선택 옵션


 <option value="~" selected></option> selected속성-미리 선택


 </select>


*<textarea name="~" rows="~" cols="~"> 텍스트 영역 cols폭 rows 높이


*<button type="button"  onclick="alert('Hello dachshund!')">button</button> 클릭버튼


*<datalist> <input>안에 들어가며 datalist의 id값과 input의 list 값이 같아야함


*<keygen name="security"> 사용자를 인증하는 보안방법 제공/ 클라이언트 인증서 생성시 사용가능


*<output> 계산결과를 보여줌


HTML 입력 유형


<input type="text"> 한줄의 텍스트필드


password 별표or원으로 표시


submit 입력처리,제출/ value를 생략하면 버튼생김


reset 초기화


radio 선택버튼


checkbox 체크박스


button 버튼 <input type="button" value="Click ME" onClick='alert('Hello dachshund!')>


color 색상 선택기 표시,선택


date min,max로 날짜 설정


datetime


datetime-local 날짜,시간 선택


email 이메일 형식 입력 일부 스마트폰은 키보드에 .com추가


month 달 선택


week 주 선택


number min,max설정후 숫자 입력필드표시, step은 배수설정


range min,max로 조절


search 검색기능


tel 전화번호포함 (사파리8지원)


time 시간 선택


url url입력, 일부 스마트폰은 키보드에 .com추가


HTML 입력 특성


value로 초기값 지정


readonly 읽기전용,수정불가


disabled 비활성화 필드


size="10" 크기


maxlength="10"  최대길이


autocomplete="on" 자동완성 사용자가 이전에 입력한 값에 기초해 완료<form>의<input>에서 작동


novalidate  ??


autofocus 자동커서


form id값을주고 form 밖에서 같은값을 form속성으로 달면 form안의 내용으로 인식




*제출(submit, image)에 사용


formaction  form의 action을 무시하고 formaction으로 


formenctype 인코딩 방법 지정


formmethod <form>의 method무시


formnovalidate <novalidate> 무시


formtarget 




pattern 이메일,비밀번호 등 패턴을 설명


require 필수입력사항


step 단계속성, 숫자,범위,날짜 등 에 사용



반응형

댓글