기본 태그
<h1>~<h6>태그
-<h1>~<h6>태그는 html 문서 내 제목을 정의하는데 사용한다.
-숫자 순으로 중요 순이다.
-제목요소는 블록 요소를 포함 할 수 없으며 인라인 요소와 텍스트만을 포함 할 수 있다.
-총 6번까지 밖에없다.(<h7>,<h8> 은 없다.!)
<body>
<h1>Heading(제목 계층) 1</h1>
<h2>Heading(제목 계층) 2</h2>
<h3>Heading(제목 계층) 3</h3>
<h4>Heading(제목 계층) 4</h4>
<h5>Heading(제목 계층) 5</h5>
<h6>Heading(제목 계층) 6</h6>
</body>결과
<p> 태그
-<p>태그는 단락을 정의한다.
-브라우저는 각 <p>요소 앞뒤에 약간의 공백(여백)을 자동으로 추가한다,
-여백은 CSS를 사용하여(여백 속성을 사용)수정한다.
-단락 요소 안에는 <a>, <img> 등 인라인 요소와
텍스트만이 포함 할 수 있으며 블록 요소는 사용할 수 없다.
<body>
<h1>단락 요소</h1>
<p>
텍스트를 단락으로 정의할 때 사용합니다.
단락 요소 안에는 <a>, <img> 등 <strong>인라인 요소</strong>와
<strong>텍스트만 포함 할 수 있으며 블록 요소는 사용 할 수 없습니다.</strong>
<!--<,>는 태그로 인식되기 때문에 텍스트로 <,>를 표현하고 싶다면
<는 &tl; >는 &glt; 로표현-->
</p>
<p>
단락과 단락 사이는 마진(margin)으로 인해 기본적으로
여백이 생기기 때문에 시각적으로 단락이 구분되어 있음을 알 수 있다.
<!--여백은 특별하게 지정하지 않는 이상 겹침. 마진 단위는 픽셀-->
</p>
</body>결과
<br> 태그
-<br> 태그는 한줄 바꿈을 뜻한다.
-또한 빈태그라고 하여 종료(닫는)태그가 없다.
여기서 XHTML과 HTML5에서 차이가 있는데
XHTML은 <br/>와 같이 <br>태그를 올바르게 닫아야하고
HTML5에는 종료 태그가 없어도 된다.
-줄 바꿈은 단락 내에서 enter로만으로 실행시킬 수 없다.
단지 스페이스바 누른 것처럼 공백만 추가될 뿐이다.
<body>
<h1>텍스트 강제 줄바꿈</h1>
<p> <br>태그 없이 enter로
줄바꿈을 해보자
</p>
<p> <br>태그를 사용해서 <br>
줄바꿈을 해보자
</p>
</body>결과
<address>태그
- <address>태그는 문서 또는 기사 작성자/소유자의 연락처 정보를 정의한다.
-<address>요소가 <body>요소 안에 있으면 문서의 연락처 정보를 나타낸다.
-<address>요소가 <article>요소 안에 있으면 해당 기사의 연락처 정보를 나타낸다.
-<address>요소의 텍스트는 일반적으로 기울임 글꼴로 렌더링 되고,
대부분 브라우저는 주소 요소 앞뒤에 줄 바꿈을 추가한다.
-<address>안에는 인라인 요소와 텍스트는 포함 할 수 있지만 블록 요소는 포함 할 수 없다.
<hr>태그
-<hr>태그는 HTML페이지에서 주제별 구분(예-주제이동)을 정의한다.
-<hr>요소는 HTML페이지에서 컨텐츠를 분리하거나 배경을 정의하는데 사용한다.
-XHTML에서는 수평규칙을 나타낸다.
-여전히 시각적 브라우저에서 가로 규칙으로 표시 될 수 있지만 이제는 표현 용어가
아닌 의미적 용어로 정의한다.
<body>
<h1>콘텐츠 영역 나누기</h1>
<div id = "header"> 헤더 영역 </div>
<hr>
<div id = "content"> 컨텐츠 영역 </div>
<hr>
<div id = "aside"> 사이드 영역 </div>
<hr>
<div id = "footer"> 푸터 영역 </div>
</body>결과
네이버를 예를 들면
정도로 생각할 수 있다.
<a>태그
- <a>태그는 한 페이지에서 다른 페이지로 연결하는데 사용하는 하이퍼 링크를 정의한다.
-가장 중요한 속성은 링크의 대상을 나타내는 href 속성이다.
1) href 속성: 링크가 가는 페이지의 url을 지정
2)target 속성: 연결된 문서를 열 위치를 지정 - target을 blank로 잡아주면
새창으로 열린다.
-기본적으로 링크는 모든 브라우저에서 다음과 같이 나타난다.
1) 방문하지 않은 링크는 밑줄과 파란색으로 표시
2)방문한 링크는 밑줄이 그어져 있으며 자주색으로 표시
3)활성화 된 링크는 밑줄과 빨간색으로 표시(클릭할 때)
<body>
<h1>텍스트 링크</h1>
<ul>
<li>
<a href="http://www.google.co.kr">구글</a>
</li>
<li>
<a href="http://www.naver.com"target = "_blank:-" title = "다음으로 이동">네이버</a>
</li>
<li>
<a href="http://www.daum.net"title = "다음으로 이동">다음</a>
</li>
<li>
<a href="#">top</a>
<!--#은 비어있음 을 뜻함-->
</li>
</body>결과
title 속성을 사용해주면 링크로 커서를 둘 때 설명 박스가 생겨난다.
<img> 태그
-<img>태그는 HTML 페이지에서 이미지를 정의 한다.
-<img>태그에는 src와 alt의 두가지 필수 속성이 있다.
1)src 속성 : 이미지의 url을 지정
2)alt 속성: 이미지의 대체 텍스트를 지정.
-또한 width와 height 속성을 사용하여 이미지의 크기를 지정할 수 있다.
<p>
<img src = "./images/가연이.jpg" alt="가연이사진" width="250" height="150">
</p>목록 태그
<ul> 태그
-순서가 없는(글머리 기호) 목록을 정의
-<li>태그를 함께 사용한다.
<body>
<h1>커리(curry) 재료</h1>
<ul>
<li>카레가루 100g</li>
<li>닭가슴살 100g</li>
<li>감자 50g</li>
<li>양파 20g</li>
<li>당근 20g</li>
</ul>
</body>결과
목록에 순서가 없다.
<ol> 태그
-순서가 지정된 목록을 정의
-정의된 목록은 숫자 또는 알파벳 순 일 수 있다.
-<li>태그를 함께 사용한다.
-type 속성: 목록에서 사용할 마커 종류를 지정(1,A,i,I...)
-start 속성: 정렬된 목록의 시작 값을 지정(1,10...)
-reserved 속성: 목록 순서를 내림차순으로 바꿈(10,9,8,7...)
<body>
<h1>커리(Curry) 만드는 방법</h1>
<ol type="1" start="10">
<!--type 값에 a를 넣으면 알바펫 순대로 숫자를 넣으면 숫자순대로-->
<!--reversed start="10" 이라면 역순으로 카운팅-->
<li>카레 가루 8큰술에 물 6큰술을 넣어 풀어 놓는다.</li>
<li>닭가슴살, 감자, 양파, 당근 등을 따로 중불에 살짝 볶는다.</li>
<li>볶아 놓은 재료에 카레를 풀어놓은 물과 함께 냄비에 넣고 물 2컵을 부운 후 15분 정도 끊인다.</li>
</ol>
</body>결과
type을 숫자 start 시작값을 10부터 넣었더니 10,11,12로 순서가 정해졌다.
정의 목록
-특정 용어와 그 의미를 표현할 때 사용한다.
-<dl>: 정의 목록 태그(definition list), <dt>와 <dd>가 함께 사용.
-<dt>: 정의 용어 태그(difinition term)
-<dd> : 정의 설명 태그(difinition descrition)
<body>
<h1> 정의형 목록 </h1>
<dl>
<dt>HTML</dt>
<dd>HTML은 Hyper Text Markup Language의 약자로, 웹 문서를 제작하기 위한 언어로 설계되었습니다. 그래서 법용적 전자 문서나 전자 데이터를 표현하는 기능은 충분하지 않습니다. 이러한 요구로 등장한 것이 바로 XHTML(eXtesible Markup Language)이며, XHTML은 HTML을 XML로 재구축한 마크업 언어입니다. 그러므로 HTML과 XHTML은 똥일한 요소를 가지며 두가지 마크업 언어 모두 웹 문서를 제작할 때 사용되는 웹 표준 기술입니다. </dd>
<dt>CSS</dt>
<dd>
CSS란 Cascading Stryle Sheet의 약자로 마크업 요소에 스타일을 적용하기 위해 W3C에서 고안해 낸 언어입니다. 웹 표준에 대한 관심이 높아져 가면서 CSS를 이용한 디자인도 함께 주목을 받고 있습니다. 그 이유는 CSS가 기존 디자인 방식의 체질 개선을 가능하게 해줄 수 있기 때문입니다. 특히 CSS는 table 방식의 레이아웃으로 인해 마크업 코드가 복잡해진 표현에 관련된 요소(b요소와 i요소 등)의 사용을 제안할 수 있습니다.
</dd>
</dl>
</body>결과
각 구역별로 구역이 나눠진 것을 확인 할 수 있다.
텍스트 태그
강조 태그
- <strong>태그 : 중요한 텍스트를 정의한다.
- <em>태그: 강조된 텍스트로 렌더링해준다.
<body>
<h1> em 을 이용한 컨텐츠 강조</h1>
<p> 홈 > 웹 컨텐츠 접근성 지침 > <em> 인식의 용이성</em></p>
<h1>strong을 이용한 컨텐츠 강조</h1>
<p>홈 > 웹 컨텐츠 접근성 지침 > <strong> 인식의 용이성</strong></p>
</body>결과
<em>태그는 기울임꼴로 렌더링 되었고 <strong>은 굵은 글꼴로 렌더링 되었다.
<blockquote> 태그
-<blockquote> 태그는 다른 소스에서 인용된 섹션을 지정한다.
-브라우저는 일반적으로 <blockquote> 요소를 들여쓴다.
-cite 속성: 따옴표의 소스 url을 지정 ->출처 밝히는 용도
<q> 태그
- <q>태그는 짧은 인용을 정의한다.
-브라우저는 일반적으로 인용 부호 주위에 인용부호를 삽입한다.
-cite 속성: 따옴표의 소스 url을 지정 ->출처 밝히는 용도
<addr> 태그
-<addr> 태그는 "HTML","Mr","Dec","ASAP"와 같은 약어 또는 머리 글자를 정의한다.
<acronym> 태그 (html5에서 지원안함)
약어를 정의
<del> 태그
-문서에서 삭제된 텍스트를 정의
-cite 속성: 텍스트가 삭제된 이유를 설명하는 문서의 url을 지정
-datatime: 텍스트가 삭제된 날짜와 시간을 지정
<ins>태그
-문서에 삽입된 텍스트를 정의
-cite 속성: 텍스트를 삽입 또는 변경한 날짜와 시간을 지정
<sup> 태그
위첨자 태그를 정의
위첨자 텍스트는 일반 줄 위의 문자절반에 나타나며 때로는 작은 글꼴로 렌더링 됨.
위첨자 텍스트는 X^2와 같은 수학식에서 사용될 수 있음
<sub>태그
-아래첨자 텍스트를 지정
-아래 첨자 텍스트는 일반 줄 아래의 문자 절반에 나타나며 때로는 더 작은 글꼴로 렌더링 됨
-아래 첨자 텍스트는 H20와 같은 화학식에서 사용가능
테이블 태그
<table> 태그
-<table>태그는 HTML 테이블을 정의
-HTML 테이블은 <table>요소와 하나 이상의 <tr>,<th> 및 <td>요소로 구성
-<tr> 요소= 테이블 행을 정의
-<th>요소 = 테이블 헤더를 정의
-<td>요소=테이블 셀을 정의
-<caption> 태그는 테이블 캡션을 정의
-<table> 태그 바로 뒤에 <caption>태그를 삽입(테이블 하나당 하나의 캡션만 지정가능)
<thead>태그
-HTML 테이블에서 헤더 내용을 그룹화 하는데 사용
-<thead>요소는 <tbody> 및 <tfoot>요소와 함께 사용되어 테이블 각 부분(머리글, 본문, 바닥글)을 지정
-브라우저는 요소를 사용하여 머리글 및 바닥글과 독립적으로 테이블 본문을 스크롤 할 수 있다.
또한 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 이러한 요소를 사용하면 각 페이지의 맨 위와 맨 아래에 테이블 머리글과 바닥글을 인쇄 할 수 있다.
-<thead>태그는 다음 컨텍스트를 사용해야한다.
-<table>요소의 하위 요소 및 <tbody>,<tfoot> 및 <tr> 요소 앞 <thead>요소에는 하나 이상의 <tr>태그가 있어야 한다.
<tbody>태그
- HTML 테이블에서 본문 내용을 그룹화 하는데 사용
-<tbody>요소는 <thead> 및 <tfoot>요소와 함께 사용되어 테이블 각 부분(머리글, 본문, 바닥글)을 지정.
-브라우저는 요소를 사용하여 머리글 및 바닥글과 독립적으로 테이블 본문을 스크롤 할 수 있다.
-또한 여러 페이지에 걸쳐있는 큰 테이블을 인쇄할 때 이러한 요소를 사용하면
각 페이지의 맨 위와맨 아래에 테이블 머리글과 바닥글을 인쇄할 수 있다.
-<tbody> 태그는 <cation>,<colgroup> 및 <thead>요소 다음에 <table>요소의 자식으로 사용되어야 한다.
<tfoot>태그
<tfoot>태그는 HTML테이블에서 바닥글 내용을 그룹화 하는데 사용.
-<tfoot>요소는 <tbody> 및 <thead> 요소와 함께 사용되어 테이블 각 부분(머리글, 본문, 바닥글)을 지정.
-브라우저는 요소를 사용하여 머리글 및 바닥글과 독립적으로 테이블 본문을 스크롤 할 수 있다.
또한 여러 페이지에 걸쳐있는 큰 테이블을 인쇄할 때 이러한 요소를 사용하면 각 페이지의 맨 위 와 맨 아래에 테이블
머리글과 바닥글을 인쇄할 수 있다.
-<tfoot>태그는 <caption>, <colgroup> 및 <thead> 요소 다음에 <table>요소의 자식으로 사용되어야 한다.
<th>태그
- HTML테이블에서 헤더 셀을지정
-HTML테이블에는 두 가지 종류의 셀이 존재
1)헤더셀: 헤더 정보를 포함(<th>요소로 작성됨)
2)표준 셀: 데이터를 포함(<td>요소로 작성됨)
-<th>요소의 텍스트는 기본적으로 굵게 표시되고 가운데에 표시
-<td>요소의 텍스트는 기본적으로 규칙적이고 왼쪽 정렬
<tr>태그
-HTML 테이블에서 행을 정의
-<tr>요소는 하나 이상의 <th> 또는 <td> 요소를 포함
<td>태그
-HTML테이블서 표준 셀을 정의
1)헤더셀: 헤더 정보를 포함(<th>요소로 작성됨)
2)표준 셀: 데이터를 포함(<td>요소로 작성됨)
-<td>요소의 텍스트는 기본적으5로 규칙적이고 왼쪽 정렬
-colspan 속성: 셀이 확장해야하는 의 수를 지정
-rowspan 속성: 셀이 확장해야하는 행의 수를 지정
'web > HTML&CSS' 카테고리의 다른 글
| HTML에 구글 웹 폰트/웹 아이콘 사용하기. (0) | 2020.03.27 |
|---|---|
| [CSS]transform(3D변형)효과 주기 (0) | 2020.03.27 |
| HTML5의 시멘틱태그, 그 외 태그들 (0) | 2020.03.26 |
| [CSS]표 병합엔 border-collapse, 스크롤 생성할 땐 overflow (0) | 2020.03.20 |
| HTML 이란 무엇일까? (0) | 2020.03.15 |
댓글