2주차 HTML 학습하면서 자주 쓰이는 Tag 및 속성에 대한 정의를 나만의 방식으로 요약해보았다.
메타데이터 요소 😊
<title>
문서 제목 요소
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목 정의
텍스트만 포함, 태그 포함하더라도 무시
하나에 head태그에 title태그도 하나!
<meta>
<meta charset = UTF-8> 문자 인코딩
<meta name = viewport> 초기 사이즈에 대한 것
추가로 작성 할 시 ,로 구분
width, height,(너비, 높이)
initial-sacle(장치 너비),
maximum-sacle(가능한 최대 확대 비율),
minimul-scale(가능한 최소 확대 비율),
user-scalable(확대 여부)
<meta name>
content와 짝을 이루어 사용
application-name: 웹 페이지에서 구동 중인 애플리케이션 이름
author: 문서 저작자
description: 페이지에 대한 요약
generator: 페이지 생성한 소프트웨어 식별자
keywords: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록
referrer: 문서에서 시작하는 요청의 HTTP Referer헤더를 통제
<link>
외부 리소스 연결 요소
현재 문서와 외부 리소스 관계 명시
스타일 시트 연결할 떄 많이 사용 되고 사이트 아이콘(파비콘) 연결에 사용
- 간단한 대표 예제: href특성에 스타일 시트 경로 입력, rel(관계)특성에 stylesheet 사용
<link href="style/main.css" rel="stylesheet" />
- 대표적 파비콘 연결 방법
<link rel ='icon' href='favicon.ico'>
- 다른 파일 불러올 때는 type 명시를 해줘야 함
<link rel ='apple-touch-icon-precomposed' sizes='114x114'
href='apple-icon-114.png' type = 'image/png'>
type: text/html(html파일), text/css(스타일시트)같은 MIME타입 이여야 함.
<style>
스타일 정보 요소
문서나 문서 일부에 대한 스타일 정보 포함
일반적으로는 스타일은 외부 스타일 시트에 작성하고, <link>요소로 연결하는 편이 좋음
<script>
스크립트 요소
데이터와 실행 가능한 코드를 문서에 포함할 때 사용
보통 JavaScript 코드와 함께 씀
<body> 제일 마지막단에 <script> 작성 권장
- 외부 스크립트 가져오는 방법
<script src='javascript.js'></script>
- 내부에 인라인 스크립트를 작성 방법
<script>alert("Hello World!")</script>
전역 속성 😊
id
문서 전체에서 유일한 고유식별자(ID)를 정의
시작은 무조건 영어 소문자로 시작, 공백X
class
여러개의 요소를 선택 할 수 있는 식별자
공백 허용, 공백으로 클래스 구분!!
Ex) class = 'hi hello'하면 hi클래스, hello클래스 2개 가짐
style
요소에 적용할 CSS 스타일 선언을 담음
*PS* 보통은 <head>에 스타일 시트를 적용해서 사용하지만
빠른 스타일링 또는 TEST 목적으로 사용
Ex) <div style='background: #ffe7e8; border: 2px solid #e66465;'>
title
요소와 관련된 추가 정보 제공하는 텍스트를 나타냄
하나의 태그에 추가적인 설명을 툴팁으로 보여줌(마우스 올리면 툴팁 적용)
여러줄 가능, 공백, 개행 다 적용 되어 나타남.
자식이 가지고 있지 않아도 부모가 가지고 있으면 상속받음
lang
언어 태그 구문
상속 가능
data
무엇인가 보여야하고 데이터에 직접 데이터에 접근해야하는 애들을 여기에 넣으면안되지만
나중에 JS를 사용하여 암시적으로 사용자에겐 보이진 않지만
HTML요소가 가지고 있어야 할 정보를 넣는곳
Ex)
<article
id='electriccars'
data-columns='3'
data-index-number='12314'
data-parent='cars'>
</article>
draggable
드래그 가능 여부를 나타냄
true: 드래그 가능
false: 드래그 불가능
hidden
무언가를 숨길때 사용(시각적으로만 사용, 개발자 도구에는 뜸)
따라서 보안상으로는 쓰면 안됨
'HTML' 카테고리의 다른 글
| HTML TAG 정의 요약 (0) | 2022.11.06 |
|---|