네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.09](HTML 전역속성, 기타)
2023. 8. 7. 18:58ㆍHTML,CSS
01. 전역 속성 - class와 id
전역 속성: 모든 HTML 요소에서 공통적으로 사용 가능한 속성
class (별명을 설정할때)
공백으로구분
css 혹은 JavaScript의 요소를 선택 할 수 있다.
id(이름을 설정할떄, 고유한것, 한곳에 하나만)
문서에서 고유한 식별자를 정의
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/main.css">
<style>
.section{ /* .section의 의미:(선택자) .을 찍음으로서 section 이라는 클래스를 지칭해서 속성을 수정 */
width:100px;
color:red;
background:blue;
}
#section{ /* #section의 의미: #을 찍음으로서 section 이라는 id 를 지칭해라 */
height: 200px;
position:relative;
}
</style>
</head>
<body>
<div class ="section"></div>
<div class ="section"></div>
<div class ="section"></div>
<div class ="section"></div>
<div class ="section"></div>
<div id = "section"></div>
<!--" div id ="section" 2개의 문장은 허용되지않음(id): section 이라는 요소는 html 에서 하나만 존재해야함,(고유함) -->
<script>
const section= document.querySelector('.section');
/*클래스가 section 인 요소를 검색
"const section=": const section 이라는 요소를 찾는다
".": html 의 body 부분 내에서 검색하겠다.
"querySelector('.section')" : 클래스 section 을 찾아라 */
const sectionId=document.getElementById('section');
/*id가 section 인 요소를 검색 */
</script>
</body>
</html>
02. 전역 속성- style
<style>
요소에 적용할 CSS를 선언.
(html의 어디서든지 쓸 수 있다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<h1 style="color:red; background:blue;"></h1>
<p></p>
<div></div>
<!-- h1태그, p태그,div 태그등 모든 태그안에 style 이라는 태그를 사용가능하다. :전역속성 -->
</body>
</html>
03. 전역 속성 - title
<title>
요소의 정보(설명)을 지정.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<h2 title="이 부분은 제목2입니다!">제목2</h2>
<div title="DIV 태그입니다."> DIV</div>
</body>
</html>
결과:
04. 전역 속성- lang
<lang>
요소의 언어(ISO 639-1)를 지정.
<p lang="en">This paragraph is English</p>
<p lang="ko">이 단락은 한글입니다.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>
코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
</body>
</html>
05. 전역 속성 - data-
data-*
사용자 정의 데이터 속성을 지정.
HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용.
코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="me" data-my-name="leehuisu" data-my-age="851">leehuisu</div>
<script>
const me= document.getElementById('me'); /* document에 있는 id 값으로
element를 검색해서 me라는 부분에 담아놓은것(찾게된 상태) */
console.log(me.dataset.myName); /*console.log(): 개발자도구의 콘솔창에 로그를 남기겠다는 의미 */
console.log(me.dataset.myAge);
/* 이렇게 찾게된 me 부분에는 dataset이라는 속성이 있고 그안에 my-name 이라는 값이 있다.
me 라는 div 요소에 데이터부분에 myName 이라는 데이터가 있다는것
data-myname="leehuisu" = "me.dataset.myName" : 값이 저장된 부분
html은 일반적으로 '-' "대쉬표기법" 을 좋아함
JavaScript는 일반적으로 '.' "카멜표기법" 을 좋아함
console.log 부분은 javascript -> 카멜표기법 사용
data-my-name 부분은 hmtl-> 대쉬 표기법 사용
*/
</script>
</body>
</html>
06 전역 속성 - draggable
<draggable>
요소가 Drag and Drop API를 사용 가능한지 여부를 지정.
<div draggable="true">The element to drag.</div>
true 이면 drag 가 가능함
true 부분이 false 이면 사용 불가
auto 일 경우 브라우저가 알아서 판단하게됨
코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
</body>
</html>
07. 전역 속성- hidden
<hidden>
요소를 숨김.
코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./main.css">
<title>Document</title>
</head>
<body>
<form id="hidden-form" action="/form-action" hidden>
<!-- action: 전송할 정보를 처리할 웹페이지의 url -->
<!-- hidden 속성을 부여하게되면 특정한 부분을 숨길 수 있지만, 실질적인 html 의 내용은 동작가능한 내용이다. -->
<input type="text" name="id" value="leehuisu" >
<!-- 숨겨진 양식들 -->
</form>
<button form="hidden-form" type="submit">전송</button>
</body>
</html>
결과:
08. 전역 속성 - tabindex
<tabindex>
Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정.
코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<input type="text" value="1">
<input type="text" value="2">
<div tabindex="0">2.5</div> <!-- div는 비대화형 컨텐츠
tabindex 속성을 넣어주면 탭이동이 가능해짐-->
<input type="text" value="3">
<input type="text" value="4" tabindex="-1"> <!-- "-1" 음수값을 넣어주면 탭이동이 불가 -->
<input type="text" value="5">
</body>
</html>
결과:
09. 절대경로와 상대경로
<상대경로>
상대적으로 경로가 달라질 수 있다.
./ : 생략가능(주변에서 찾기)
../ : 폴더를 한번 나갔다가 찾기(나가서찾기)
<절대경로>
임의로 주소를 지정해줘서 가지고오는것
도메인주소를 생략 (/하나만 남아있음)
<img src = "/assets/huisu.jpg">
10. 주석(Comment)
주석
주석처리 단축키 : ctrl + /
코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<!-- 이 링크는 구글 홈페이지로 이동합니다. -->
<script>
const a=0;
const e = document.querySelector('a');
</script>
</body>
</html>
11. 특수기호 (Entities)
코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
Hello World! <!-- 띄어 쓰기를 여러번 입력하더라도 한번만 화면에 출력됨 -->
Hello World!
<!-- : 띄어쓰기 한번을 의미함 -->
<h1>
< div > </div> <!-- div 자체를 표현해서 쓰고싶다면
<: 왼쪽꺽세
>: 오른쪽꺽세 -->
</h1>
</body>
</html>
결과:
'HTML,CSS' 카테고리의 다른 글
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.11] (선택자,상속) (0) | 2023.08.15 |
|---|---|
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.10](CSS 실습환경) (0) | 2023.08.11 |
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter 08](HTML 요소- 표 컨텐츠 &양식) (0) | 2023.08.04 |
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기[Chapter07](HTML 요소- 멀티미디어&내장콘텐츠& 스크립트) (0) | 2023.07.27 |
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter 06](HTML 요소 - 인라인 텍스트 & 수정) (0) | 2023.07.20 |