[HTML] Attribute
·
Frondend
HTML 속성(Attribute)이란?HTML 속성(Attribute)은 HTML 요소에 추가적인 정보를 제공하는 역할을 합니다. 속성은 항상 시작 태그 내부에 정의되며, 일반적으로 속성명="속성값" 형식으로 사용됩니다.예를 들어, 링크를 생성하는 태그에서 href 속성은 사용자가 클릭할 때 이동할 주소를 지정합니다.Example 링크1. HTML 속성의 주요 특징HTML 태그에 부가적인 정보를 제공항상 시작 태그 내부에 작성속성 값은 큰따옴표("") 또는 작은따옴표('')로 감싸는 것이 권장됨HTML5부터는 일부 속성(예: checked, disabled)은 속성명만 작성하는 것도 가능2. HTML 속성의 종류HTML 속성은 크게 전역 속성(Global Attributes)과 개별 태그 전용 속성(S..
[HTML/JavaScript] querySelector, getElementById, addEventListener
·
Frondend
웹 개발에서 HTML 요소를 선택하고 조작하는 것은 매우 중요합니다. JavaScript에서는 querySelector, getElementById 등의 메서드를 사용하여 요소를 선택할 수 있으며, addEventListener를 활용하여 이벤트를 처리할 수 있습니다.1. querySelector와 getElementById 비교HTML 요소를 선택하는 대표적인 두 가지 방법은 querySelector와 getElementById입니다.메서드설명사용 예제getElementById문서에서 id 속성을 가진 요소 하나를 선택document.getElementById("myElement")querySelectorCSS 선택자를 사용하여 첫 번째 요소를 선택document.querySelector(".myCla..
[HTML] Html 시작하기
·
Frondend
IntroHTMLHTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드이다.HTML 기본 구조!DOCTYPE으로 선언 후에 html, head, body 순으로 구성되어 있다. : HTML 문서가 어떤 버전의 HTML이나 XHTML로 작성되었는지 웹 브라우저에게 알려주는 역할을 한다.: 문서 가장 최상단에서 !DOCTYPE 태그 바로 아래에 위치하며 하위에 head와 body를 포함하며, lang 속성을 이용해서 사용할 언어를 지정할 수 있다. 기본 요소요소안에 시작 태그, 콘텐츠(내용), 닫는 태그로 구성이 된다.텍스트문단 태그 : 안에 들어가는 데이터의 크기만큼만 공간을 가지는 태그 기본적으로 display : inline이다 :..
[Frontend] DOM (Document Object Model)이란?
·
Frondend
DOM 이란?HTML, XML 문서의 구조화된 표현으로, 문서의 내용을 프로그래밍적으로 접근하고 수정할 수 있도록 설계된 API로, browser에서 로드되며, node 트리로 표현하는 문서 모델입니다JavaScript와 같은 언어를 사용해 DOM 요소를 추가, 삭제, 변경할 수 있으며, 이로인해 동적인 웹 페이지를 만들 수 있습니다.주요 개념1. DOM에서 모든 요소는 노드(Node)로 표현됩니다. 노드는 다음과 같은 유형으로 나뉩니다:문서 노드 (Document Node): DOM 트리의 최상위 객체 (문서를 나타냄)요소 노드 (Element Node): HTML 태그 (예: , 등)속성 노드 (Attribute Node): HTML 요소의 속성 (예: id, class)텍스트 노드 (Text No..