반응형
- 다음의 내용은 Doit HTML5 책 내용을 스터디 하면서 정리한 내용입니다.
- 제가 모르고 확인해야할 내용만 요약, 정리하였습니다. 즉, 중간중간 빠진내용이나 챕터가 상당히 많습니다.
- Doit HTML5 책은 웹 초보가 보기에 상당히 좋은 내용입니다.
- 정식으로 공부하실분은 정식으로 책을 구입하여 스터디 하시길 추천드립니다.
html 기초강좌 리스트 :
텍스트 관련 태그들
텍스트를 덩어리로 묶어주는 태그
이 태그들은 텍스트 글자에만 적용되는것이 아니라 텍스트가 포함된 블록 전체에 적용된다.
| 항목 | 내용 |
|---|---|
| h1 / h2 … | 제목표시 |
| p | 단락만들기 |
| br | 줄바꾸기 |
| hr | 수평줄넣기 / 닫기 태그는 없다. |
| blockquote | 인용문넣기 |
| pre | 입력하는 그대로 화면에 표시하기소스에 표시한 공백이 브라우저에 그대로 표시됨code / samp / kdb 같은 태그를 사용해 프로그램 소스를 표시할때도 소스의 형태를 그대로 브라우저 창에 표시하여 보여줘야하기 때문에 사용한다.pre 태그를 사용할때는 웹문서를 소리로 읽어주는 기계같은경우 pre 태그를 그냥 건너뛰기도 한다. |
텍스트를 한줄로 표시하는 태그
텍스트에서 사용하는 태그들 중에 태그를 적용해도 줄바꿈없이 텍스트를 표시하는 ‘인라인 레벨’ 태그.
여기서 설명하는 태그들은 닫는 태그를 생략할수없다.
| 항목 | 내용 |
|---|---|
| strong / br | 굵게 표시하기 경고나 주의사항처럼 중요한 내용은 strong 태그로 표시문서의 키워드 처럼 단순히 굵게 표시할때는 b 태그 |
| em / i | 텍스트를 비스듬이 이탤릭으로 표시문장에서 흐름상 특정부분을 강조하고싶을때는 em일반적인 기울기는 i |
| q | 인용내용 표시하기blockquote 와 다른점은 blockquote 는 블록태그 이기때문에 인용 내용이 줄이 바뀌어 나타나고 다른내용과 구별되도록 안들여써지지만 q 태그는 인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 함께 한줄료 표시되고 인용내용을 구분할수있도록 인용 내용에 따옴표를 붙여 표시한다. |
| mark | 형광펜 효과내기 |
| span | 줄바꿈없이 영역 묶기줄바꿈없이 일부 텍스트만 묶어서 스타일을 적용하려고 할때 주로사용 |
| ruby | 동아시아 글시 표시 |
기타텍스트 관련 태그
| 항목 | 내용 |
|---|---|
| abbr | 약자표시 title 속성을 함께 사용 |
| cite | 웹문서나 포스트에서 참고내용표시 |
| code | 컴퓨터 코드 |
| kdb | 키보드 입력이나 음성같은 사용자 입력 |
| small | 부가정보 처럼 작게 표시해도 되는 입력내용 |
| sub | 아래첨자 |
| sup | 위첨자 |
| s | 취소선 |
| u | 밑줄 |
목록만드는 태그
ul li
순서없는 목록(unordered list) 만들기
- ul 태그를 사용하고 ul 태그 안에 li 태그를 사용해 각 항목을 표시
- 순서없는 목록의 경우 각 항목에 작은 원이나 사각형 블릿 이 붙는다.
- css 의 list-style-type 으로 불릿 수정가능
<ul>
<li> 내용 </li>
<li> 내용 </li>
</ul>
ol li
항목을 나열하되 순서가 필요한 목록(ordered list)
- ol 태그에는 순서와 관련된 몇가지 속성이 있다.
- 속성 값에 따라 조금씩 다른 형태로 표시할 수있다.
- type 속성 : 순서목록이기 때문에 항목앞에 숫자나 영문자 등을 지정가능
- start 속성 : 기본1로 시작하는데 start속성을 이용하여 중간번호 부터 시작가능
- reversed 속성 : 항목을 역순으로 표시
<ol type="a" start="3">
<li> 내용 </li>
<li> 내용 </li>
</ol>
표만드는 태그
table tr td th
테이블 만들기
- tr : 행
- td : 열
- th : 표에 제목셀 만들기
<table border="1">
<tr>
<th>제목셀</th>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<th>제목셀</th>
<td>2행 2열</td>
<td>2행 2열</td>
</tr>
</table>
위의 문서 실행결과
- 속성
- colspan : 열 합치기
- rowspan : 행 합치기
caption figcaption
표에 제목을 붙인다.
thead tbody tfoot
표 구조 정의하기
col colgroup
표에서 하나의 열에 스타일을 지정하거나 열(columm)을 몇개씩 묶어 스타일을 한번에 지정
- col 태그는 한열에 있는 모든 셀에 같은 스타이을 적용한다.
- col 태그를 이용해서 둘 이상의 열을 붂어 같은 스타일을 지정하려면 span 속성을 이용하여 몇개를 함께 묶어줄지 지정할수있다.
반응형