본문 바로가기
알고리즘 바로가기
보안 포스트 바로가기
JAVA 바로가기
리눅스 서버 바로가기

웹 구축/HTML&CSS&JS

 (11)
【 JS 초급 】 함수 선언식과 표현식 함수선언식 ( Function Declaration ) 은 가장 대표되는 JS의 함수 선언 방식이다. function a() { return "hello world"; } console.log(a()); 일반적인 함수 선언식은 다음과 같은 구조를 가진다. 여기에 선언된 함수에 부합하는 호출을 두 번째 줄처럼 하여 사용하면 된다. 함수표현식( Function Expression ) 은 JS의 특징을 서술할 수 있는 방법이다. var a = function() { retrun "hello world";} consolg.log(a); 여기서 우리는 한 가지 특성을 발견할 수 있는데, 함수를 변수에 담아서 사용할 수 있다. 즉, 다시 말해 함수 역시 변수처럼 다룰 수 있다. 즉 다음과 같이 function a(..
【 JS 초급 】호이스팅 ( Hoisting ) 어떤 변수,함수가 초기화 및 선언될 때 변수, 함수등의 선언부를 스코프 최상단으로 끌어올리게 된다. function a(b){ return b; } console.log(a(b)); var b="hello"; 이런 간단한 함수가 작성되었다 하였을 때 b는 함수 뒤에 선언이 되었기 때문에 실행 오류를 내뱉는다고 생각될 수도 있지만 호이스팅이란 개념은 변수가 선언을 먼저 하도록 돕는다. 이는 함수나 변수가 3단계에 걸쳐 할당되기 때문이다. 1. 선언 2. 초기화 3. 할당 위 코드의 예제에서 var b="hello"; 는 실행했을 때 선언과 초기화 할당이 모두 동시에 일어난다고 보면 되고 호이스팅은 선언부를 스코프의 최상단에 올리게 된다. 즉 console.log(a(b)); 가 작동했을 때, 아직 변수는 ..
【 JS 초급 】Jquery 선택자 및 메소드 1 Jquery에서 HTML 태그 영역을 제어하거나 인자를 받기 위해 선택자를 사용할 수 있다. $("선택자명") 으로 작동되며 Jquery 이하의 메서드들을 사용하여 문서를 제어할 수 있다. 선택자의 취급방법은 CSS와 같은데 id 선택자 : #id명 class 선택자 : .클래스명 태그 선택자 : 태그명 예를들어, 자바스크립트에서는 document.getElementById("pass") 혹은 document.getElementClass("pass") 로 선택하였지만, Jquery에서는 $('#pass') 혹은 $('.pass') 와 같이 간단하게 정의 할 수 있다. 아래는 Jquery에서 사용되는 메서드들이다. $().메서드명() lenght : 개수를 구한다. get(i) : dom 객체에 접근한다...
패턴 URL패턴 디렉토리 패턴, 디렉토리 형태로 서버의 해당 컴포넌트를 실행하는 구조 http://localhost:8081/MessageSystem/join ex: ) /join 확장자 패턴, 확장자의 형태로 서버의 해당 컴포넌트를 찾아서 실행하는 구조 ex: ) *.do, hello.do FrontController join.jsp - 컨트롤러 login.jsp - 컨트롤러 update.jsp - 컨트롤러 delete.jsp - 컨트롤러 -> 중복되는 코드가 많음. (인코딩이나 세션 객체 선언) -> 파일이 여러개기 때문에 개발이 복잡함 -> Servlet이 무겁고 같은 기능의 반복으로 효율성 저하
【 JS 초급 】AJAX(Asynchronous JavaScript and XML) 기존 폼태그는 클라이언트 - 서버의 Request관계를 가진다. // 이는 서버로부터 응답받는 페이지는 중복되는 코드가 발생한다. 따라서 네트워크 부하가 커지게 된다. 예를들어, 내가 메인화면에 이메일 데이터를 바꾸고 싶다면 해당 html 문서의 모든 데이터를 갱신하여 주어야 한다. ajax를 활용하면 사용자 입장에서는 화면(html 문서)에 대한 갱신이 없고 요청과 응답 사이에도 다른 일을 할 수 있어 빠른듯한 환경을 느낄 수 있다. 기존 클라이언트-서버 관계에서의 서블릿을 사용한 동기식 통신 클라이언트가 id를 request 보내면 새로고침의 순간에 페이지를 잠시동안 참조 할 수 없다.(페이지 전환) AJAX의 비동기식 통신에서는 페이지 전환이 일어나지 않으며 사용자의 화면이 바뀌지 않으면서 요청 응..
CSS 4 float 요소를 띄워서 배치하는 속성 left : 왼쪽에 요소를 띄움 right: 오른쪽에 요소를 띄움 none : 띄우지 않음(기본값) 다른이들에게 내꿈을 물어봤어 모두 한결같이 기적은 없다고 내게 맗했어 인생은 그런거야 쉬운일 하나없는 세상 워워 시작은 힘들어도 결국은 승리하지 소설 같은 세상 나는 재수가 좋아 정말 재수가 좋아 멋진 사람들 모두 여기 내 곁에 있어 넓은 하늘을 나는 기분이야 세상 모두다 가진 기분이야 나를 막을순 없어 슛 볼은 나의 친구 볼만있으면 난 외롭지 않네 슛 볼은 나의 친구 승리의 볼을 향해 꿈을 날리자 패스 패스 패스 내 꿈은 축구왕 세상에서 제일가는 스트라이커 패스 패스 패스 그 이름은 슛돌이 우리의 친구 슛돌이 다른이들에게 내꿈을 물어봤어 모두 한결같이 기적은 없다고..
CSS 3 【 Position 】 자유자재로 요소의 위치를 배치하는 속성 static 태그가 위에서 아래로 순서대로 배치 (기본값) relative 초기 위치 상태에서 상하좌우로 위치 이동 absolute 절대 위치 좌표를 설정 fixed 화면을 기준으로 절대 위치 좌표 설정 span1 span2 span3 span4 span5 각각의 생성된 span 태그에 대해 각각의 div를 통해 위치를 조정하고 기본 span 태그에 대해 position 을 relative; 를 적용하였다. 보면 설정과는 반대로 Span2 가 아래로 가고, span3 가 위로 간 것을 확인할 수 있는데 position 을 relative; 로 적용할 경우에 span2 하나에 대해 각각의 변 ( 좌측 변 ~ 아래측 변) 이 움직이게 된다. to..
CSS 2 크기 단위 px : 화소 하나의 크기에 대응되는 단위(고정값) em: 부모요소 크기에 따른 배수 단위 rem: html 태크의 폰트 크기에 따라 결정 .div1{ font-size: 20px;} .div2{ font-size: 20px; font-size: 2em;} 동일 속성을 지정할 경우, 나중에 선언한 것으로 적용된다. em은 부모 사이즈의 배율로 적용된다. 안녕?? 안녕하세요 안녕하세요 div3 는 div1의 2배인 div2의 2배, 즉 4배 크기가 적용된다. 【 반응 선택자 】 사용자의 반응으로 생성되는 특정한 상태를 선택 :active: 마우스로 클릭한 때를 선택 :hover 마우스 올린 때를 선택 회원가입 ID : PW : 상속관계를 나타냄 fieldset:hover 되었을때의 .legend..

티스토리툴바