본문 바로가기

분류 전체보기25

<javascript> 자바스크립트 이벤트 연결 javascript 객체의 이벤트 연결은 'addEventListener'를 사용한다. 기본 형태 : 선택자.addEventListener('이벤트',function(){ 이벤트 발생 시 실행문 }) 1) function 또는 화살표함수를 이용한 두가지 형태의 표현 선택자.addEventListener('이벤트',function(){이벤트발생시 실행문}) 선택자.addEventListner('이벤트명',()=>{이벤트발생시 실행문 }) 2) 이벤트 연결 사용 예시 - click / mouseenter(마우스영역에 들어가는 것)/ mouseleave(마우스영역에서 나오는 것) - 이외에도 여러 이벤트가 있지만 다음과 같은 이벤트로 형태를 확인할 수 있다. HTML 삽입 미리보기할 수 없는 소스 2024. 4. 3.
<javascript> 객체요소의 선택 오늘 정리할 javascript의 내용은 html의 구조에서 부모요소, 자식요소, 형제요소를 각 선택하는 방법이다. 이전에 언급한대로 선택자의 경우 변수를 활용하여 진행되었다. 1. 부모요소의 선택 · 선택자.parentElement : 직계부모 · 선택자.closest('선택할 상위부모객체') : 직계부모제외 2. 자식요소의 선택 · 선택자. children - 이 때 자식요소를 배열값으로 가져오게 됨에 따라 for구문 활용 3. 형제객체의 선택 · 선택자.previousElementSibling : 기준객체 앞 형제요소 · 선택자.nextElementSibling : 기준객체 뒤 형제요소 HTML 삽입 미리보기할 수 없는 소스 2024. 4. 3.
<javascript> 문서객체의 선택 javascript에서 변수는 데이터를 저장할 수 있는 공간이다. 변수를 선언하기 위한 선언문으로 var, let, const의 선언문을 사용한다. var a let b const c var : 동일한 변수명으로 재선언, 재정의가 가능 let : 동일한 변수명으로 재선언불가/선언 후 변수명으로만 재정의 가능 - { },( ), 함수 안에서 선언 시 지역변수로 정의/지역변수와 전역변수의 구분 필요 const : 동일한 변수명으로 재선언, 재정의 불가/선언문을 빼고 변수명으로도 재정의 불가 - javascript 사용 시 선택자의 선택 노드가 길어서 선택자를 저장하여 활용하게 됨 ◆ 스타일의 적용 - CSS, j-query 의 경우 내 문서 전체에 있는 동일한 스타일명에 동일한 스타일이 적용된다. - jav.. 2024. 4. 2.
<javascript> 자바스크립트 개념 현재 자바스크립트를 배우고 있는 중이지만 개념을 따로 알고자 한적은 없는 것 같아서 이번 기회에 자바스크립트의 개념을 정리해보고자 한다. 자바스크립트는 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어이다. 웹 문서에서 HTML과 CSS는 웹 정보의 모델과 뷰를 담당하고 자바스크립트는 제어를 담당하게 된다. 뿐만 아니라 HTML, CSS보다 프로그래밍 언어의 성격이 강하다. 자바스크립트에서 사용하는 데이터 타입은 사용용도에 따라 기본형 타입(number, string, boolean, array, object, null, undefined)과 객체 타입으로 구분이 가능하다. number 정수 혹은 실수 100, 28.5 string 문자 혹은 문자열 '선영', "박선영" boolean 참 혹은 거.. 2024. 4. 1.
<html> HTML5 문서의 구조 HTML5 문서의 구조는 과 , : 웹페이지의 정보를 정의 ▶ 태그 내에는 다음과 같은 태그를 작성할 수 있음 ~ : 태그 내 작성한 내용이 웹 브라우저의 제목 표시줄에 표시 : 문서를 만든 이, 검색 시 키워드, 웹 페이지 정보 등 작성 : 문서 내 모든 링크의 기준이 되는 URL 지정 : CSS3와 같은 문서장식 프로그램이 위치하는 공간 : 외부 문서 혹은 사이트 자원의 연결 : 자바스크립트 등 다양한 프로그램이 위치 ~ : HTML5문서의 본문을 작성하는 공간 -~: 헤드라인 태그(태그의 경우 로고삽입시 주로 사용) - 스페이스 키(공백) - 줄바꿈 태그 - 기호 > - 문단 구분 태그 - 태그 (본문 내용텍스트 중 일부 강조, 변경을 위해 사용) - HTML5문서의 주석은 의 구조 2024. 4. 1.
<vscode> visual studio code 프로그램 코딩작업에는 수많은 언어, 작업프로그램들이 있지만 UI/UX 디자이너들이 html, css, javascript 작업을 위해 사용하는 대표적인 프로그램은 Visual Studio Code! https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.. 2024. 4. 1.