HTML 기본태그
1. <DOCTYPE html>
- 출력할 웹 페이지의 형식을 브라우저에게 전달.
2. <html>
- 모든 HTML요소의 부모 요소
- 웹페이지에 단 하나
3. <head>
- *메타데이터를 위한 요소
- title, style, meta, link, script
* 메타데이터
- 콘텐츠의 위치와 내용, 작성자에 관한 정보, 이용조건, 등이 담겨있는 '데이터의 데이터'
- 각종 데이터, 문서, 파일 등을 효과적으로 운영관리해서 정보의 활용도 높이고, 유지보수를 용이하게 해줌.
4. <body>
-웹브라우저에 출력되는 모든요소
-웹페이지를 구성하는 실질적 요소, 문서의 본문
HTML 주요태그
<title>
-브라우저 택에 표시되며, 문서의 제목
<style>
-CSS 영역으로, 웹페이지를 꾸며줌
<script>
-Java Script 영역으로 웹페이지를 동적으로 꾸며줌
-<body>태그 안에 넣어야 DOM구성을 완료한뒤에 실행된다.
<link>
-외부의 문서를 연결시키는 태그
-주로 CSS와 연계에서 사용된다.
<meta>
-기타 메타데이터 정의에 사용된다.
-charset으로 브라우저가 사용할 문자셋을 정의할 수 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
-텍스트 태그-
<글자 형태 태그>
<h>
-제목을 나타냄
<h1>~<h6> 까지 있으며 h1이 가장 중요한 제목을 의미.
<string> = <b>
-텍스트를 굵게(bold)으로 적용시켜준다.
-<string>태그와 <b>태그는 같지만 <string>태그가 더 의미있는 태그이기때문에 <string>태그를 사용한다.
<em> = <i>
-텍스트를 기울이는 기능을 적용시켜준다.
--<em>태그와 <i>태그는 같지만 <em>태그가 더 의미있는 태그이기때문에 <em>태그를 사용한다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<본문태그>
<p>
-텍스트 내용을 나타내는 태그
<br>
-줄바꿈 태그
공백을 나타낼 수 있음.
<pre>
pre태그안에 있는 내용을 그대로 보여준다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<링크태그>
<a>
-링크를 통해 다른 웹페이지로 이동하거나 , 문서 내 이동을 하게함.
-<a>태그는 혼자만 사용하지 않고 아래의 속성과 함께 사용
href 속성 : 연결할 주소를 지정
target 속성 : 링크를 클릭할 때 창을 어떻게 열지 결정.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<리스트태그>
<ul>
-순서 없는 리스트
<ol>
-순서 있는 리스트
value 속성 : 순서를 표시할 기호를 정해줌
start 속성 : 몇번부터 시작할지 지정해줌
reversed 속성 : 순서를 반대로
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<테이블 태그>
<table> : 표를 감싸는 태그
<tr> : 가로줄을 만드는 역할
<th> : 표의 제목을 쓰는 역할
<td> : 셀을 만드는 역할
rowspan속성 : 열합치기 (세로합치기)
colspan속성 : 행합치기 (가로합치기)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<이미지태그>
<img>
src 속성 : 이미지 파일 경로
alt 속성 : 이미지가 없을경우 표시되는 문장
width : 이미지의 너비
height : 이미지의 높이
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
입력 양식 태그
<form>
- 데이터를 입력받을 때 사용하는 태그
- <form>안에 <input>으로 다양한 값을 입력받을 수 있음
<input type = "text">
-텍스트를 입력받는데 사용
name 속성 : <input>를 구별하기 위한 이름을 지정
size 속성 : 화면에 보여질 문자의 갯수
value 속성 : input의 내용
등이 있다.
<input type = "checkbox", "radio">
- type = "checkbox" :여러 값을 보여주고 선탁할 수 있게 한다.(다중선택)
- type = "radio" : 여러 값을 보여주고 선탁할 수 있게 한다.(단일선택)
<select>
<option>
-여러값(option)을 보여주고 하나를 선택할 수 있게한다.
-multiple 속성을 추가하면 여러개를 선택가능.
<textarea>
- <input>과 달리, 여러 줄을 입력받을 수 있다.
<button>
- form 에서 사용할 수 있는 버튼을 만들어주는 태그
submit 속성 : form에 입력된 내용을 전송한다.
reset 속성 : form에 입력된 내용을 초기화 한다
button 속성 : 기능이 없는 버튼
<label>
-<input>앞에 '레이블(설명)'을 붙힐 수 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
구조와 시멘틱 요소
- 시멘틱(의미론적인) 요소
- 태그 구조를 쉽게 파악할 수 있으며, 웹페이지가 어떻게 구성되었는지 파악하기가 쉽다.
<header> : 헤더를 의미한다.
<nav> : 네비게이션을 의미한다
<aside> : 사이드에 위치하는 공간을 의미한다.
<section> : 본문의 여러 내용(article)을 포함하는 공간을 의미한다.
<article> : 본문의 주내용이 들어가는 공간을 의미한다
<footer> : 푸터를 의미한다.
'프로그래밍 > HTML.CSS' 카테고리의 다른 글
| CSS실습 - 예제페이지 만들어보기 (0) | 2018.06.28 |
|---|---|
| CSS 선택자 (0) | 2018.06.28 |
| CSS 속성 (0) | 2018.06.27 |
| 웹표준 - HTML (0) | 2018.06.26 |
