▶ HTML Entities - 화면상에 'Hello world!'라는 문구를 출력하고 싶은 상황을 가정. - 이때 Hello와 world! 사이에 띄어쓰기를 여러 개 넣고 싶다면? - HTML에서 띄어쓰기는 여러 번 입력되더라도 화면상에는 한 번만 압축되어 출력됨. - 는 HTML의 특수기호로 한 번의 띄어쓰기를 의미함. - 원하는 만큼의 띄어쓰기가 들어갈 부분에 를 추가하여 처리할 수 있음. - 가 하나의 제목으로 출력되기 원하는 상황을 가정. - 가장 왼쪽 이미지의 코드는 화면상에 아무것도 출력되지 않음. 가 있는 부분의 코드가 HTML이 읽혀지는 실질적인 코드로 작성되어 있기 때문. - 꺽쇠괄호()가 열리고 닫히는 부분을 포함시켜 화면상에 출력시키고 싶다면 HTML Entities로 새롭게 작성 ..

- 주석 처리 시 브라우저는 해당 부분의 코드를 해석하지 않으며, 따라서 화면에 출력되지 않음. - 화면에 출력되지 않는 영역을 주석 또는 메모 처리할 수 있음. - 주석 처리를 담당하는 특수기호는 HTML, CSS, JS 등에서 모두 상이하게 나타남. - 하지만 주석 처리에 대한 단축키는 거의 모든 에디터에서 동일하게 사용. - 주석 처리할 영역을 드래그한 후 Ctrl+/(Windows) 또는 Cmd+/(macOS)

▶ tabindex 속성 Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 숫자로 지정. 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨. - 대화형 콘텐츠? 사용자와의 상호작용을 위해 특별하게 설계된 요소. ex) , , ... - 대화형 콘텐츠: developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%EB%8C%80%ED%99%94%ED%98%95_%EC%BD%98%ED%85%90%EC%B8%A0 비대화형 콘텐츠에도 tabindex="0"을 지정하면 대화형 콘텐츠와 같이 탭 순서를 사용할 수 있음. tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능. - 탭 이동..

▶ draggable 속성 요소가 Drag and Drop API를 사용 가능한지 여부를 지정. drag해서 drop할 수 있는 명령 체계를 활용할 수 있는지 없는지 설정. 작성하지 않는 경우 true/false가 아니라 기본값이 auto로 지정됨. - auto는 드래그 가능 여부를 브라우저가 판단하는 것. ▶ hidden 속성 요소를 숨김 - hidden 속성을 통해 화면상에는 입력창이 나타나지 않지만 전송 버튼 클릭 후의 결과 화면에서 URL을 보면 에 지정된 값이 전송된 것을 확인할 수 있음. - hidden 속성을 통해 특정 부분을 숨길 수는 있지만 숨겨진 부분의 HTML 내용은 동작할 수 있는 부분임.

▶ data-* 사용자 정의 데이터 속성을 지정. 일반적으로 JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용. - HTML에서 보관하고 있다가 자스에서 필요할 때 활용 가능. data-*에서 data- 이후 * 부분에는 원하는 명칭을 지정할 수 있음.

▶ lang 속성 language의 약어. 요소의 언어(ISO 639-1)를 지정. - ISO 639-1 코드 목록: ko.wikipedia.org/wiki/ISO_639-1_%EC%BD%94%EB%93%9C_%EB%AA%A9%EB%A1%9D 전역 속성이므로 어느 태그에서든 사용할 수는 있지만 대부분의 경우 에 사용. - 에서만 사용 가능한 것도 아닌데 그렇게 하는 이유는 일반적으로 사용되는 사이트들은 설정되는 언어가 하나기 때문. - 최상위 루트에 lang 속성을 지정해 주면 그 내부에서 일일이 지정해 줄 필요가 없기 때문에. 다른 부분에서는 되도록 반복적이게 사용하지 않는 것을 권장함. 다른 언어가 나온다면 해당 언어가 무엇인지 브라우저에 알려 주는 것도 좋은 방법.