기본태그, 표만들기, 이미지, 링크넣기
<style> </style> : <title> 밑에 사용함.
fornt size 등 변경가능
<h1> ~ <h6> 제목테그
<strong>, <b> 굵은 글씨
<i> 이텔릭체
<hr> 구분선
<br> 한줄띄기
<q> 인용문
띄어쓰기
<pre>
쓰여진 그대로 나오게하는태그
pre이 없으면 문장마다 br등을 이용하여 단을 나눠줘야한다.
리스트만들기
ul : 순서없는 리스트(중첩하여 사용가능)
> li : 동그라미 리스트로 나옴
ol : 순서있는 리스트
> li : type 지정하지않으면 숫자로나옴.(타입지정가능 : a 등)
표만들기
Table
<caption> : 제목 (strong, b, p 등으로 여러줄 입력가능)
<tr> : 행
<td> : 열
<th> : 제목칸(굵은글씨)
<thead> : 제목칸 묶어서 표현 : 안에들어가는건 모두 <tr> <th></th> </tr>
<tbody> : 일반칸 묶기 : <tr>, <td>, <th> 모두사용가능
<tfoot> : 마지막칸(거의 토탈 or 합계 등 )
>시멘틱태그(semantic tag : 의미를 명확하게 하기위한 태그)
>의미상 같은 그룹을 태그에 동일한 스타일 적용
색상
<colgroup> : 한테이블의 색상을 행마다 원하는대로 지정
ex:
<col> : 무색
<col span="2" style="background-col>
이미지
<figure> - 문서의 주요 콘텐츠와 연관된 독립적인 콘텐츠 그룹.
- 이미지, 도표, 그래프, 오디오 등의 멀티미디어 콘텐츠를 포함하는데 사용 (=사진, 이미지 등을 감싼다)
- 자식요소로 figurecaption이 온다.
- 블록 태그로 자동 줄바꿈이 된다.
[출처] [HTML5] figure, figcaption, 태그 예제와 속성|작성자 액팅제이
<img src="" width="" height="" alt="">
img src : 이미지 경로
width : 이미지 가로크기
height : 이미지 세로크기
alt : 이미지 엑박시 어떤이미지 인지 설명
<figcaption>- 하나의 figure에 하나의figcaption만 사용 가능하다.
(리스트 만드는 li처럼 두개 세개 쓰면 안된다는 것)
- figure의 자식 요소이다. 반드시 figure이 있어야만 쓸 수 있다.
링크넣기
<a href="링크">링크이름</a>
이미지에 링크넣기
<a href="링크">
<img src="이미지주소 " target="_blank"( 새창띄우는코드) alt="이미지설명">
이미지 중간에 링크 넣기
<img src="" alt="" usemap="#설명">
<map name="설명">
<area shape="" coords="" href="" target="" alt="">
shape="rect" coords="좌상단(x,y), 우하단(x,y)
shape="circl" coords ="x좌표, y좌표, 반지름
목록에서 링크넣기(상위로가기)
<h1 id="#앵커이름> <a href="#앵커이름">텍스트 또는 이미지</a>
ex) <a href=#menu">상위</a> : menu가 있는곳까지 상위라는글자를 클릭하면 한번에 감