Debelloper

Situation 마켓 컬리 사이트 클론 코딩 프로젝트 중에 레이아웃이 깨지는 문제가 발생하였다. 아이디 입력란과 비밀번호 입력란은 동일한 클래스를 주고 같은 스타일을 적용하였는데 비밀번호는 원하는대로 스타일이 나와주었고 아이디 입력란만 먹통이였다. 회원가입 페이지도 마찬가지로 아이디와 이름 입력란만 레이아웃이 깨지는 현상이 발생하였다. Task 로그인 페이지와 회원가입 페이지의 레이아웃 깨짐 현상을 해결하여 원하는 스타일이 나오도록 해야했다. Action 먼저 시도해 본 방법은 캐시 비우기 및 강력 새로고침이였다. 그대로다. 두 번째 시도해 본 방법은 작성한 코드와 로컬 서버 상태를 확인하는 것이였다. 코드를 아무리 보아도 클래스를 잘못 주었다거나, 스타일을 잘못 준 것도 아니였다. 로컬 서버의 문제도..

웹 요소의 속성을 가져오거나 수정하는 getAttribute(), setAttribute(), removeAttribute() 메서드 웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다. 이 때 속성에 접근하려면 getAttribute() 메서드를 사용하고 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용하면 된다. 속성 자체를 삭제하고 싶다면 removeAttribute() 메서드를 사용하면 된다. [예시] 간단한 위 예시 코드를 활용하여 알아보자 getAttribute() 메서드 이 메서드는 괄호 안에 들어가는 속성에 접근하여 속성값을 반환한다. [구문] element.getAttribute(“속성명”) [설명] 먼저 속성..

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티 요소(element)는 객체기 때문에 innerText 프로퍼티나 innerHTML 프로퍼티를 이용하여 웹 요소의 내용도 수정할 수 있다. [예시] hello, world! 위 예시 코드를 활용하여 알아보자 innerText 프로퍼티 innerText 프로퍼티는 요소의 텍스트 콘텐츠를 설정하거나 반환한다. [구문] - get 방식 : element.innerText ㄴ "let text = element.innerText"와 같이변수에 담아 활용해도 무방하다. - set 방식 : element.innerText = "내용" [설명] 예시 코드에서 #test id 값을 가진 p 태그의 텍스트 노드 값을 가져와보자 (get 방식) 다음..

DOM에 접근하기 웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다'고 한다. 이벤트를 거는 등 요소를 제어하기 전에 그 요소를 먼저 지정할 수 있어야 한다. CSS에서 id, class, html 태그(, 등)를 선택자(selector)라고 하는데 이 선택자를 사용해서 DOM에 접근하는 여러가지 방법이 있다. getElementById() id는 문서 내에서 유일하기 때문에 특정 요소를 빠르게 찾을 때 유용하다. 이 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 지정된 값을 가진 요소 객체를 반환한다. 괄호 안에는 id명이 들어간다. [예시] bellori라는 id 값을 가진 요소에 접근하려면 아래와 같다. document.getElementById(“bellori”) getEle..

문서 객체 모델(DOM) 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법을 '문서 객체 모델(Document Object Model)'이라고 한다. 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나, 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하기 위해서이다. 그러기 위해선 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. 자바스크립트는 웹 문서와 그 안에서 사용한 모든 요소를 각각 다른 객체로 인지하여 처리한다. 웹 문서 전체는 document 객체이고 삽입한 이미지는 image 객체이다. DOM 트리 DOM은 웹 문서의 요소들을 부모, 자식, 형제 요소로 나누어 구분한다. 아래의 코드는 기본적인 HT..

설명 window.open() 메서드는 홈페이지 이벤트, 공지사항이나 쇼핑몰 등에서 상품 정보를 크게 보여주는 등 주로 팝업창을 띄울 때 사용한다. [기본형] window.open(경로, 창 이름, 창 옵션) - 경로 열고자 하는 새 창이나 탭에 로드할 문서의 주소를 나타낸다. 문서의 경우 미리 만들어두어서 경로를 써두거나, url을 넣어도 된다. - 창의 이름(선택사항) 열려는 창이나 탭에 고유한 이름을 지정할 수 있다. 이 이름은 후에 같은 이름으로 창을 열 때 사용할 수 있다. 만약 이름을 설정하지 않으면 새로고침을 할 때마다 팝업창이 계속 나온다. - 창의 옵션(선택사항) left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정하는 등 속성을 설정할 수..