HTML (39) 썸네일형 리스트형 [HTML] Life Cycle(생명 주기) 바로 알기 Life Cycle(생명 주기)이란 생애, 그러니까 HTML의 라이프 사이클은 문서(document)가 브라우저상에 생겨나고 변화하고 사라지는 일련의 과정을 뜻한다. HTML 문서의 생명 주기에는 다음의 세 가지 주요 이벤트가 관여한다. DOMContentLoaded브라우저가 HTML을 전부 읽고 DOM Tree를 완성하는 즉시 발생. 이미지 파일이나 스타일시트 등 기타 자원은 기다리지 않는다. 사용 사례: DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때. loadDOM Tree 생성이 완성되었을 뿐 아니라 이미지, 스타일시트 등 외부 자원도 모두 불러오는 것이 끝났을 때 발생. 사용 사례: 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후 발생하.. [HTML] 특수기호 - HTML Entities ▶ HTML Entities - 화면상에 'Hello world!'라는 문구를 출력하고 싶은 상황을 가정. - 이때 Hello와 world! 사이에 띄어쓰기를 여러 개 넣고 싶다면? - HTML에서 띄어쓰기는 여러 번 입력되더라도 화면상에는 한 번만 압축되어 출력됨. - 는 HTML의 특수기호로 한 번의 띄어쓰기를 의미함. - 원하는 만큼의 띄어쓰기가 들어갈 부분에 를 추가하여 처리할 수 있음. - 가 하나의 제목으로 출력되기 원하는 상황을 가정. - 가장 왼쪽 이미지의 코드는 화면상에 아무것도 출력되지 않음. 가 있는 부분의 코드가 HTML이 읽혀지는 실질적인 코드로 작성되어 있기 때문. - 꺽쇠괄호()가 열리고 닫히는 부분을 포함시켜 화면상에 출력시키고 싶다면 HTML Entities로 새롭게 작성 .. [HTML] 주석 - 주석 처리 시 브라우저는 해당 부분의 코드를 해석하지 않으며, 따라서 화면에 출력되지 않음. - 화면에 출력되지 않는 영역을 주석 또는 메모 처리할 수 있음. - 주석 처리를 담당하는 특수기호는 HTML, CSS, JS 등에서 모두 상이하게 나타남. - 하지만 주석 처리에 대한 단축키는 거의 모든 에디터에서 동일하게 사용. - 주석 처리할 영역을 드래그한 후 Ctrl+/(Windows) 또는 Cmd+/(macOS) [HTML] 전역 속성(7) - tabindex ▶ 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"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능. - 탭 이동.. [HTML] 전역 속성(6) - draggable, hidden ▶ draggable 속성 요소가 Drag and Drop API를 사용 가능한지 여부를 지정. drag해서 drop할 수 있는 명령 체계를 활용할 수 있는지 없는지 설정. 작성하지 않는 경우 true/false가 아니라 기본값이 auto로 지정됨. - auto는 드래그 가능 여부를 브라우저가 판단하는 것. ▶ hidden 속성 요소를 숨김 - hidden 속성을 통해 화면상에는 입력창이 나타나지 않지만 전송 버튼 클릭 후의 결과 화면에서 URL을 보면 에 지정된 값이 전송된 것을 확인할 수 있음. - hidden 속성을 통해 특정 부분을 숨길 수는 있지만 숨겨진 부분의 HTML 내용은 동작할 수 있는 부분임. [HTML] 전역 속성(5) - data ▶ data-* 사용자 정의 데이터 속성을 지정. 일반적으로 JavaScript에서 이용할 수 있는 데이터(정보)를 HTML에 저장하는 용도로 사용. - HTML에서 보관하고 있다가 자스에서 필요할 때 활용 가능. data-*에서 data- 이후 * 부분에는 원하는 명칭을 지정할 수 있음. [HTML] 전역 속성(4) - lang ▶ 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 속성을 지정해 주면 그 내부에서 일일이 지정해 줄 필요가 없기 때문에. 다른 부분에서는 되도록 반복적이게 사용하지 않는 것을 권장함. 다른 언어가 나온다면 해당 언어가 무엇인지 브라우저에 알려 주는 것도 좋은 방법. [HTML] 전역 속성(3) - title ▶ title 속성 요소의 정보(설명)를 지정. 지정된 설명/정보는 마우스 오버 시 tip으로 표시됨. 이전 1 2 3 4 5 다음
