HTML (5) 썸네일형 리스트형 [HTML] dialog 태그 태그는 HTML5에서 도입된 요소로, 웹 페이지 내에서 대화 상자나 모달 창을 생성하는 데 사용됩니다. 사용자와의 상호작용을 위한 대화형 컴포넌트를 만듭니다. 페이지의 다른 부분과 분리된 콘텐츠를 표시합니다.1. 기본 동작: 기본적으로 화면에 표시되지 않습니다. JavaScript를 통해 열고 닫을 수 있습니다.2. 주요 메서드: show(): 대화 상자를 비모달 방식으로 표시합니다. showModal(): 대화 상자를 모달 방식으로 표시합니다. close(): 대화 상자를 닫습니다.3. 접근성: 스크린 리더와 키보드 네비게이션을 지원하여 접근성을 향상시킵니다. 4. 폼 통합: 와 함께 사용하여 close() 설정없이 쉽게 닫기 기능을 구현할 수 있습니다.그리고 일반적인 폼 제출 동작을 방지하고, 대화.. [HTML] srcset 속성이란? srcset 속성은 HTML5에서 도입된 반응형 이미지를 위한 속성입니다.이 속성을 사용하면 브라우저가 다양한 화면 크기와 해상도에 맞는 최적의 이미지를 선택할 수 있게 됩니다.1. 기본 구조: 2. srcset 속성 구문여러 이미지 소스와 해당 이미지의 너비를 지정합니다.형식: 이미지URL 너비w, 이미지URL 너비w, ...예시: 3. sizes 속성미디어 조건에 따른 이미지 표시 크기를 지정합니다.브라우저가 적절한 이미지를 선택하는 데 도움을 줍니다.예시: 4. 장점디바이스 특성에 맞는 최적의 이미지 제공불필요한 대용량 이미지 다운로드 방지페이지 로딩 속도 향상모바일 데이터 사용량 절감5. 브라우저 지원대부분의 최신 브라우저에서 지원됩니다.지원하지 않는 브라우저는 src 속성의 이미지를 .. [HTML] a 링크를 새 창에서 열 때 주의 점 구글 target="_blank" 로 보통 새 창이나 탭에서 링크를 여는 경우가 있는 데,이 때는 rel="noopener noreferrer" 추가 속성을 주어 원래 페이지에 접근할 수 없게 해야한다.구글 window.opener 를 사용하여 이전 페이지를 조작하거나 피싱 공격에도 사용할 수 있기 때문이다.(window.opener.location을 조작하여 원래 페이지의 URL을 변경하는 피싱 공격에 사용될 수도 있습니다) 물론 이러한 예시들은 window.opener가 존재하고 동일 출처 정책을 위반하지 않을 때만 작동하지만위 속성을 줘서 window.opener를 null로 설정하여 새 탭에서 원래 페이지에 접근하는 것을 막는 습관을 갖는 게 좋다고 생각한다. [HTML] 한글 로렌입숨(Lorem Ipsum) 제너레이터 간혹 더미 텍스트가 필요할 경우 vscode 에서는 lorem + tab 을 누르면 더미 텍스트가 나오 게 할 수 있는 데,한글이 필요한 경우에는 아래 사이트를 이용하면 된다.물론 로렌입숨도 있다https://hanipsum.com/ 한글입숨 생성기 - Hanipsum hanipsum.com [html] <button> 에서 굳이 type에 button 을 적어주는 이유 에서 type에 button을 명시하는 이유는 기본적으로 태그의 type 속성 값은 "submit"이다.그래서 만약에 태그를 사용하면서 클릭 시에 submit이 실행되지 않기를 원한다면,type="button"을 추가해주면 된다. ( type 을 구체적으로 명시하지 않으면 기본, type="submit" 으로 동작된다) 또한, form 태그에 속하지 않은 input에서 엔터키를 눌렀을 때, 이슈가 발생하는데,이를 해결하기 위해서도 태그에서 type="button"을 명시해주는 것이 좋다. 그러나, button 태그의 type 속성 값인 submit, reset, button은 input 태그의 type 속성으로도 사용할 수 있다.그렇다면, 태그를 사용하는 것보다 태그를 사용하는 것이 더 다양한 .. 이전 1 다음
