자바스크립트 events
addEventListener는 두개의 파라미터가 필요한데, ("type" , 함수명) 이 필요하다. 위 코드에서는 버튼이 클릭되면 alert가 실행된다. handleClick과 handleClick()의 차이를 아시는가? handleClick은 계속 버튼의 클릭을 대기하는 것이고, handleClick()은 웹사이트가 로딩되면 handleClick() 메소드를 실행한다. 그러므로 웹사이트가 로드 되자마자 alert가 발생하게 되었다. 이런식으로 익명함수를 사용할 수 도있다. 익명함수란 이름이 없다는 뜻이다. 그리고 이러한 7개의 버튼을 모두 이벤트를 적용하는 방법은 이런식으로 for문을 사용하면 된다. 없어보이게 7로 고정해서 두지않고 querySelectorAll과 length를 사용하면 좀 더 효율..
상대 경로 , 절대 경로
과제를 할때면 늘 상대경로 , 절대경로 문제때문에 속을 썩였는데. 주먹구구식으로 해결하고 따로 남겨놓지 않으니 맨날 다시 검색하는 비효율적인 일이 발생했다. 이기회를 통해 한번 정리해보려고 한다. 두 경로는 각각 상대경로 (위) , 절대경로 (아래) 이다. 이때까지 상대경로만 하면 오류가 발생했는데 이는 앞에 .. 을 붙여주지 않아서 발생했다. 절대경로와 상대경로는 굳이 찾지 않아도 vsc에서 알아서 찾아준다.
DOM을 사용해 html 수정하는방법
버튼의 배경색을 이런식으로 바꾸는 방법도 있지만, 자바스크립트를 사용해서 변경이 가능하다. background-color 같은 구문은 backgroundColor로 표현한다. 즉, - 로 연결해야 하는 부분을 카멜표기법을 사용해서 C를 대문자로 쓴다. 자바스크립트를 사용해서 button태그에 class를 추가할 수도 있다. 반대로 remove를 사용하면 제거도 가능하다. 그리고 toggle을 사용하면, class가 이미 생성된 경우에는 제거를 class가 없는 경우에는 생성을 한다. textContent와 innerHTML의 차이는 textContent는 h1의 텍스트만 딱 고려하는 것이고. innerHTML을 사용하면 태그또한 추가로 넣을 수 있다. 속성 attribute는 html에서 보라색 글자가 ..
DOM 시작
우선 vsc에서 html 기본 템플릿을 사용하는 방법은 html 5를 사용하면 된다. 그리고 인라인 자바스크립트를 사용하면 좋지않기 때문에 지양하자. 또한 스크립트 태그를 사용할 수도 있다. 결과는 위 인라인과 같다. 권장되는 형식은 당연히 외부파일을 사용하는 것이다. 위 코드를 통해 h1 태그의 html 텍스트를 변경할 수도 있다. 태그의 위치 스크립트 태그의 위치는 어디가 적절할까? head 부분에 있으면 안되는 걸까? 한번 넣어보자. head 부분에서는 body에 있는 h1이 로드 되기전에 실행되므로 h1 태그를 찾을 수 없기때문에 오류가 발생하게된다. 그래서 가장 적합한 위치는 body의 닫는 태그 바로 앞이 적절하다. 모든 태그가 다 실행되고 스크립트가 실행되므로 어떤 태그에 적용해야하는지 프로..
자바스크립트 기초
스니펫 생성 alert , prompt , 변수 선언 prompt 콘솔 지우는 방법 ctrl + k 저장하면 캐시가 없어진다. myName 같은 변수에 저장한 데이터값들이 사라진다. slice 대문자, 소문자로 변경 function 함수형에는 1.파라미터 x 리턴 x 2.파라미터 o 리턴 x 3.파라미터 o 리턴 o 3가지의 형태가 있다. ==, === 차이 출처: https://hermeslog.tistory.com/303 Javascript 비교연산자 eq 세개( === ) 출처 : http://itux.tistory.com/entry/%EC%A0%9C6%EA%B0%95-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%B0%EC%82%B0..
코드 리팩토링 , hierarchical selector vs combined selector
현재 메인 헤더에 h1을 직접 꾸미고 있는 상태이다. 하지만 h1 태그는 다른 곳에서도 사용이 되므로. 이것을 직접 꾸미는 것은 좋지못하다 그래서 big-heading class를 주어서 저 tag만 꾸밀 수 있도록 했다. 그리고 공통으로 보이는 부분은 이렇게 여러번 쓰지말고 하나로 바꿔주자. 이런식으로 말이다. hierarchical selector vs combined selector 이러한 html 구조가 있는데 이제 css를 보고 html이 어떠한 형태를 가질지를 맞춰보는 퀴즈 형태의 문제를 내보겠다.
Media query
media query는 웹사이트를 반응형으로 만들어준다. 범위를 수직선으로 나타내보면 이런식이다. 그렇다면 min일때는 어떨까? https://github.com/ehddud1006/dongpu2/commit/89ce059e1ebc277e036b948604cedad6d29d11bf
mobile friendly test
내가 만든 웹사이트가 모바일에서도 잘 작동하는지 반응형으로 잘 제작이 되었는지 테스트하는 사이트가 있다. https://search.google.com/test/mobile-friendly 모바일 친화성 테스트 - Google Search Console Search Console 정보 Search Console에서는 해킹된 콘텐츠 감지와 같은 중요한 사이트 오류를 알리고 콘텐츠가 검색결과에 표시되는 방식을 관리할 수 있도록 돕습니다. search.google.com
Z-index
z-index을 배우기에 앞서 이런 형태의 div를 생성했다. 이런식으로 red의 div안에 yellow를 포함시키면 어떻게 될까? 이런식으로 겹치게 된다. 이제 position을 absolute로 주면. 모든 div가 겹쳐진다. 순서는 red위에 yellow 위에 blue가 있을 것이다. 이제 노란색 블록과 파란색 블록을 조금씩 움직여준다. 이 stack 순서는 html 코드의 순서를 따른다. blue div가 코드순에서 제일 아래에 위치하므로 블루가 가장위에 있는 것처럼 보이는 것이다. 하지만 우리는 이러한 stack순서를 위해 html 코드의 순서까지 고려하기는 힘들다. 그래서 z-index를 사용한다. z-index를 1로 바꾸어주게되면, red가 가장위에 올라오게 된다. 세가지 div가 모두 z..