“Do it! HTML5+CSS3 웹 표준의 정석”을 공부하고, 복습하기 위해 요약한 내용 입니다.
HTML 텍스트 관련 태그
블록 태그
<hn> 제목 </hm> : 제목 표시 n은 1부터 6까지
<p> 단락 </p> : 단락
<br> : 줄바꿈
<hr> : 수평 줄 삽입, css에서 가로선 없앨 수 있음
<blockquote> 인용문 </blockquote> : 인용문, cite 속성으로 인용 사이트 주소 표시 가능
<pre> 텍스트 </pre> : 입력하는 그대로 화면에 표시, 대체 텍스트 추가하는 것이 좋음
인라인 태그
<strong> 굵게 강조할 텍스트 </strong> : 화면 낭독기 구별 O
<b> 굵게 표시하라 텍스트 </b> : 화면 낭독기 구별 X
<em> 이탤릭체로 강조할 텍스트 </em>
<i> 이탤릭체로 표시할 텍스트 </i>
<q> 인용 내용 </q> : 인라인 인용문 블록으로 따옴표가 발생, cite 속성 사용 가능
<mark> 형광 텍스트 </mark> : css background-color를 이용해 색 변경 가능
그 외 태그
<abbr title=”full”>약어</abbr>
<cite> 참고 내용 </cite>
<code> 소스코드 </code>
<small> 부가정보, 작게 표시 </small>
<sub> 아래첨자 </sub> , <sup> 위첨자 </sup>
<s> 취소선 </s> , <u> 밑줄 </u>
HTML 목록 관련 태그
순서목록
순서있는 목록(Ordered List)
<ol>
<li>리스트</li>
<li>리스트</li>
</ol>
순서 있는 목록(Unordered List>
<ul> </ul>
: css 속성값 : list-style-type, start
설명 목록
<dl>
<dt> 제목 </dt>
<dd> 설명 </dd>
…
</dl>
HTML 테이블 관련 태그
기본적인 표 구조
<table>
<caption> 테이블 제목 </caption>
<thead>
<tr>
<th> 제목셀 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 내용셀 </td>
</tr>
</tbody>
</foot> … </tfoot>
</table>
그 외 colspan, rowspan, colgroup 태그
HTML 이미지 태그
<img src=”주소” alt=”대체텍스트”>
설명글이 있는 이미지
<figure>
<img src=”abc.png” alt=”abc”>
<figcaption> 설명 글 </figcaption>
</figure>
HTML 링크 태그
<a href=”링크주소”> 텍스트/이미지 </a>
css에서 text-decoration으로 underline 변경 가능
<a>태그의 속성값 :
- target=”_blank” : 새창으로 열기
2. download : 클릭 시 다운로드
<a>태그를 이용해 앵커 만들기 – Jumping
- <태그 id=”Anchor name”></태그>
2. <a href=”#Anchor name”></a>