본문 바로가기

전체 글83

HTML과 CSS가 만나는 법 CSS를 삽입하는 2가지 방법 1. 인라인(inline) 방식 : 가장이해하기 쉬운 방식으로, 태그에 직접 삽입한다. : style 속성은 HTML 표준의 약속으로 "style 속성의 값으로는 CSS가 온다. 스타일 속성이 위치되어 있는 태그에 적용된다." 라는 것을 의미한다. Hello World Hello World 2. 인터널(internal) 방식 : 에 태그를 삽입하여 디자인을 적용하는 방식 : 마찬가지로 태그 안에는 CSS가 들어온다는 HTML의 표준 약속이 존재한다. h2 { color: blue; } 2023. 9. 15.
[javascript] 응용 기록 7 오브젝트(object)사람 = 특징(이름, 성별, 키..), 동작(말하기, 걷기)속성들과 액션으로 이뤄진 집합체 = 객체 객체 생성하기{ }를 통해 객체를 생성할 수 있다.key: value 값으로 이루어져 있다.메서드(method) - 속성 중에 값이 함수인 것을 메서드라고 부른다. this객체가 메서드를 실행했을 때, 메서드를 실행한 주체 객체를 의미한다.전역 영역에서 this를 호출하면 최상위 객체(window 혹은 global)가 출력된다. 생성자(constructor)비슷한 속성과 함수를 가진 객체들을 찍어낼 수 있는 틀구조는 같되 각각의 속성의 값은 개별적으로 다 다른 객체들을 만들 수 있다. 1) function, 생성자 함수를 이용해서 만들기function Person(nickName, a.. 2023. 8. 25.
[javascript] 응용 기록 6 이벤트 위임의 문제점target 속성을 이용하면 버튼 안의 아이콘이나 글자를 잡는다.(버튼 자체를 잡지 못함) 해결 방안1) css이벤트를 받지 않을 대상에 pointer-event: none; 을 부여한다.-> 하위에 있는 자식들도 target으로 잡을 수 없기 때문에 복잡한 구조에서는 적절하게 사용해야 한다. 2) 자바스크립트부모를 타고 올라가서 조사하는 방법 3) closetelem1에 해당하는 가장 가까운 e.target의 부모를 잡아내는 것 2023. 8. 25.
[javascript] 응용 기록 5 thisaddEventListener에서 this는 이벤트 실행 객체를 의미한다. 이벤트 객체함수가 이벤트 핸들러로 실행이 되면 첫 번째 매개변수 자리에 자동으로 이벤트 객체가 들어온다.이벤트 객체 - 지금 발생한 이벤트에 대한 정보들을 담고 있는 객체 currentTargete.currentTarget === this;내가 지금 클릭한 대상이 아닌 이벤트가 등록되어있는 객체이다. target내가 지금 클릭한 애를 보여준다. 클릭한 부분에 있는 요소를 잡아낸다. 이벤트 위임for (let i = 0; i for문을 돌리게 되면 용량을 많이 차지해서 속도가 느려지는 문제가 발생한다.-> 이벤트 위임을 통해 이벤트를 한번만 실행하게 한다. 문제점하지만, 이벤트 위임을 이용하면이벤트가 발생하면 이벤트 객체가 .. 2023. 8. 25.

티스토리툴바