[JavaScript] parseInt를 통한 형변환 문자열에서 넘버형으로

2021-04-27 기본 프로그래밍 언어와 같이 자바스크립트에서도 형 변환을 지원하며, 메서드는 parseInt를 사용한다. 해당 메서드의 사용법을 알아보도록 하자. - 기본 형변환 문자열을 parseInt 메서드 안에 넣어준 후 콘솔에 출력해 주면 아래와 같은 결과를 얻을 수 있다. 모두 number형으로 형 변환되어 출력되며, 앞자리에 붙은 0들은 자동으로 제거되어 정수만 남아 출력된다. - 문자 넘버형 변환 위의 코드의 결과는 아래와 같이 출력된다. 문자열 자체를 가지고 parseInt를 사용하면 이는 숫자로 변경할 수 없는 타입이기 때문에 NaN으로 출력되고 '123 hello'처럼 숫자가 포함된 문자열에 paseInt를 사용하면 문자열은 제거되고 숫자만 남아 출력된다. - boolean 넘버형 ..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 27.
• textsms

[XML] jsp에서 welcome 페이지/메인페이지 설정하는 방법 알아보기

2021-04-26 일반적인 welcome 페이지란 사용자가 웹사이트의 처음 접속했을 때 접하게 되는 페이지를 나타내며, url 자체에 파라미터 값 없이 오로지 웹사이트 주소만 나타나는 경우가 대다수이다. 쉽게 생각하면 네이버나 구글의 메인 화면을 생각하면 된다. 이를 XML에서 설정하는 방법을 알아보자. - 코드 "메인페이지로 사용할 파일" 코드는 위와 같다. welcome-file-list 태그 안에 여러가지 welcome페이지를 넣을 수도 있지만 일반적으로는 앞서 말했듯이 파라미터가 붙지 않은 웹사이트 본연의 주소를 welcome페이지로 주로 사용하며, 하나만 넣는 경우가 많다. 때문에 welcome-file에 메인 페이지로 사용할 서블릿 컨트롤러나 jsp 파일은 직접 넣어주면, 웹사이트 최초 접속..

• format_list_bulleted WEB/XML
• · 2021. 4. 26.
• textsms

[XML] jsp/서블릿에서 error-page 설정하는 방법 알아보기

2021-04-25 흔히 보는 404 오류 400번대 오류 500번대 오류 등 각 오류 페이지를 설정하지 않으면, 기존의 홈페이지와는 전혀 무관한 듯한 브라우저 자체의 오류 페이지가 나타나게 되는데, 이는 웹사이트의 신뢰도를 떨어뜨릴 수가 있다. 때문에 오류에 대한 에러 페이지를 설정해 두는 것이 좋다. 아래는 XML 파일 내에서 에러 페이지를 설정하는 방법이다. - 코드 "에러종류 ex) 404" "에러 발생시 포워딩할 jsp 또는 서블릿 파일" 코드는 위와 같이 매우 단순하며, error-page 태그 안에 발생하는 에러코드를 안에 넣고 이후 태그 안에 포워딩할 jsp 또는 서블릿 파일의 주소를 입력해주면 된다. 이러면 매번 jsp 파일내에 에러 페이지를 설정해두지 않아도 되며, 프로젝트 내에 해당 ..

• format_list_bulleted WEB/XML
• · 2021. 4. 25.
• textsms

[CSS] CSS box-shadow에 대하여 알아보도록 하자.

2021-04-24 css에서는 박스형 태그에 색상의 명도와 같은 옵션을 이용해서 그림자와 같은 효과를 줄 수 있다. 그 와 같은 속성이 바로 box-shadow인데 오늘은 이 box-shadow를 사용하는 방법을 알아보자. - 옵션 box-shadow: offset-x offset-y blur-radius spread-radius color 위의 코드가 줄 수 있는 모든 속성 값이다. 보라색으로 굵게 표시된 것이 기본 옵션이다. 우선 offset-x와 offset-y는 그림자의 위치를 설정하는 x축과 y축의 길이로써 쉽게 표현하면 그림자위치 가로 세로의 길이를 설정하는 옵션이라고 이해하면 된다. (두 값을 모두 0으로 두면 해당 속성을 준 박스 태그 요소의 바로 뒤쪽에 위치하게 된다.) color는 설..

• format_list_bulleted WEB/CSS
• · 2021. 4. 24.
• textsms

[CSS] CSS box-sizing에 대하여 알아보도록 하자.

2021-04-21 box-sizing은 css 속성의 너비 및 높이 속성을 정의하는 역할을하게 되며, content-box / border-box 두가지 옵션을 가지고 있다. -예제 ​ 위에는 예제 코드이며 아래는 그 결과물이다. 두 div 차이는 box-sizing 옵션을 서로 상이하게 준 것 외에는 다른 css 속성은 모두 동일하다. 위의 결과를 보았을때 누가봐도 content-box속성을 부여한 빨간색 div가 조금 더 커보이는 것을 확인할 수 있다. 그이유는 무엇일까? 사실 이유는 간단하다. content-box는 정의한 초기 높이와 넓이 속성이 콘텐츠 영역에 해당하고 내부 여백과 테두리는 포함하지 않는다. 다시 말하면 전체 div 영역에 내부여백을 포함하지 않기 때문에 내부여백을 부여할 수록 ..

• format_list_bulleted WEB/CSS
• · 2021. 4. 21.
• textsms

[CSS] CSS 선택자 :hover 에 대하여 알아보기

2021-04-20 :hover 선택자는 유저의 커서(마우스 포인터)가 요소 해당 선택자 위에 올라가 있으면 선택됩니다. - 예제 코드 Hello world ​ 예제 코드는 일반적인 버튼을 만들어 둔뒤 :hover로 추가 정의를 해주었다. 이후 결과를 확인하면 해당 버튼에 마우스 커서가 없을시에는 일반적인 버튼이었다가 마우스커서를 해당 버튼에 위치시키면 css로 부여해준 배경색 속성이 부여되게 된다. 메인 이미지 출처: Photo by Jakob Owens on Unsplash

• format_list_bulleted WEB/CSS
• · 2021. 4. 20.
• textsms