프로젝트
[HTML]HTML란? 기본 내용 정리
그레고리력
2021. 5. 13. 22:24
HTML(Hypertext Markup Language)이란?
- 웹페이지를 만드는데 사용하는 Hypertext(링크)를 중요 특징으로 하는 마크업 형식을 가지는 프로그래밍 언어
- 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지
태그와 속성
(<a target="_blank" href="[https://ko.wikipedia.org/wiki/도널드_커누스](https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4)" title="전설적인 프로그래머">도널드 커누스</a>)- (도널드 커누스)
- a 태그 : 링크가 있음을 알려줌
- href = "주소" 속성 이름 값으로 url을 주면 링크가 걸림
- target = "_blank" 속성, 새로운 창으로 열림
- 속성의 순서는 상관 없음
- a 태그는 자동으로 underline 이 생김
리스트 태그를 통한 목록화
<li> 태그, list : 각각의 항목이 구분되어 리스트화됨<ul>태그, unordered list: li 태그 들을 성격에 따라 그룹핑할 때 사용하는 태그<ol> 태그, ordered list: 순서가 있는 ul 태그, ex) 1. 2. 3. 4.
구분에 따른 문서의 구조화
<title> 태그: <title>브라우저 탭에 표시되는 이름</title><meta charset="utf-8"> : 문자열 인코딩 방식 지정- 성격에 따라
<head>, <body>로 구분
- DOCTYPE :
<!DOCTYPE html> 브라우저에게 어떤 형식으로 작성되었는지 알려주는 태그
주요 태그 정리
- p 태그 : paragraph, 단락, 문단, html은 줄바꿈을 무시하기 때문에 브라우저에게 어디에서 부터 어디까지 단락인지 알려주기 위해 필요함.
- p태그를 css를 활용하여 디자인하거나 br태그를 사용하여 간격을 조정할 수 있음
- br 태그 : 줄바꿈 태그
- img 태그 :
<img src="이미지 파일 이름" height="300" alt="대체 텍스트" title="마우스 댔을 때 나오는 텍스트">
- height, width 등으로 사이즈 조정, alt(이미지가 깨졌을 때 표시하는 텍스트)
- table 태그
<td>: 항목 하나하나를 묶어줌, table data<tr>: 각각을 행을 구분해줌, table row - 위 태그 데이터들을
<table>로 묶어줌
- border 속성 등으로 두께를 조정할 수 있음
<thead>, <tbody>: 테이블 안에서 헤드와 바디를 구분<thead> 안 데이터에 태그를 쓰면 진하게 표시됨
<tfoot> : 가장 바닥부분에 깔림- form 태그 : 사용자가 입력한 정보를 서버쪽으로 전송하는 것
- action="http://localhost/login.php" , action 속성으로 어디로 입력된 데이터를 보낼지 지정
<input>: 사용자로부터 데이터를 입력받음 <textarea> 태그 : 여러 줄을 입력할 수 있음, 안 쪽에 텍스트 기본값을 입력할 수 있음 <select>, <option> : 선택항목을 주고 선택할 수 있도록 함 , multiple 속성 등 <hidden> 타입의 Input 태그<label> 태그: 특별한 기능이 있기보다는 무언가의 이름표라는 기능, for 속성 혹은 lable 태그로 감싸줌 - method 속성 지정으로 get, post 방식을 지정해 줄 수 있음
- enctype="multipart/form-data" : 파일 업로드시 속성 사용
- font 태그 : 정보로써의 의미를 가지기 보다 디자인 성격이 강해 css로 역할이 넘어감
- meta 태그 : 웹페이이 전체에 대한 정보를 담고 있음, SEO에 활용, description, keywords, viewport 등
- semantic element : HTML5에서 추가된 웹페이지의 구조에 의미를 분명히 부여하기 위한 의미론적 태그
- iframe 태그 : 웹페이지에 다른 웹페이지를 삽입하는 방법, 샌드박스 속성(iframe으로 삽입된 웹페이지에서 자바스크립트 등 위험할 수 있는 행위 차단)
- video 태그 : html5에서 등장
- Can i Use 사이트 링크, html버전에 따라 사용할 수 있는 기술 검색
- 정규표현식을 활용하여 입력 값 체크 가능 , 생활코딩 정규표현식 링크
출처
|