-
[생활코딩] HTML 정리HTML 2024. 4. 17. 00:11반응형
HTML(Hyper Text Markup Language)
Hyper Text : 하이퍼텍스트를 가장 중요한 특징으로 하는
Markup : 마크업이라는 형식을 가진
Language : 컴퓨터 프로그래밍 언어
기본문법
열리는 태그, 닫히는 태그, 콘텐츠로 구성됨
태그는 열리고 닫히는 구조임
열리는 태그와 닫히는 태그를 구분하기 위해 닫히는 태그 이름 앞에 /를 붙임
<h1>오늘의 명언</h1> 우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다. (도널드 커누스)strong 태그
텍스트를 강조/굵게 표시
h 태그
heading을 의미하며 제목을 나타냄
h1~h6까지 있음
하이퍼텍스트와 속성
<a></a> 태그
하이퍼링크를 걸어주는 태그
href
클릭시 이동할 링크
target
링크를 클릭시 창을 어떻게 열지 설정
title
해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정
- _self : 현재 페이지(기본값)
- _blank : 새 탭
- _parent : 부모 페이지로 iframe 등이 사용된 환경에서 쓰임
- _top : 최상위 페이지로 iframe 등이 사용된 환경에서 쓰임
- 프레임이름 : 직접 프레임이름을 명시해서 사용할 수도 있음
<a href="https://naver.com" target="_blank" title="네이버">네이버</a>
태그의 중첩과 목록
<ol> <li>기술소개</li> <li>기본문법</li> <li>하이퍼텍스트와 속성</li> <li>리스트와 태그의 중첩</li> </ol> <ul> <li>최진혁</li> <li>최유빈</li> <li>한이람</li> <li>한이은</li> </ul>- 기술소개
- 기본문법
- 하이퍼텍스트와 속성
- 리스트와 태그의 중첩
- 최진혁
- 최유빈
- 한이람
- 한이은
li 태그
list의 약자로 목록을 만드는 태그
ol 태그
ordered list의 약자로 번호를 메겨 순서가 있는 목록을 만드는 태그
ul 태그
unordered list의 약자로 순서가 없이 모양으로 목록을 만드는 태그
문서의 구조
<html> <head> <title>HTML - 수업소개</title> <meta charset="utf-8"> </head> <body> <h1>HTML</h1> <ol> <li>기술소개</li> <li>기본문법</li> <li>하이퍼텍스트와 속성</li> <li>리스트와 태그의 중첩</li> </ol> <h2>선행학습</h2> 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서는 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. </body> </html>html 태그 : html 문서를 의미하는 태그
head 태그 : 본문 이외의 정보를 모아 놓는 태그
title 태그 : 웹 브라우저의 탭 제목에 표시되는 텍스트를 지정하는 태그
meta 태그 : charset 속성을 이용하여 문자열 세트를 지정할 수 있음
body 태그 : 웹 페이지의 본문을 의미하는 태그
DOCTYPE
Document Type의 약자로 문서 형식 선언이라고 함
선언된 페이지의 HTML 버전이 무엇인지 웹 브라우저에게 알려주는 역할을 하는 선언문
대소문자 구분하지 않음
웹사이트 만들기
<!DOCTYPE html> <html> <head> <title>HTML - 수업소개</title> <meta charset="utf-8"> </head> <body> <h1><a href="index.html">HTML</a></h1> <ol> <li><a href="1.html">기술소개</a></li> <li><a href="2.html">기본문법</a></li> <li><a href="3.html">하이퍼텍스트와 속성</a></li> <li><a href="4.html">리스트와 태그의 중첩</a></li> </ol> <h2>선행학습</h2> 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서는 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. </body> </html>
단락 p 태그
paragraph의 줄임말로 단락을 표현할 때 사용함
<p>paragraph</p>줄바꿈 br 태그
HTML<br>CSSimg 태그
<img src="img.jpg" width="200" height="200" title="이미지이름" alt="이미지이름">src : url 혹은 경로 path
width, height : style (css에서 주로함)
title : 마우스 오버(hover)일 때 설명
alt : 이미지가 로딩이 안될 때 설명 (alternative)
표 table
<table border="2"> <thead> <tr> <th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th> </tr> </thead> <tbody> <tr> <td>최진혁</td> <td>남</td> <td rowspan="2">청주</td> <td>1000</td> </tr> <tr> <td>최유빈</td> <td>여</td> <td>500</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">합계</td> <td>1500</td> </tr> </tfoot> </table>tr : table row, 행
td : table data, 열
th : table header data
thead, tbody, tfoot : 시각적인 변화는 없으나 HTML은 정보를 담기위한 그릇이므로 표현하는 것이 좋음(안하면 브라우저가 알아서 함)
cf) thead, tbody, tfoot의 순서를 랜덤하게 두어도 브라우저가 알아서 순서 맞춰서 표로 만들어줌
rowspan, colspan : td의 속성 row, col기준으로 병합시킴
form 태그
사용자가 입력한 정보를 서비스를 제공하는 서버에 정보를 전송하기 위한 태그
name : 폼의 이름
action : 폼 데이터가 전송되는 백엔드 url
method : 폼 전송 방식(GET/POST)
<form action="/example/action_target.php" name = "person_info" method = "get">method
데이터를 전송하는 여러가지 방법
get은 url로 전송, post는 감추고 패킷에 넣어 전송
url에 노출될 수도 있기 때문에 보안적으로 post가 좋음
디폴트는 get 방식임
input 태그
type 속성 : text/password/submit/button 등
name 속성 : get/post 방식으로 넘길 때 인자이름, 구분자
value 속성 : 각 type 에 맞는 디폴트값을 설정, 사용자의 입력값도 value임
text
한줄 입력 텍스트
<input type="text name="id" value="default value">password
패스워드 입력 필드
<input type="password" name="pwd" value="defalut value">reset
사용자가 입력한 모든 정보가 초기화됨
<input type="reset">radio
여러 선택지 중 하나를 선택하는 태그
<input type="radio" name="color" value="black">checkbox
하나 혹은 여러값을 선택하거나 선택하지 않을 수 있는 태그
checked : 기본적으로 선택
<input type="checkbox" name="size" value="black" checked>button
클릭할 수 있는 버튼을 정의할 때 사용
submit과 다르게 버튼의 ui만 만들어짐
js와 같이 사용함
<input type="button" value="버튼" onclick="alert('hello world')">hidden
사용자가 볼 수 없지만 서버로 제출하는 숨겨진 입력 칸
<input type="hidden" name="hide" value="egoing">label 태그
사용자 인터페이스 요소의 라벨을 정의할 때 사용
<lable for="id_txt">id : </label> <input id="id_txt" type="text" name="id" value="default value">file
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="profile"> <input type="submit"> </form>textarea
여러줄의 텍스트를 입력하기 위한 태그
<textarea name="opinion" cols="30" rows="5"></textarea><br>dropdown list - select, option 태그
옵션 메뉴를 제공하는 태그
<select name="color"> <option value="red">붉은색</option> <option value="black">검은색</option> <option value="blue">파란색</option> </select>
font
시각적인 디자인
size는 3이 기본값으로 1부터 7까지 있음
HTML5에서는 더 이상 지원하지 않으며 대신 CSS를 사용해야함
<font size="5">Hello</font> world
meta
해당 문서에 대한 정보인 메타데이터를 정의할 때 사용함
<head> 요소 내부에 위치해야함
작성하지 않으면 화면이 깨질수 있음
1) 검색 엔진을 위한 키워드(keyword)를 정의하는 예제
<meta name="keyword" content="HTML, meta, tag, element, reference">2) 웹 페이지에 대한 설명(description)을 정의하는 예제
<meta name="description" content="HTML meta tag page">3) 문서의 저자(author)를 정의하는 예제
<meta name="author" content="HTML">4) 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제
<meta http-equiv="refresh" content="5;url=http://www.naver.com">5) 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제
<meta name="viewport" content="width=device-width, initial-scale=1.0">
semantic
의미가 있는 태그
콘텐츠의 형식 의미 구조를 설명함
<header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재함
검색엔진최적화
검진엔진에 잘 노출될 수 있도록 하는 활동
검색은 정보를 찾는 행위이고 웹에서 정보를 표현하는 언어는 HTML이기 때문에 의미에 맞는 HTML 코딩은 자연스럽게 검색엔진 최적화에 기여함
명확하고 독창적인 타이틀 사용
페이지의 콘텐츠를 정확하게 설명하는 제목
페이지마다 고유한 title 태그 작성
decription 메타 태그 활용
자연스러운 계층 구조 만들기
이동 경로를 위해 텍스트 링크를 사용
적절한 앵커 텍스트를 사용하면 연결된 내용을 보다 쉽게 전달할 수 있음
검색에 노출이 필요하지 않은 부분을 robots.txt로 제어
robots.txt를 보안 도구로 사용하지 않기
웹개발자 도구
웹 개발을 하는데 필요한 여러가지 기능을 모아둔 도구들로 웹브라우저별로 비슷한 기능의 도구를 제공하고 있음
모바일 지원
width=device-width : 화면의 폭을 디바이스 폭만큼 지정
initial-scale=:1.0" : 줌을 확대/축소하지 않고 웹페이지를 시작
<meta name="viewport" content="width=device-width, initial-scale="1.0">
새로운 제출양식
color : 색
date : 날짜
datetime : 국제표준시
datetime-local : 현재 지역의 시간
email : 이메일
month : 월
number : 숫자
range : 슬라이드로 숫자의 범위
search : 검색창
tel : 전화번호
time : 시간
url : 주소
week : 주
유효하지 않은 정보를 입력하게 되면 제출 버튼을 누를 때 거부하도록 브라우저가 동작
<form action="form.php"> <input type="number" name="age" min="10" max="15"> <input type="date" name="datev"> <input type="month" name="monthv"> <input type="week" name="weekv"> <input type="time" name="timev"> <input type="email" name="emailv"> <input type="search" name="searchv"> <input type="tel" name="telv"> <input type="url" name="urlv"> <input type="range" name="rangev" min="0" max="10"> <input type="submit"> </form>
새로운 속성들
autocomplete : 자동완성 기능을 활성화/비활성화
placeholder : 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시
autofocus : 자동으로 사용자의 커서가 특정 입력양식에 포커싱
<form action="login.php"> <input type="text" name="id" placeholder="id를 입력해주세요" autofocus> <input type="password" name="password" autocomplete="off" placeholder="비밀번호를 입력해주세요"> <input type="submit"> </form>
입력값 체크
유효성검사
속성과 다른 값을 입력하면 제출을 막고 사용자에게 어떤 문제가 있는지 통보
required : 필수 입력사항 설정
pattern : 정규표현식, 해당 조건에 맞는 문자를 찾음(첫문자는 알파벳으로 시작하고 마지막은 숫자로 끝나는 문자)
정규표현식 : 어떤 문자에서 어떤 패턴을 찾아서 그 패턴이 문자에 있는지 없는지 확인
. : 모든 문자
+ : 어떤 문자가 하나이상 옴
<form action="register.php"> <input type="text" name="id" placeholder="아이디를 입력해주세요" required pattern="[a-zA-Z].+[0-9]"> <input type="email" name="email" placeholder="이메일을 입력해주세요"> <input type="submit"> </form>반응형