[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 32회차 미션

8 * 4 = 32

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 32일차입니다!

오늘은 9번째 커리큘럼 'HTML / 전역 속성, 기타' 과정 공부를 마쳤습니다.

이로써 HTML 파트가 마무리되었는데요. 많은 지식을 약 한 달 동안 꼼꼼하게 머릿속에 넣을 수 있어 기쁩니다. 😊

한 달 동안 다른 공부도 꽤 했는데, 시간이 너무 빨리 가서 그런지 매번 '뭐 했다고 시간이 이렇게...!' 라는 말만 나오네요.

 

공부 내용

오늘은 07~11. 전역속성 - hidden, tabindex / 절대경로와 상대경로 / 주석 (Comment) / 특수기호 (Entities) 를 공부했어요.

---

<Today I Learned>

<hidden>

🔶 요소를 만들어두고 화면에서 숨길 때 사용

🔷 예제 - form은 숨겨져있지만 버튼을 누르면 form의 action 속성에 따라 이동

<form id="hidden-form" action="/form-action" hidden>
  <!-- 숨겨진 양식들.. -->
</form>
<button form="hidden-form" type="submit">전송</button>

(예제 출처 - https://heropy.blog/2019/05/26/html-elements/)

 

<tabindex>

🔶 Tab 키를 이용하여 요소를 순차적으로 focus 탐색할 순서를 지정

🔶 대화형 콘텐츠(input, img 등)는 기본적으로 코드 순서대로 Tab 순서가 지정됨

🔶 비대화형 콘텐츠(div 등)에는 tabindex="0" 을 지정하여 사용

🔶 tabindex="-1" : focus는 가능하지만 탭 순서에서 제외됨

 

🔷 웬만하면 tabindex="1" 이상의 양수값을 사용하지 말고 html 코드 순서대로 focus 맞추기

 

<절대경로>

🔶 http(https)로 시작하는 도메인 주소를 삽입하거나, /(//)로 시작하는 경로 삽입

🔶 / : 도메인 생략하고 사용 가능

 

<상대경로>

🔶 ./(주변 디렉토리 탐색) 또는 ../(이전 디렉토리 탐색) 사용

🔶 ./ : 생략 가능

 

<주석 (Comment)>

🔷 주석 처리하고 싶은 내용에 (Window) Ctrl + / 단축키 입력

 

🔶 HTML : <!-- 내용 -->

🔶 CSS : /* 내용 */

🔶 JS : // 내용 또는 /* 내용 */

 

<특수기호 (Entities)>

참고자료: https://www.freeformatter.com/html-entities.html

Complete list of HTML entities - FreeFormatter.com

🔶 띄어쓰기 : $nbsp;

🔶 꺾쇠괄호 : < ➡ &lt; / > ➡ &gt;

 

---

학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

강의 링크: https://bit.ly/3m0t8GM