오늘은 HTML의 전역속성, 기타 요소들에 대해 공부했다.
이전에 공부하면서 배운내용들중에 틈틈히 계속 나온내용들과, 기본적인 개념이라서 어렵지는 않았다.
우선 class와 id에대해 보자
class (별명)
공백으로 구분한 요소의 별칭을 지칭
id (이름)
클래스와 유사하나 class는 여러개의 별칭을 붙일수 있는거와 달리 고유한 식별자
style
css 요소 선언
<div class="section">안녕</div><!-- 중복해서 써도 가능-->
<div class="section">안녕</div>
<div class="section">안녕</div>
<div class="section">안녕</div>
<div class="section">안녕</div>
<div id ="section">안녕</div> <!-- 중복해서 쓰면 안됨-->
<script>
const section = document.querySelector('.section');
const sectionId = document.getElementById('section');
</script>계속 나왔던 개념이다.
참고로 head부분에
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.section{
background: gray;
}
</style> <!-- 요소에 적용할 css 선언 -->
</head>style부분을 추가해놨다. 가장 중요한건, class는 별명, id는 이름이란것만 생각하면 될 것 같다.
title
요소의 정보를 지정(설명)
lang
요소의 언어(ISO 639-1)를 지정
>보통 html태그 안에서 한번에 설정
data-*
사용자 정의 데이터 속성을 지정
html에 JS에서 이용할 수 있는 데이터를 저장하는 용도로 사용
<h2 title="이부분은 제목2입니다">제목2</h2>
<a href="https://google.com" title="GOOGLE">google</a>
<div title="div">div</div>
<p lang="ko">이 단락은 한글입니다</p>
<p lang="en">this paragraph is English</p> <!-- 보통 html 태그에서 한번에 범위를 설정한다 -->
<div id="me" data-my-name="mingyu" data-my-age="24">민규</div>
<script>
const me = document.getElementById('me');
console.log(me.dataset.myName);
console.log(me.dataset.myAge);
</script>
전역특성답게 어느 태그에 써도 무관하다. 밑에 써져있듯이 lang을 쓰면 언어를 설정해줄수 있고, 보통 html태그에 써서 한번에 설정한다고 한다.
또한, data설정을 쓰면 HTML상에서 데이터를 저장하여, JS코드에서 불러 사용할 수있다고 한다.
draggable
요소가 Drag and Drop API를 사용가능한지 지정
hidden
요소를 숨김
<div draggable="true">The element to drag </div>
<div draggable="false">The element to drag </div>
<form action="hidden-form" action="/form-action" hidden> <!-- hidden이 있기에 화면에서 보이지 않음 -->
<!-- 숨겨진 양식들 -->
<input type="text" name="id" value="mingyu">
</form>
<button form="hidden-form" type="submit">전송</button>
drag는 말 그대로 drag가 가능한지 불가능한지 설정해주는 태그이고, hidden또한 html이 작동은 하지만, 화면상에서 숨기게 해주는 태그이다. disable과 약간 차이가 있다고 생각할 수있겠다.
tabindex
TAB키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정
<input type="text" value="1(2)" tabindex="2">
<input type="text" value="2">
<div tabindex="0">2.5</div>
<input type="text" value="3(1)" tabindex="1">
<input type="text" value="4" tabindex="-1">
<input type="text" value="5(4)">말 그대로 탭키를 눌렀을때 지정해주는거고, 0으로 설정하면 기본으로 설정되며 div같이 tabindex가 안되는 태그도 가능하게 되고, -1로 설정하면 탭키로 지정이안되어짐을 알 수 있다.
그외 특수기호와 절대경로,상대경로개념은 간단해서 짧은 필기만 적어두겠다.
절대경로 vs 상대경로
./ 인접폴더에서 검색
../ 상위폴더에서 검색
http 링크 절대 폴더
/ http를 생략!
특수기호
: 띄어쓰기
< : <
> : >
'FrontEnd > HTML&CSS' 카테고리의 다른 글
| 02_CSS_단위 (0) | 2021.11.09 |
|---|---|
| 01_CSS개요,선택자,상속 (0) | 2021.11.08 |
| 09_Form,input (0) | 2021.11.01 |
| 08_표 콘텐츠 (0) | 2021.11.01 |
| 07_내장요소 (0) | 2021.10.31 |