[JavaScript] 자바스크립트 alert() 줄바꿈 br / Enter 키 적용법

2021-06-28 일부 기능 구현중 인터셉터 및 아니면 단순 alert를 사용해야 하는 경우가 있다. 단순 텍스트가 짧을 경우에는 상관없지만, 텍스트가 20자 이상 될 경우 상당히 alert 창이 지저분 해보일 수 가 있는데, 이럴 경우 줄 바꿈을 해주면, 사용자 입장에서 조금 더 깔끔하다고 느낄 수 있다. 방법은 아래와 같다. alert("텍스트\\n줄바꿈후텍스트") 역슬래시 두번에 영문자 n을 사용하면 깔끔하게 줄바꿈 처리가 된다. jsp 에서 구현할 때는 단순 스크립트 태그 안에 아래와 같이 구현하면 되며, alert('로그인이 필요한 페이지 입니다. \\n로그인 화면으로 이동합니다!'); 자바 class 내부에서 사용할 때는 아래와 같이 구현하면 된다. PrintWriter out =respon..

• format_list_bulleted WEB/JavaScript
• · 2021. 6. 28.
• textsms

[JavaScript] 자바스크립트 option selected 값 가져오기

2021-06-20 웹 애플리케이션 내부에서 카테고리를 부여하는 경우 select 태그를 사용하는 경우가 있는데, 이러한 경우 어떻게 자바스크립트에서 해당 select 태그 중 선택된 option의 값을 체크하고 가져오는지를 알아보자. - 예제 아래는 게시판의 카테고리를 설정하는 html select태그이다. 해당 카테고리를 사용자가 변경할 때마다 changeSelect() 함수를 호출하게 되는데, 이 함수에 따라 각 게시판의 링크로 이동하게 된다. 카테고리 자유게시판 치료게시판 리뷰게시판 아래는 자바스크립트 changeSelect() 함수 코드이다. 함수를 보면 우선적으로 document.getElementById 를 통해 전체 select id를 추출해 변수로 선언해 준다. 이후 if 조건 문을 통해..

• format_list_bulleted WEB/JavaScript
• · 2021. 6. 20.
• textsms

[Spring] 업로드 파일 삭제 / 게시판 파일 삭제 쉽게 하는 방법

2021-06-19 - 사전 준비 ● pom.xml 추가 코드 commons-io commons-io 2.5 스프링을 사용함에 있어 파일 업로드 라이브러리를 사전에 준비해 두어야 한다. 사용 라이브러리는 commons-io를 사용했으며, 해당 라이브러리 기준으로 설명한다. ● servlet-context.xml 추가 코드 빈으로 CommonsMultipartResolver도 기본적으로 등록되어 있다는 전제가 필요하다. ( 위의 두 코드는 해당 파일에 붙여 넣기 하면 된다.) - 로직 처리 아마 게시판이 삭제되면서 이미지를 제거해야 하거나 사용자 프로필 사진 삭제에 따른 디렉터리 내에서 해당 파일을 지워야 될 경우 이러한 고민을 하게 된다. 방법은 간단하다. 코드를 살펴보자. //파일 경로 지정 Strin..

• format_list_bulleted WEB/Spring
• · 2021. 6. 19.
• textsms

[CSS] CSS 배경색 지우는 방법 / 배경 투명하게 하는 방법

2021-05-10 - 코드 기존에 적용한 배경색을 지우는 코드는 아래와 같다. background-color: transparent; 지운다는 의미보다는 투명하게 바꾼다는 의미가 좀 더 맞으며, transparent 자체가 사전적인 뜻으로 투명이라는 의미를 가지고 있다. 메인 이미지 출처: Photo by Emma Harrisova on Unsplash

• format_list_bulleted WEB/CSS
• · 2021. 5. 10.
• textsms

[CSS] CSS display:flex 통한 화면 구성 알아보기 (기초).

2021-05-09 - 예제 예제는 하나의 컨테이너 div 안에 3개의 div가 들어 있는 구조로 만들었다. 이 예제를 통해 display:flex의 적용 효과를 알아보도록 하자. 코드를 웹상에 나타내면 아래와 같이 나타난다. - display:flex 적용 다른 코드를 건드리지 않고 컨테이너 div에만 display:flex 속성을 부여해보겠다. 그러면 아래와 같이 내부에 있는 div 속성이 컨테이너를 기준으로 가로로 정렬된 것을 확인할 수 있다. 이와 같은 결과는 웹 관리자 도구로 보면 좀 더 쉽게 이해가 되는데, 아래의 이미지를 보자. flex 옵션을 준 결과 내부의 div 요소들은 컨테이너 div를 기준으로 inline 요소와 같이 변경되었다. 내부의 div 요소중 가장 높이가 긴 div기준(여기..

• format_list_bulleted WEB/CSS
• · 2021. 5. 9.
• textsms

[JavaScript] js 타이머 함수 setTimeout() 알아보기

2021-05-06 자바스크립트 내에서는 타이머를 지정할 수 있는 setTimeout() 함수가 존재하는데, 해당 함수의 사용법을 알아보자. - 매개값 setTimeout 은 매개 값을 두 가지를 받는다. 첫 번째 매개 값은 주어진 시간이 지났을때 수행될 코드이며, 두번째 매개값은 주어질 시간이다. 여기서의 주어질 시간은 밀리 초로 계산되기 때문에 1000 당 1초로 계산된다. - 예제 코드 아래의 예제 코드는 5000(5초) 밀리 초가 지나면 브라우저 콘솔 창에 Hello World를 출력하게 하는 코드이다. var timeSet = setTimeout(function() { console.log("Hello World")} , 5000) - 타이머 초기화 함수 불가피한 경우에 타이머를 초기화해야 하는..

• format_list_bulleted WEB/JavaScript
• · 2021. 5. 6.
• textsms