전역속성
- 어떤 태그에도 전부 다 사용할 수 있는 속성
class, id
- 식별자,
- id : 고유 식별자(하나의 문서에는 하나의 id만 사용 가능), 공백을 허용하지 않음
- class : 중복 사용 가능, 하나의 요소가 여러개를 가질 수 있음(공백으로 구분)
<div id="hello">안녕</div>
<div class="hello_2 hi">안녕</div>
<div class="hi">안녕</div>
<div>안녕</div>style
- 태그의 속성으로 style을 쓰면 하나의 태그에 style을 적용할 수 있음
- 짧은 css나 연습할 때, 일시적으로 style 적용할 일이 있다거나 테스트 등 특수한 상황에 쓰임
- 외부의 css 파일 보다 우선 적용되기 때문에 지양
<div style="background: #ffe7e8; border: 2px solid #e66465;">
<p style="margin: 15px; line-height: 1.5; text-align: center;">
Well, I am the slime from your video<br>
Oozin' along on your livin' room floor.</p>
</div>
title
- 커서를 올리면 설명하는 문구를 보여줌
- 부모 요소가 있더라도 자식 요소가 우선시 되어 나타남
<div title="바깥 박스">
<div title="첫번째 요소">안녕</div>
<div>반갑</div>
</div>
lang
- 콘텐츠를 읽는 사람을 명시함
- 웹 접근성을 높일 때, 스크린 리더를 작성할 때
- 일부 다른 언어가 있다면 부분적으로 적용할 수도 있음
<html lang="en">
data
- 자바 스크립트가 이해할 수 있게 만들기 위해 사용
- 일반 html 속성이 아니라 사용자가 임의로 만든 것
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
draggable
- 드래그가 가능한지 명시하는 속성
- true/false
- 자바스크립트를 이용하면 이미지 옮기기 등을 할 수 있음
<img src="images/small.png" draggable="false">
hidden
- 웹사이트상, 스크린 리더에 보이지 않게 만드는 속성
- 하지만 개발자 도구에서 볼 수 있으며 css를 통해 보이게 할 수도 있음
<img src="images/small.png" hidden>
html 기본 끝~~~👏
반응형
'html,css 기초' 카테고리의 다른 글
| css 1 : 소개, 적용 방법, 캐스캐이딩 (0) | 2022.07.11 |
|---|---|
| html 8 : 메타데이터 title, meta, link, MIME, style, script (0) | 2022.07.10 |
| html 7 : 폼 form, action, method, label, fieldset, legend, input 속성 (0) | 2022.07.10 |
| html 6 : 임베디드 image, 이미지 유형, srcset, sizes, video, audio, iframe (0) | 2022.07.07 |
| html 5 : 목록과 표 ol, ul, li, dl, dt, dd, div, table, tr, th, td (0) | 2022.07.05 |
댓글