HTML
컨텐츠의 구조를 정의하는 마크업 언어
- line 1에서 <!DOCTYPE html>은 이 문서 형식이 html임을 브라우저에 알려주기 위함
- <html>태그는 전체를 감싸기 위함. 딱 한번만 사용해야함. lang은 사용하는 주 언어를 정의
head 태그
: 정보를 담고 있음. html태그 바로 아래. html안에서 딱 한번
- <meta>태그는 문서와 관련된 정보를 담음
- <title>태그는 탭의 이름
body 태그
: 내용을 담고 있음. html안에서 딱 한번 사용
- 시맨틱 태그는 레이아웃(headr, nav, section, article, asice, footer..포함)
- <header> 소개나 제목을 담는 태그
- <nav> 페이지 이동을 위한 메뉴를 담는 태그
- <section> 기준에 따라 구간을 나누기 위한 태그
- <article> 주 내용을 담기 위한 태그
- <aside> 광고와 같은 주변을 담기 위한 태그
- <footer> 회사 정보 및 사이트 정보와 같은 추가 정보를 담는 태그
텍스트 태그
제목태그
h1~h6까지 사용 가능. 중요도가 높을수록 숫자가 작음
대제목 h1 부제목 등등 h2, h3..
중요도가 낮아질수록 크기도 줄어든다!
본문태그
<p> 단락, 문단
<br> 줄바꿈____종료태그를 쓰지 않는다(빈요소)
<pre> 태그 내에 입력한 텍스트 형식 그대로출력
글자와 관련된 태그
<strong> 볼드체 예시
<em> 강조! 이탤릭체__예시
<sub> 일반 위치보다 위로__수학기호에서 지수
<sup> 일반 위치보다 아래로__수학기호에서 로그
<ins> 단어나 문장 아래에 밑줄 추가__ 예시
<del> 단어나 문장에 취소선 추가__ 예시
링크태그
<a 속성>구글</a>____ <a 링크="링크주소">
target
:클릭으로 링크를 열때 어디에 오픈할 것인지 정하는 속성
target="_self" 현재 탭에서 링크를 여는 속성
target="_blank" 새 창(탭)에서 링크를 여는 속성
멀티미디어 태그
이미지태그
<img src="이미지 url" alt="이미지 설명" height="높이" width="너비"> __(빈요소)
테이블 태그
<tr> 행
<th> 행 내에 셀 제목
<td> 행 내에 데이터
form 태그
<form action="url" method="get 또는 post" placeholder="아이디를 입력하세요">
method="get"
: 데이터를 조회할때(검색?)url 뒤에 붙여 나타남__엽서
method="post"
: 데이터를 수정 삭제할때(로그인)__편지
placeholder 클릭하면 사라지는 설명하는 문구?
<input>태그에서 type 속성은 형식이 아주 많다 버튼,,텍스트 등등
<value> 태그에 데이터를 넣어서 id에 전달??
<label> 태그
<div> 태그는 태그들을 구분짓고 나누기 위함
<textarea> 태그 속성에 cols rows로 글자수 설정 가능
<button> 태그 html요소를 내부에 담을 수 있어서 유용. 이미지 버튼 제작 가능. type 속성
select태그
- name속성을 반드시 가져야함__input태그의 name과 기능 동일
- 하위에 옵션 태그는 <option>으로 추가한다
- option 태그는 value 속성을 반드시 가져야함__name과 짝을 이룸
태그를 감싸지 않고 그냥 쓰는거는 일반 태그 텍스트로 작동!!_css사용할때 불편하므로 태그사용 권장
속성(태그의 추가적인 정보)은 모든 태그가 가질 수 있음
속성이 두가지 이상이면 띄어쓰기로 가능! 큰따옴표 반드시
name id value태그는 한번더 공부하면 좋을 것
'Web > HTML, CSS' 카테고리의 다른 글
| [CSS] 티스토리 코드블럭 폰트 변경 (0) | 2021.01.25 |
|---|---|
| [CSS] 선택자 (0) | 2021.01.25 |
| [HTML]Start Bootstrap 뜯어보기_head (0) | 2020.05.22 |