addEventListener()를 사용하면 다양한 이벤트를 특정 요소에 적용할 수 있습니다.아래는 자주 사용되는 이벤트 종류를 정리한 목록입니다. addEventListener()를 활용하면 원하는 요소에 다양한 이벤트를 추가할 수 있습니다.필요한 이벤트를 찾아서
background-image와 <img> 태그는 웹에서 이미지를 표시하는 두 가지 주요 방법입니다. 각각의 차이점과 사용 용도를 정리해 드리겠습니다. <img> 태그는 HTML 요소로 직접 이미지를 삽입하는 방식입니다.✔️ 이미지가 콘텐츠(content)
프론트엔드 지식이 미천하기 때문에 GPT 도움을 받고있는데.. 변수의 유효범위가 계속 의문이었다.DOMContentLoaded 이벤트는 문서가 로딩될떄 단 한번만 실행되고,그리고 안에서 const, let 선언된 변수들은 다 지역변수로 생각되서저 코드가 과연 동작할까(
네, color 속성은 기본적으로 하위 요소(DOM 요소)들에게 상속됩니다. color 속성은 기본적으로 텍스트 관련 속성이므로 상속이 됩니다.만약 부모 요소에서 color를 지정하면, 자식 요소들은 명시적으로 다른 색상을 지정하지 않는 한 이를 자동으로 상속받습니다
SEO 를 위해서는 a 태그가 정석이라고 한다.주요 용도: 페이지 이동 (새로운 URL로 이동)기본 동작: 클릭하면 링크된 페이지로 이동 속성: href(목적지 URL), target(새 탭 열기 등) SEO 영향: 검색 엔진이 링크를 탐색 가능 예제 코드:사용
element 가 딱 적절해보임...ㅋㅋㅋDOM의 일부를 영단어로 표현할 때, 다음과 같은 용어를 사용할 수 있습니다. Node (노드) DOM은 트리 구조로 이루어져 있으며, 각 요소는 노드(Node)라고 합니다. 예: "Each element in the DO
display flex center 를 남용했었는데..텍스트 정렬이 제대로 안되는 부분이 있어서.. 다시 생각해보니 저 text-align 정렬을 써야되는 것이었다.시간 지나면 잊어버리기 때문에 기록해둠..
SPA 구조의 웹사이트(https://m.pet-friends.co.kr/main/tab/6) 를 클론중인데..리액트 없이 하다보니 그냥 바닐라 스크립트로 innerHTML 을 활용할 수 밖에 없을거 같아서 GPT 에게 질문해 보았다.아래부터는 GPT 답변..
event.preventDefault()는 이벤트의 기본 동작을 취소하는 메서드입니다. 주로 브라우저가 자동으로 수행하는 기본 동작을 막고, 자체적으로 처리할 동작을 정의하고 싶을 때 사용합니다.event.preventDefault()를 사용하는 이유는 여러 가지가 있
SVG 파일을 웹페이지에서 불러오는 방법은 여러 가지가 있으며, 상황에 따라 적절한 방법을 선택하면 됩니다. ✅ 장점 사용이 간단하고 HTML에서 바로 적용 가능 브라우저 캐시를 활용할 수 있어 성능 최적화 가능 ❌ 단점 fill, stroke 등의 스타일을
SCSS(Sassy CSS)는 Sass(Syntactically Awesome Stylesheets)의 확장 문법으로,CSS의 단점을 보완하여 더 강력한 스타일링 기능을 제공하는 CSS 전처리기(Preprocessor)입니다. ✅ CSS와 완전히 호환되며, .scss