HTML5는 웹페이즈를 기술하기 위한 마크업 언어로써 웹 페이즈의 내용과 구조를 담당합니다. HTML에서 많이 쓰이는 tag들에 대해서 정리 요약 해보았습니다. 참고로 tag들은 " <p> 컨탠트 </p> " 처럼 시작 tag와 종료 tag는 소문자로 시작하는 것이 국룰
# 주석
<!-- 내용을 작성 합니다. -->
# <head></head> 에는 metadata, title , style, link, script에 대한 데이터로 화면에 표시되지 않음.
* metatag : description, keywrods, authopr. 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
<meta name="keywords" content"HTML, CSS, XML, XTHML, JavaScript">
: SEO(검색 엔진 최적화)를 위해 검색엔진이 사용할 keywords를 정의
<meta name "description" content = "Webtutorials on HTML and CSS">
: 웹 페이지의 설명을 정의
<meta name-=" author" content="John Doe">
: 웹 페이지의 저자를 명기
<meta http-equiv="refresh" content="30">
: 웹 페이지를 30초 마다 Refresh
<title>/<title> : 문서의 제목 : 정의된 제목은 브라우저의 탭에 표시된다.
# css 파일 연계 시 <head>에 작성 :
<link rel =="stylesheet" href=="main.css">
#<h1> tag : 제목 태그
h1 ~ h6 까지의 태그가 있으며 중요한 제목을 나타낼 때 사용하며 글자의 크기도 가장 크게 나타난다.
시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않도록 하고 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크니 주의
* 시멘틱 웹 : 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여해서 기존의 잡다한 데이터 집합이었던 웹페이지를 "의미"와 "관련성"을 가지는 거대한 데이터베이스로 구축하고자 하는 발상.
#<b> tag : 글자 bold체 지정 (style="font-weight: bold";)
<b> 여기에 내용은 bold체로 출력. <b>
#<strong> tag : 글자 bold체 지정 ** 의미론적으로 중요성을 가짐 **
#<i> tag : 이탈릭체
#<em>tag : 기울임체
#<small> tag : 중간에 작은 사이즈 text 지정 + 작은 사이즈 글씨
#<mark> tag : 하이라이트
#<del> tag : 중간 줄긋기
#<ins> tag : inserted added로 아래 줄 긋기
#<sub> or <sup> tag : 아래 쓰임 과 위에 쓰임
#<p> tag : 본문 태그
단락을 지정한다.
#<br> tag : 다음 줄 쓰기
이 태그는 <br> 내용 <br> 형식으로 사용 "/"사용 하지 않음.
# [ Snbsp; ] : 연속 뛰어쓰기(공백) 넣기
This isSnbsp; mySnbsp; Cat 이렇게 작성 하면
=> This is ∨ ∨ my ∨ ∨ Cat 이런 식으로 출력된다.
#<pre> tag :
형식화된 text를 지정해서 pre 태그 내의 content 내 작성된 그대로 브라우저에 표시한다.
#<hr> tag : 수평 줄 삽입
↑ 이런거 삽입
#<blockquote> tag : 긴 인용문 블록 지정
CSS 효과 미적용 시 들여넣기 효과로 나타남.
#<a> tag : 하이퍼링크
< a href="http://www.naver.com"> 클릭하세요. </a>
*a(anchor) tag로 "클릭하세요" 대체 text 로 링크 연결을 할 수 있음.
<tip>
# fragment identifier : 페이지 내의 특정 id를 갖는 요소에 링크 (href="html/default.html")
이동을 원하는 페이지의 id속성을 link로 걸어서 클릭시 페이지 내 top이나 bottom 위치로 이동 하는 것
사용 법 : <a href =" # (id 속성) "> 클릭 </a>
# target="_self / _blank" : 링크 페이지를 어떻게 오픈할 것인지 설정
_self : 현재 윈도우에서 열기(기본)
_blank : 새로운 탭/윈도우 에서 열기
사용법 : < a href="http://www.naver.com" target="_blank" rel="noopener noreferrer"> 클릭</a>
* rel="noopener norefeer" : 외부 탭으로 오픈 할 경우 외부 페이지에서 JS를 이용해 악의적인
페이지로 이동할 수 있는 보안 취약점(Tabnabbing 피싱공격) 을 방지하기 위해 추가 작성.
#<ul> tag : 순서 없는 리스트(Unordered List)
- 과자
- 아이스크림
- 음료수
#<ol> tag : 순서 있는 리스트(Ordered List)
- 과자
- 아이스크림
- 음료수
<tip>
리스트 태그 안에 type을 지정해주면 원하는 방식으로 순서를 나타낼 수 있다. <ol ∨∨∨> ∨ 여기에 기입
기본값 숫자 : type="1"
대문자 알파벳 : type ="A"
소문자 알파벳 : type="a"
대문자 로마숫자 : type="I" (영어 i 대문자 인듯)
소문자 로마숫자 : type ="i"
각 <li>안에도 value 값을 지정해 순서를 임의로 정할 수도 있다.
<ol> 안에 start "어트리뷰트"로 순서의 시작값을 지정할 수도 있다.
<ol> 안에 reversed "어트리뷰트"를 지정하면 리스트의 순서값을 역으로 표현 할 수 있다.
#테이블 (표) 생성 ★★★
##<table> tag :
## <tr> tag : 열 (세로 한 줄을 의미)
세로 한 줄에 여러 개의 행을 만들고 싶으면 <tr>을 추가하면 됨.
## <th> tag : 제목에 해당
## <td> tag : 행( 가로 한 줄을 의미)
가로 한줄에 여러개의 열을 만들고 싶으면 <td>를 추가 하면 됨
# <img src : 이미지 파일 경로
보통 html이나 css 파일 내부에 파일을 생성해서 넣어둠.
# alt : 이미지 파일이 없을 경우 표시되는 문장
# <audio src : 오디오 파일 경로
* controls : 음악 재생 도구를 표시할 것인지 지정 (브라우저마다 외관의 차이가 있음 )
* preload : 재생 전 음악 파일을 모두 불러올 것인지 지어
* autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정
* loop : 음악을 반복할 것인지 지정
# <video src : 비디오 삽입 태그 - HTML5에서 새롭게 추가된 태그 (IE8이하는 사용 불가) ★★★
* src : 동영상 파일 경로
* poster : 동영상 준비 중에 표시될 이미지 파일 경로
* preload : 재생 전에 동영상 파일을 모두 불러올 것인지 지정
* autoplay : 동영상 파일을 자동의 재새 개시할 것이지 지정
* loop : 동영상을 반복할 것인지 지정
* controls : 동영상 재생 도구를 표시할 것인지 지정 (브라우저마다 외관의 차이가 있음)
# <form> tag: 사용자가 입력한 데이터를 수집하기위해 사용되며 (input, textarea, button, select, checkbox, radio button, submit button ) 등의 입력 양식 태그를 표함할 수 있다. ★★★★★★★★★★★★
# <form action = " URL " method ="get or post">
- 정보 입력 시 actrion에서 설정한 URL로 정보가 넘어가게 함.
- 전달 방식을 get/ post 방식 중 하나로 설정
# <input type ="text" name= "id" value ="1">
- ID 적는 빈칸이 생성된다. ( 로그인 화면 )
# <input type ="submit" balue ="submit">
- 제출할 수 있는 제출 버튼이 생성
type 어트리뷰트에 의해 구분되며 form 태그 내에 존재해야 입력 데이터를 전송할 수 있다.
( ajax를 사용할 때는 form태그 내에 존재하지 않아도 된다.)
전송 데이터는 name을 어트리뷰트 키로 value를 어트리뷰트 값으로 해서 ( key = value ) 형태로 전송.
★★★★추가 input 태그 관련 사이트 "클릭"★★★★
# HTML 공간 분할
# header
웹사이트의 메타데이터를 포함하며 페이지의 타이틀을 보여주는 부분.
# nav
네이게이터, 페이지 이동시 사용(메뉴 바)
# aside
주로 광고, 카테고리 목록 표시 (본문과 관련X)
# section
본문(article)을 여러개 포함하는 공간
# article
본문의 주 내용이 들어가는 부분
# footer
회사 정보 같은 대표자, 이메일 표시
# <div>
#<span>
https://poiemaweb.com/css3-display#1-display-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0
'Programming > Html n CSS' 카테고리의 다른 글
| 기획할 때 CSS 스택 정하기 : BEM or Atomic CSS (0) | 2023.06.12 |
|---|---|
| [ TailwindCSS] CSS 프레임워크 Tailwind설치 방법 : : React + Vite + TypeSrcipt + TailwindCSS (0) | 2023.06.09 |
| [CSS] CSS 방법론들의 특징, 장단점 (feat. Styled-Component) (0) | 2023.04.18 |
| [ CSS ]📌 레이아웃 뿌셔뿌셔 ( "FLEX", GRID, FLOAT 😫) (0) | 2023.02.17 |
| HTML 태그 중 inline 요소와 block 요소 (0) | 2023.02.14 |