티스토리 뷰
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 31일차입니다!
오늘은 9번째 커리큘럼 'HTML / 전역 속성, 기타' 과정 공부를 시작했습니다.
분량을 보니 내일이면 HTML 파트를 마무리할 것 같아요. 🎉
HTML 기본기를 충실히 다지고 실무에서 정확한 용어를 사용할 수 있는 개발자가 되고 싶습니다. 👩💻
오늘은 9번째 커리큘럼의 절반 분량인 01~06. 전역속성 - class와 id / style / title / lang / data-* / draggable 에 대하여 공부하였습니다.
<Today I Learned>
<전역 속성(Global Attributes)>
🔶 모든 HTML 요소에서 공통적으로 사용 가능한 속성
<class>
🔶 공백으로 구분된 요소의 별칭 지정
🔶 중복 사용 가능
🔶 CSS 또는 JavaScript의 요소 선택기(CSS 선택자나 QuerySelector 같은 것)를 통해서 요소를 선택하거나 접근함
🔷 CSS 선택자 예시 : .section
🔷 JavaScript의 요소 선택기 예시 : getElementByClass('section') 또는 querySelector('.section')
<id>
🔶 문서에서 고유한 식별자를 정의 (=이름)
🔷 CSS 선택자 예시 : #section
🔷 JavaScript의 요소 선택기 예시 : getElementById('section') 또는 querySelector('#section')
<style>
🔶 CSS 인라인 작성 방식
🔶 요소에 적용할 CSS를 선언
🔷 <h1 style="color: red"> 제목1 </h1>
<title>
🔶 요소의 정보(설명)를 지정
🔷 title 속성이 들어있는 요소를 마우스오버하면 아래 툴팁에 지정한 설명이 나타남
➡ 예제: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title
<lang>
🔶 요소의 언어(ISO 639-1)를 지정
🔶 전역 속성은 어떤 태그에서든지 사용 가능하지만, <html> 태그에 lang 속성을 설정하면 문서 전체 언어가 한 번에 설정 가능하므로 보통 아래와 같이 사용
🔷 <html lang="ko"> ... </html>
<data-*>
🔶 사용자 정의 데이터 속성 지정
🔶 HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용
<div id="me" data-my-name="QQyuKim" data-my-age="25"> QQyuKim </div>
<script>
const me = document.querySelector("#me");
console.log(me.dataset.myName); // QQyukim
console.log(me.dataset.myAge); // 25
</script>
<draggable>
🔶 요소가 Drag and Drop API를 사용 가능한지 그 여부를 결정함
🔷 <div draggable="true">...</div> : 해당 요소를 항상 드래그 앤 드롭 가능한 상태로 설정함
🔷 만약 draggable 속성을 설정하지 않으면 그 값은 "auto"가 되며, 브라우저가 이 요소가 draggable 인지 판단하여 작동함
학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/
한눈에 보는 HTML 요소(Elements & Attributes) 총정리
인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online
heropy.blog
강의 링크: https://bit.ly/3m0t8GM
'[패캠] 프론트엔드 패키지 > HTML' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 32회차 미션 (0) | 2020.11.19 |
|---|---|
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 30회차 미션 (0) | 2020.11.17 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 29회차 미션 (0) | 2020.11.16 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 28회차 미션 (0) | 2020.11.15 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 27회차 미션 (0) | 2020.11.14 |