html을 계속 사용하지 않으면 자꾸 잊어버리거나 다른 요소들과 헷갈리기 때문에,
이제까지 공부한 요소들을 정리해 보려고 한다.
- 요소(element) : 내용(content) + 태그(tag) = 문서의 특징을 지정하는 마크업
>시작 태그 : <태그이름 속성..>
>종료 태그 : </태그이름>
>단독 태그 : <태그이름/>
*태그의 이름 : 공백 구분 x, 대소문자 구분 x, 중첩 x
- 속성(Attribute) : 요소의 추가정보 (스타일, URL 등), 요소의 시작 태그에서 지정
<이름 = "속성값"> OR <이름 = '속성값'>
*하나의 요소에 여러 개의 속성 지정이 가능하며 빈칸으로 구분한다.
<HTML 문서 기본 구조>
- <!DOCTYPE html> : 문서 형식 선언
- <head> : 문서의 title과 문서 속성 지정, 문서 관리를 위한 meta data기록
ex) 문서 정보, 키워드, 저자, 언어, 인코딩 등
ex) <meta charset = "UTF-8"> : 한글 사용
- <body> : 내용 작성
<특수 문자> - 엔티티 코드로 표현
- 공백 :
- < : <
- > : >
- & : &
etc..
<설명문> - 브라우저가 해석하지 않는다.
- <!--내용 기술 -->
<단락 꾸미기>
- <h1> ~ <h6> : 제목(headline) 지정, 숫자가 작을수록 큰 글자이다. 줄 간격 띄움
- <p> : 단락(paragraph) rnqns, 줄 간격 띄움
- <br> : 줄 바꿈(line break), 단독 태그 형태, 단락 내에서 줄만 바꿀 때 사용, 줄 간격 띄움 x
- <hr> : 가로줄(horizontal line) 표시, 문단이나 내용의 구분
- <pre> : 작성된 형식의 유지(pre-formatted text), 화면에 입력 상태 그대로 나타냄. (공백 문자 적용)
- <blockquote> : 단락 인용(block quotation), 다른 글의 내용을 단락단위로 인용, 들여쓰기로 구분
<텍스트 표현>
- <em> : 텍스트 기울임
- <strong> : 굵은 글씨
- <small> : 약간 작은 글씨
- <mark> : 형광펜 표시 (마킹)
- <sub> : subscript=아래 첨자
- <sup> : superscript=위 첨자
<목록 나열>
- <ul> : (unorderd list) 순서가 없는 목록
-<ol> : (ordered list) 순서가 있는 목록
- <li> : (list item) 나열된 항목, <ul>에서는 '●' 표시, <ol> 에서는 숫자로 순서 표시
- <dl> : (description list) 설명 목록, 용어나 단어를 설명하는 목록을 만들 때 사용
- <dt> : (term) 용어
- <dd> : (description) 설명
ex) <dt> 용어 </dt> -> 용어
<dd> 용어 설명 </dd> 용어 설명
<표>- <table>
- <thead> : 표의 머리 구조 표현
- <tbody> : 표의 몸체 구조 표현, 여러번 사용 가능
- <tfoot> : 표의 꼬리 구조 표현
- <tr> : (table row) 테이블 행
- <th> : (table header) 제목 셀, 셀의 중앙에 굵은 글씨로 나타남
- <td> : (table data) 데이터 셀
> <td rowspan ="숫자"> : 숫자만큼 행(rows)의 셀을 병합 (위아래)
> <td colspan = "숫자"> : 숫자만큼 열(column)의 셀을 병합 (옆 칸)
- <caption> : 표를 설명하는 제목, 표의 위쪽 중앙에 나타남
<문서 구조화>
의미적인 구분, 모양은 구분 x
- <header> : 문서의 머리말 요소
- <nav> : 다른 문서나 문서 내에서 다른 부분으로 이동하는 링크
- <article> : 문서의 주요 내용, 독립된 본문, 여러개 삽입 가능
- <section> : 문서 내 그룹 구분, 보통 <article>을 여러개의 <section>으로 구성
- <aside> : 본문 내용과 구별되는 정보 표현
- <footer> : 문서의 꼬리말 요소
공부하다가 새로운 내용이 있으면 추가할 것이다 :)
'컴퓨터 > HTML,CSS,JS,JQUERY' 카테고리의 다른 글
| [내가 보려고 만든] css 속성 정리 (0) | 2021.07.05 |
|---|---|
| [내가 보려고 만든] html 요소 2 (0) | 2021.07.05 |
| html을 이용한 예약 페이지 만들기-<form> (0) | 2021.07.05 |
| html, css를 이용한 플라워 제작 (0) | 2021.07.05 |
| html, css로 시간표 만들기 (0) | 2021.07.05 |
