| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- JavaScript
- 퍼블리셔
- 퀀텀
- 백엔드개발자
- 비트코인
- frontend
- developer
- 코딩
- 가상화폐
- 개발자
- 핀테크
- 암호화폐
- 웹프론트엔드개발자
- 웹퍼블리셔
- IT
- 웹디자인
- ICO
- 블록체인
- backend
- java
- 이더리움
- HTML
- 웹개발자
- 프론트엔드
- 프론트엔드개발자
- jQuery
- 프론트엔드국비지원
- 국비지원IT
- 백엔드
- CSS
- Today
- Total
wellkiim
html_tag 본문
자 이번에는
html에서 사용하는 태그들 중 몇가지를 먼저 알아보도록 하겠습니다.
일단 headline 태그로
h1 ~ h6 태그가 있습니다.
각각 1부터 6까지 점점 작아지는 형태를 띄우는 태그입니다.
앞의 숫자가 작아질수록 대제목, 소제목으로 나눌 수 있습니다.
보통 h1태그는 로고를 담는 태그나 해당 페이지의 이름을 쓸때 한번 사용하고,
그 외에는 사용하지 않는 것이 일반적입니다.
그리고 가장 많이 쓰는 형태인,
div와 p태그
인라인과 블럭 형태의 태그들이 존재합니다.
그에 대해서는 추후에 설명드릴 예정입니다.
div와 p태그는 단락을 나누는 태그인 <br/>태그를 사용하지 않아도 알아서 단락이 나누어지게 됩니다.
에디터에 코드를 작성해 보도록 하겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<title> tag설명 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<h2>tag의 종류와 의미</h2>
<h3>headline태그는 영역의 제목 또는 문서의 제목으로 사용</h3>
<p>홈페이지를 소개하는 목차로 사용할때 headline태그 사용</p>
<p>문단 또는 의미를 담는 태그</p>
<div>분할요소</div>
<div>
<div>
구글에서 validator
</div>
</div>
<div>
<p>
div태그안에 p태그
</p>
</div>
<div>
validator에서 에러 발생확인 : p태그안에 div태그 담을때...
</div>
<h3>p태그와 div태그에 대한 내용 정리</h3>
<div>
<h2>div태그는 폴더처럼 사용이 가능하고, 어떤 객제도 다 담을수 있다.</h2>
<div>
폴더1
<div>
폴더2
<p>폴더2에 mp3파일</p>
<p>폴더2에 text파일</p>
<p>
p태그는 파일처럼 사용하기때문에 p태그안에 p태그를 담을수 없다!!
</p>
</div>
</div>
<div>
<h2>내용정리</h2>
<p>
01) 웹표준: 모든 브라우저에서 같은 규칙을 사용하여 작업하는 형태<br/>
<!-- br == break : 줄바꾸기 -->
02) 웹접근성: 장애 유무를 따지지 않고, 모두가 접근할 수 있는 형태<br/>
03) css: xhtml에서는 주로 정적인 페이지를 만들때 사용<br/>
04) 웹접근성관련한 평가 도구 100점, validator 통과<br/>
05) html5: 시멘틱태그( header, footer... ), 영역마다 의미와 사용용도가 정해짐<br/>
06) css3: 변형요소, 움직이는 요소들(animation), 반응형, 절대형(적응형)<br/>
07) 제이쿼리: 마우스가 하는 기능을 키보드도 같이 사용할수 있도록 사용<br/>
+ 애니메이트 , 슬라이딩 윈도우, 모달팝업, 슬라이드, 페이드기능, 각종 easing 효과, 탭 베이직, 스크롤위치에 대한 값 지정.....<br/>
08) ajax 외부파일 연동하기
</p>
</div>
</div>
</body>
</html>
이런식으로 출력이 되는 것을 볼 수 있습니다.
태그에 대한 간단한 소개는 이것으로 마치겠습니다.
궁금한 사항이 있다면 댓글 남겨주시면 성실히 답변드리겠습니다. ^^
'Development > HTML, CSS' 카테고리의 다른 글
| html_web_basic (0) | 2018.05.06 |
|---|---|
| html_img태그 (0) | 2018.05.06 |
| html_webpage_basic (0) | 2018.05.06 |
| html_inline과 block 태그 (0) | 2018.05.06 |
| html 01_basic (0) | 2018.05.06 |
