프로젝트를 진행하던 와중 전체 선택자를 이용해 style을 지정한 css가 있었다. 이 프로젝트에서는 에디터를 사용하기 때문에 특정 div만 예외처리를 하기 위해 다양한 방법을 하던 중 예외처리 css를 알게되어 정리해보려한다. common.css .editor-view { line-height: 1.5; } body, body *[style]:not(.editor-view):not(.editor-view *) { font-family: 'NotoSansCJKkr','Nanum Gothic',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; font-size: 14px; color: #333; font-weight: 400; ..
WEB
View Resolver란? 사용자가 요청에 대한 view를 랜더링 하는 역할을 말한다. 즉 URL로 부터 사용될 VIEW 객체를 맵핑하는 역할 @RequestMapping(value={"/", ""}, method={RequestMethod.POST, RequestMethod.GET}) public String list(HttpServletRequest request){ return "board/list" } ModelAndView 랜더링 할 VIEW의 이름과 VIEW에서 사용할 model을 설정한다. - setViewName(name); 랜더링 할 VIEW 이름 - addObject(key, value); VIEW에 전달 할 KEY, VALUE - addAllObject(Map)' VIEW에 전달 할..
개발을 하다보면 동일한 이름을 가진 클래스에 동작을 부여해야 할 경우가 많이 있다. 이럴 경우 아래의 두가지 코드를 사용하면 가장 상위의 클래스만 반영이 된다. document.querySelector('.className') $('.className) 따라서 동일한 이름을 가진 클래스를 이용할때에는 이 코드를 이용한다. document.querySelectorAll('.className') 사용방법 var className = document.querySelectorAll('.className'); //IE에서도 동작하기 위해 Array를 호출 해 사용했다. Array.prototype.forEach.call(className, function(k, v){ console.log(k) //k는 docum..
JSP를 이용해 게시판에 댓글기능을 추가하면서 줄바꿈이 되지 않는 문제가 발생했다. 처음에 pre를 사용해서 해결했지만 가로길이가 적용되지 않는 문제가 발생했다. 서버단에서 \n을 로 변경하는 것도 해보았지안 xss 문제를 해결하기에 어려움이 있어 방법을 찾던 도중 pre-wrap에 대해 알게되었다. 이 방법을 이용하면 를 이용해 xss를 해결할 수 있다. 총 4가지의 방법이 있고 4번째 방법이 가장 좋다. 입력 (textbox) 출력 1 - (div) 장점 : css적용, 자동 줄바꿈이 된다. 단점 : 공백이 하나만 적용되고 엔터키의 호환이 안된다 출력 2 - (pre) 장점 : 공백, 엔터키 적용이 된다. 단점 : css적용 안됨, 자동 줄바꿈이 안된다. 출력 3 - (pre-wrap) 장점 : 공백..
이번 포스팅은 별도의 코딩 없이 SNS를 공유하는 기능을 구현해 보겠다 1. 원하는 링크 공유 형태 만들기 2. HTML 적용 1. 원하는 링크 공유 형태 만들기 - AddThis에 접속한다. www.addthis.com Get more likes, shares and follows with smart website tools - AddThis AddThis share buttons, targeting tools and content recommendations help you get more likes, shares and followers and keep them coming back. www.addthis.com - Get started, it's free 클릭 - 가입 후 Share Buttons..
코딩 없이 댓글, 대댓글, 트위터 공유 기능을 만들어 보겠다. 1. Disqus접속 - 아래의 링크를눌러 Disqus에 접속한다. disqus.com https://disqus.com/ disqus.com - GET START클릭 - 로그인 후 아래의 버튼 클릭 103 - 원하는 이름으로 설정 이것은 URL로 쓰이기 때문에 고유한 값을 설정해 주어야 한다. - Category는 Entertainment 설정 102 - 무료 버전인 Basic 선택 104 -직접 만든 웹 페이지에 사용할 것이기 때문에 Install manually 선택 -1번에 있는 코드를 복사해 html 코드(원하는 위치)에 붙여 넣기 - 완성 !!
프로젝트를 진행하던 와중에 IE에 대해서 호환가능하게 하라는 지침이 있어 기존 코드를 수정하였다. 기존코드 - IE에서 label이 작동하지 않아 button과 input type = "file"이 연결되지 않아 동작을 안한다. 파일선택 수정코드 HTML 파일선택 JavaScript - jqeury도 추가해 주어야 한다. 끝
정렬을원하는배열.sort((a, b) => parseFloat(a.정렬을원하는오브젝트) - parseFloat(b.정렬을원하는오브젝트)); 이러면 내림차순으로 정렬이 된다.
