본문 바로가기

전체 글

[JavaScript] this 연산자 정복해보자 this 연산자 this가 어느 문맥에 있느냐에 따라 가리키는 값이 다르게 나타난다 전역문맥 전역 실행 맥락에서 this는 전역 객체를 참조한다 // 웹 브라우저에서는 window 객체가 전역 객체 console.log(this === window); // true a = 37; console.log(window.a); // 37 this.b = "MDN"; console.log(window.b) // "MDN" console.log(b) // "MDN" 함수 문맥 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우된다 단순 호출 다음 예제는 this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인 전역 객체를 참조한다 function f1(){ return th.. 더보기
[JavaScript] 자바스크립트 이벤트핸들러 JSON 형변환 🙋‍♀️ : 너는 JSON이 뭔지 알아? 👩‍💻 : 당연하지! 컴퓨터와 웹 서버 간의 데이터를 전달 받을 때 자바스크립트 객체를 JSON형식으로 문자열로 바꾸어주는 걸 말해 JSON ➡️ 문자열 JSON.stringify (data); 문자열 ➡️ JSON JSON.parse (문자열); ⭐ key, value가 모두 (" ")로 묶여야 한다 (반.드.시) 코드의 실행 결과 ⭐ 문자열을 객체로 변경할 때 반드시 지켜야 할 규칙이 있다 JSON.parse("{id: 'aaa123'}"); ⚠️ key와 value값을 ( " " )로 묶지 않는다면 위와 같이 오류가 발생하니 반드시 규칙을 지켜야 한다 //단, 문자열을 객체로 변경할 때 엄격한 규칙 있음 //key와 value를 쌍따옴표로 감.. 더보기
[JavaScript] 자바스크립트를 시작하며.. 자바 스크립트 자바 스크립트는 스크립트 언어의 특성 상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행 결과를 얻을 수 있다 클라이언트에서만 실행되기에 정보를 서버에 보낼 필요 없이 처리할 수 있다 스크립트 언어란? 어플리케이션이 실행되는 동안 라인 단위로 해서(인터프리터)되어 실행되는 언어 HTML 문서 내에서 스크립트 언어는 사이에 작성하며 별도의 컴파일 과정이 없다 자바스크립트를 외부 파일로 사용하는 경우(CSS의 외부스타일 시트방법과 동일) 외부 파일 자바 스크립트의 확장자는 "js"이고 파일을 불러오는 방법은 태그 부분이나 기능을 구현할 곳에 삽입 ( ✅ 링크가 삽입된 순서로 .. 더보기
[CSS] 부트스트랩 사용해서 디자인 커스터마이징 반응형 웹이란 무엇일까? 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 조정되는 것을 의미한다 글로 이해하는 것보다는 직접 해보는 게 더 잘 와닿을 것이므로 바로 실습을 해보려고 한다 다음의 박스 형태가 기본 형태로 디바이스의 크기(조건)에 따라 어떻게 변하는지 확인해보자 기본 형태 @media @media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS블럭을 적용할 수 있다 최대 너비 767px까지 즉, 최대 767px 이하로 너비가 줄어들면 박스의 크기가 50%까지 줄어서 나타나도록 설정하였다 1. max-width: 767px 2. ( max-width: 1299px ) and ( min-width: 768px ) 위의 767px 이하에서보다 넓은 너비(768~1299px.. 더보기
[CSS] 레이아웃의 끝을 보자 패딩 마진 ( ⭐⭐⭐ ) 박스 속성은 웹 페이지의 레이아웃을 구현할 때 가장 중요한 속성이다 margin은 마진의 너비를 지정하는 속성 ✍️ margin은 주로 상자와 상자 간 사이 벌릴 때 사용 ✍️ 겹쳐지는 게 가능하다 ( 크기가 큰 쪽을 따라감 ) padding은 패딩의 너비를 지정하는 속성 content, padding, border, margin을 직접 보면 다음과 같다 ✅ margin 속성과 padding 속성은 width 속성과 height 속성과 별도로 적용된다 margin에 대해 구체적으로 알아보자 margin은 윤곽(border)기준 바깥 여백을 의미한다 개발자 도구(F12)를 확인했을 때 주황색으로 나타나는 게 마진에 해당한다 margin에 값을 주면 어떻게 되는지 확인해볼까? 1️⃣.. 더보기
[CSS] CSS문법을 파헤쳐보자! CSS 적용방법 1. 외부 스타일 시트 2. 내부 스타일 시트 3. 인라인 시트 3가지 모두 사용되었을 때 최후에 적용되는 것은 무엇일까? 인라인 시트 > 내부 스타일 시트 > 외부 스타일 시트 CSS 사용되는 단위 ( 가장 자주 사용되는 4가지 단위 ) % 부모영역 지정된 크기에 대한 (나의) 퍼센트 em 부모영역에 지정된 크기에 대한 (나의) 배수단위 px (나의) 고정크기 vh 보여지는 화면 크기에 대한 비율 파일을 지정할 때 위치를 가리키는 URL단위 현재 폴더의 Desert.jpg background-image: url( 'Desert.jpg' ); 현재 폴더 내부의 Other 폴더의 Desert.jpg background-image: url( 'Other/Desert.jpg' ); 선택자 ( .. 더보기
[CSS] Visual Studio Code 다운로드부터 HTML 태그 Visual Studio Code 다운로드 구글에 visual studio code를 검색해서 클릭하면 다운로드 창이 바로 보인다 (운영체제에 맞게 설치) 다운로드한 후 실행을 하게 되면 위와 같은 창이 뜨게 된다 (본인이 원하는 테마 설정하면 됨!) 원래 있던 course 파일 안에 CSS라는 새 파일을 만든다. 이 공간이 CSS 코드가 저장될 곳이다 그런 다음 개발 환경을 최적화로 하기 위해 세팅을 해준다 (스크롤을 이용해 글씨를 확대하고자 함) 검색창에 "wheel"을 검색하면 위의 사진에서처럼 Mouse Wheel Zoom에 체크하면 Ctrl누르고 마우스를 스크롤하면 글씨 확대를 할 수 있게 된다 settings 창에서 "browser"를 검색해서 브라우저 창을 크롬으로 변경한다 그런데 아무리 검.. 더보기
[JSP] JSP 예외 페이지 생성방법 JSP 예외 페이지 예외 상황이 발생했을 경우 웹 컨테이너 톰캣에서 제공되는 기본적인 예외페이지가 보여진다 개발 과정에서는 이러한 예외 페이지를 보고 어떤 에러가 발생했는지 알 수 있기 때문에 오류를 수정하는 데 도움이 된다 그러나 사용자에게 상용 서비스를 제공하고 있는데 이러한 딱딱한 페이지가 보여진다면 사용자로 하여금 불쾌감을 일으키고 , 해당 사이트에 대한 신뢰도가 하락하게 된다 또한 코드의 일부가 노출되어 보안 측면에도 좋지 않다 그래서 개발자가 따로 만들어 둔 에러 페이지로 유도하여 사용자에게 친숙한 페이지를 보여준다 HTTP 주요 응답 상태 코드 1. 404 : 요청한 URL 을 찾을 수 없는 경우 2. 500 : 서버측 내부 오류로 인해 페이지가 나타나지 않는 경우 java , JSP 페이지.. 더보기

티스토리툴바