프로그래밍/Web

    javascript, jquery 자신을 제외한 / 이외의 다른 개체의 이벤트 발생

    javascript, jquery 자신을 제외한 / 이외의 다른 개체의 이벤트 발생

    부트스트랩 4으로 이러한 ul을 만들 수 있다. 코드는 아래와 같다. Basic Advanced Superior 클래스에 itemli 를 주었다. disabled 가 a 태그의 글씨를 회색으로 만들어버리는 태그이다. var itemli = $('.itemli'); itemli.click(function () { $(this).find('a').removeClass('disabled'); itemli.not($(this)).find('a').addClass('disabled'); }); itemli를 변수로 잡은 뒤 클릭 메소드 -> a tag 찾기 -> disabled 지우기 자신을 제외한 itemli 찾기 - > a tag 찾기 -> disabled 추가해주기 basic을 클릭하면 basic이 파란불이..

    네비게이션 바 fixed-top 설정 시 겹치는 문제

    네비게이션 바 fixed-top 설정 시 겹치는 문제

    네비게이션 바의 fixed-top 설정을 할 때 최상위에 설정된 nav bar가 화면을 먹는다. 원래 이래야 하는 것이 이렇게 먹어버리는 것이다. 해답은 https://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site 이쪽에서 알려주고 있다. 요약: 만약 당신이 padding 속성을 추가하지 않는다면, fixed navbar는 당신의 다른 컨텐츠를 잡아 먹을 것입니다. 나는 부트스트랩을 사용하는데 다른 페이지들의 body에 padding 속성을 추가해도 해결됐지만 이렇게 nav bar를 사용하는 헤더파일의 body에 패딩을 주니, 다른 모든 페이지에 padding을 줄 필요 없이 다 해결됐다.

    부트스트랩 네비게이션 fixed-top 설정 시 모달 먹통 문제

    부트스트랩 네비게이션 fixed-top 설정 시 모달 먹통 문제

    부트스트랩을 사용하면서 자주 보게되는 것이 이런 top-navigation bar 다. 이걸 스크롤 여부에 관계없이 항상 위에 놓고싶으면, class 에 fixed-top 옵션을 주면 된다. 하지만 만약 navigation bar 안에 modal을 작동시키는 버튼이 있다면 모달은 먹통이 되어버리고 만다. 문제의 해결은 Stackoverflow에서 찾을 수 있다. https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background If the modal container has a fixed or relative position or is within an element with fixed or relative pos..

    jquery textarea 변수 값 가져오기

    1. 선택자일 때$('#textarea').val() 크롬이나 익플에서는 html()도 되지만, 파폭에서는 안될 수도 있다. 때문에 val을 사용해주는 것이 바람직하다. 2. 변수 처리 했을 때 var textarea = document.getElementById('#textarea');console.log(textarea.value);다른 기능들과 유사하게 직접 선택할 때에는 val이지만 변수를 통해 값을 가져올 때는 value를 사용한다.

    JSTL c tag 에서 eq, ne null check 하기

    이런 식으로 사용하는 c tag는 많이 보셨을 겁니다, jstl에도 if가 있지만, when 이 if의 기능을 포함하기 때문에 저는 when 태그를 주로 사용합니다. 여기서 사용할 수있는 연산자는 그 생김새가 좀 다릅니다. equal로 추측..eq 연산자는 ' = ' 의 역할을 합니다. 문자열 등을 비교할 때 사용하죠. negative equal로 추측..ne는 ' != ' 를 의미합니다. null 체크는 empty로 하시면 됩니다. 이 의미는 name 변수의 값이 비었냐(empty)는 의미입니다. null일 경우 true, null이 아닐 경우 true를 리턴합니다. not null의 경우는 not을 추가해주면 됩니다.

    Bootstrap에서 tr td th 가로 사이즈 조정하기

    Bootstrap에서 tr td th 가로 사이즈 조정하기

    https://stackoverflow.com/questions/15115052/bootstrap-how-to-set-up-fixed-width-for-td StackOverflow에 100점짜리 답변이 있다.

    CSS 파일이 변경 후 적용이 안될 때

    CSS 파일이 변경 후 적용이 안될 때

    CSS 파일이 변경 후 적용이 안될 때 시간을 많이 잡아먹어서, 문제 해결 후 기록합니다. .col .col .col 현재 저는 그리드를 만들려 합니다. 이 그리드에 스타일을 주기 위해 링크를 한 CSS 파일을 선택자로 수정해 주었습니다. 일단 선택이 잘 되는지 확인해보기 위해 테두리도 넣어보고 색도 아무거나 넣어봤습니다. .row { border: solid #2B81AF thick; background-color: #710909; } 그런데 결과는? 변화가 없습니다. 설정이 잘못됐을까요? 그리드에 직접 스타일을 넣어봅시다. .col .col .col 넣고 확인해보면 잘 됩니다. 선택자 문제라 생각해서 이것저것 해보고, 안되서 검색해보니 CSS 파일 링크문제더군요. 이전에 사용한 CSS를 브라우저가 캐..

    JSP Filter

    JSP에서 필터라는 개념을 생각해보자 필터는 당연 무엇인가를 거르는 속성이 있어야 한다. 간단한 예제코드를 보자 public class TestFilter implements Filter { public TestFilter() { } public void destroy() { } public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { System.out.println(">>> TestFilter::doFilter() 실행 전"); // pass the request along the filter chain chain.doFilter..

    Ajax - Asynchronous JavaScript And XML (2/2)

    Ajax - Asynchronous JavaScript And XML (2/2)

    가장 많이 사용하는 jQuery의 $.ajax 방식에 대해 알아보도록 하자 일단 코드를 짜봤다. jQuery Ajax $.ajax() 함수 ajax get ajax post 결과 출력 get방식이던, post 방식이던 디렉토리에 포함된 txt 파일 or jsp를 서버로 보내 그 결과값을 받는 형식의 코드다 이미지는 어떤 것이든 상관없고 txt파일의 내용은 이러하다 jQuery Ajax load() 함수 테스트 여기는 단락(p1)입니다... post에서 보내는 jsp 파일의 형식은 이렇게 된다. ID: ${param.id} PW: ${param.pw} 이 코드를 실행하면 이런 페이지가 뜬다. get방식을 하면 간단하다. 텍스트 정보와, 텍스트 정보에 포함된 이미지를 불러오는 코드로 인해디렉토리에 저장된 이..

    Ajax - Asynchronous JavaScript And XML (1/2)

    Ajax - Asynchronous JavaScript And XML (1/2)

    Ajax는 비동기 웹통신 방식이다. 안드로이드를 배웠다면, 안드로이드의 어싱크탱크와 유사하다고 보면 된다. 사용자가 웹에서 작업을 할 때 보통 반응이 오면 웹페이지의 형식이 바뀐다. Ajax는 이를 웹페이지 변화 없이 가능하게 한다. 예를 들어보자 이는 네이버의 회원가입 페이지이다. 아이디를 불가능하게끔 입력해보자 그러면 이런 메시지가 뜬다. 이러한 메시지는 즉시 발생하는 것이며, 웹페이지의 변화없이 발생한다. Ajax가 적용된 웹페이지 인 것이다. 회원가입하는 사용자 입장에서 틀릴 때마다 틀린 정보를 알려주면서웹을 갱신해버리면 이전에 알맞게 쓴 항목까지도 새로 써야하니 짜증이 이만저만이 아닐 것이다. Ajax는 이러한 고민을 해결해주는 훌륭한 도구이다. Ajax의 적용원리는 아래와 같다. /* Ajax..