데브마우스

자바스크립트 상대위치 요소 선택 자바스크립트를 활용하면 CSS의 선택자로 할 수 없는, 부모 선택자로 거슬러 올라가거나 형제 선택자중 더 상위의 형제 선택자를 선택할 수 있습니다. 상대위치 요소 선택 정리 상대위치 요소선택 설명 및 특징 paraentNode 선택된 요소의 부모 노드를 선택합니다. childNodes 선택된 요소의 자식 노드들(요소 노드, 텍스트 노드)을 선택합니다. children 선택된 요소의 자식 노드들을 선택합니다. nextSibling 선택된 요소의 다음 형제 노드를 선택합니다. previousSibling 선택된 요소의 이전 형제 노드를 선택합니다. firsChild 선택된 요소의 자식 노드 중 첫 번째 노드를 선택합니다. lastChild 선택된 요소의 자식 노드 중 마지막 ..

자바스크립트에는 CSS 선택자로 요소를 선택할 수 있는 querySelector와 querySelectorAll이 있습니다. 이 둘을 제일 간단하게 설명하자면 하나만 고르는 것(querySelector())과 모두 다 고르는것(querySelectorAll())이라고 할 수 있습니다. 디테일 하게 들어가면 다릅니다. querySelector() vs querySelectorAll() querySelector() vs querySelectorAll() 특성 querySelector() querySelectorAll() 반환값 단일 요소 NodeList 반환 타입 DOM 요소 NodeList (배열과 유사하지만 배열은 아님) 일치하는 요소의 반환 방법 첫 번째 일치하는 요소만 반환 모든 일치하는 요소를 No..

프로그래밍을 공부할 때 책을 참고하든, 인터넷 게시글 이든 다른 자료를 참고하며 공부할 때가 있습니다. 이때 제일 중요한 건 자기가 무슨 코드를 입력하는지 알고 있어야합니다. 자기가 무슨 코드인지도 모른체 단순히 책이나 선생님께서 코드를 입력하고 있다고 따라쳐서는 안됩니다. 왜냐하면 드물게 책의 코드가 잘못되어 있을수도 있습니다. (선생님께서 가르치고 있으신 부분과) 다른 파일이나 다른 함수 등 다른 부분에 코드를 입력하고 있을 수 도 있습니다. 그럼 해결 방법은 뭘까요? 코드를 타자 치면서 주의해야 할 점입니다. 지금 작성중인 코드가 어떤 기능을 하는지, 작성중인 프로그래밍 코드를 조각 조각 쪼개어서 생각하셔야 합니다. 이 변수는 정말 필요한 코드인지 생각하셔야 합니다. 이 변수에는 어떤 데이터가 담기..

include 액션 태그와 include 디렉티브 태그 얼핏보면 include 액션 태그와 디렉티브 태그 모두 다른 페이지를 포함하여 .jsp 페이지를 제공한다는 점에서는 비슷해보이지만 내부 작동 원리가 다릅니다. include 디렉티브 태그는 다른 페이지의 내용이 텍스트로 포함되지만, inclde 액션 태그는 다른 페이지의 처리 결과 내용을 포함합니다. include 액션 태그 include 디렉티브 태그 코드 양식 자원 처리 특징 요청 시 자원을 포함합니다. 번역 시 자원을 포함합니다. 기능 별도의 파일로 요청 처리 흐름을 이동합니다. 현재 페이지에 삽입합니다. 데이터 전달 방법 및 특징 request 기본 내장 객체나 param 액션 태그를 이용하여 파라미터를 전달합니다. 페이지 내의 변수를 선언한..

include 액션 태그가 뭔가요? include 액션 태그는 include 디렉티브와 비슷하게 현재 JSP 페이지의 특정 영역에 외부 파일의 내용을 포함하는 태그입니다. flush 값은 true와 false 중 어떤게 좋나요? flush값의 기본값은 false이며 false를 권장합니다. true로 설정 해야하는 경우는 아래와 같습니다. 즉시 결과를 전송해야 하는 경우: 어떤 이벤트나 상태에 따라 즉시 클라이언트에게 결과를 보내야 할 때. 부분적인 결과를 표시하는 경우: 버퍼를 플러시하지 않으면 페이지 전체가 완료될 때까지 아무것도 표시되지 않을 수 있습니다. include 액션 태그의 처리 과정 one.jsp입니다. one.jsp입니다. two.jsp입니다. 웹 브라우저가 웹 서버로 one.jsp를 ..

CSS의 단위 현실 세계에서는 cm, m, inch 등 다양한 단위가 있습니다. 그리고 단위에는 이것을 기준으로 1cm라고 한다는 등 기준이 있습니다. 그렇다면 CSS에서는 어떤 단위가 있으며 어떻게 기준을 잡을까요? CSS에는 총 4가지 기준이 있습니다. px(픽셀) % em,rem vw,vh px(Pixel, 픽셀) 픽셀은 고정된 사이즈를 의미합니다. 반응형이 아니며 사용자가 웹 브라우저의 크기를 줄이거나 늘려도 크기를 그대로 유지합니다. This is parent div This is child div /* style.css */ .parent { height: 200px; width: 300px; border: 1px solid red; } .child{ height: 400px; width: 6..

JavaScript Number 객체와 메서드 JavaScript에서 Number 객체를 생성할 수 있습니다. 아래 2가지 방법으로 생성할 수 있습니다. var num = new Number(1); var num = 1; Number 객체의 메서드는 다음과 같습니다. Number 객체의 메서드 메서드 이름 설명 예제 코드 toFixed() toFixed(n)일 때, n값만큼 소수점 자리수를 만듭니다. var num = 111.129; num.toFixed(2); //출력: 111.13 toString() toString(n)일 때, n값의 진수로 만듭니다. var num = 100; num.toString(16); //출력: 64

forward 액션 태그는 무엇인가요? forward 액션 태그는 액션 태그 중 하나로써 현재 JSP 페이지에서 다른 페이지로 이동하는 흐름을 제어합니다. 특징으로는 forward 액션 태그를 만나게 되면 그 전까지 출력 버퍼에 저장되어 있던 내용을 모두 삭제하고 forward 액션 태그에 설정된 페이지로 이동하게 됩니다. forward 액션 태그 설명 예제 코드 1 싱글 태그로 작성한 forward 액션 태그 입니다. 예전에는 싱글 태그로 작성할 수 없었습니다. 예제 코드 2 페어 태그(Pair taag)로 작성된 forward 액션 태그입니다. forward 액션 태그의 처리 흐름 과정 웹 브라우저에서 one.jsp 파일을 요청합니다. JSP 컨테이너는 요청된 one.jsp 파일을 실행합니다. one..

상속이란 무엇인가요? 일상생활 속에서 상속이란 자식이 부모의 재산을 물려받는걸 뜻합니다. CSS에서는 부모 스타일이 자식 까지 영향을 미치는 것을 상속이라고 정의합니다. 상속되지 않는 속성도 inherit이라는 속성 값을 사용하여 강제로 부모로부터 자식에게 상속시킬 수 있습니다. 단, 자식을 제외한 후손(손자)에게는 적용이 되지 않으며, 모든 속성이 강제 상속되지는 않습니다. 상속의 주의점 .redbox {color:red}는 모든 후손에게 상속 시킬 수 있습니다. 하지만 display:flex는 자기 자신과 자식을 꾸미는 요소이기에 상속시킬 수 없는 속성입니다. 즉 모든 후손에게 까지 적용이 되어야 상속이라 할 수 있습니다.

JSP의 액션 태그란 무엇인가요? JSP의 액션 태그는 서버나 클라이언트에게 어떤 행동을 하도록 (action을 하도록 하는) 태그입니다. 그럼 어떤 행동이 있을까요? JSP 페이지와 다른 JSP 페이지 사이를 제어하거나, 페이지의 실행 결과 내용을 현재 페이지에 포함시키거나, 자바 빈즈(JavaBeans, 객체 생성)등의 다양한 기능을 제공합니다. 액션 태그는 스크립트 태그()와 다르게 같은 XML 형식을 사용하며 액션 태그는 끝날 때 반드시 슬래시 />를 작성해줘야합니다. 주요 액션 태그 정리 액션 태그 코드 작성 방법 설명 forward 다른 페이지로 이동을 하는 페이지 흐름을 제어합니다. include 외부 페이지의 내용을 포함하거나 페이지를 모듈화합니다. 주로 헤더나 푸터를 모듈화하여 한 번의 ..