HTML Java Script를 이용하여 클릭시 팝업창 가운데 띄우고 주변 어둡게 만드는 기능을 해보겠다. - 아래의 버튼을 누르면 -이와같이 팝업창이 가운데 뜨면서 주변을 어둡게 만든다. - 아래의 코드가 실행 코드이다. 버튼을 누르게 되면 Jquery함수가 실행되고 pop과 article이 속성에 맞게 실행된다. 팝업 팝업 실행시키기
전체 글
창업, 사업, 자기개발, 운동, Web, App, Java, python, 이슈, 개발자, JavaScript, amazon, cloud server, 취업, 스펙, Android Studio, Spring, React, Node.js, 구독하면 댓글 남겨주세요.
HTML SCRIPT
div 태그를 사용하다보면 다양한 속성을 넣어줘야 할때가 있다. - border : 태두리 - overflow : 정해진 크기가 넘어갈 시 스크롤 생성
UI를 구현하다보면 List를 정해진 div 크기안에서 테이블로 뿌려줘야할때가 있다. 이때에 상단 thead를 고정시키는 방법을 알려주겠다. table 태그안에는 div태그를 넣을 수 없기 때문에 thead와 tbody를 위한 table을 각각 만들어주고 상단 고정을 위해 thead가 들어있는 table은 div를 만들어 주어 style을 적용시킨다. 1. 기존코드 - 하나의 div 안에 하나의 table이 존재한다. 번호, 제목, 작성자, 작성일을 보여주는 공지사항 게시판입니다. 번호 일자 제목 1 2021.12.28 상단 고정 메뉴 2. 수정코드 - 하나의 div안에 상단 고정을 위한 div(thead가 들어감)를 만들어주고 table도 각자 생성해 주었다. 번호, 제목, 작성자, 작성일을 보여주는 ..
textarea를 이용해 입력을 받을때 줄바꿈을 하는 방법을 포스팅 하겠다. HTML javaScript // textarea 줄바꿈 제한 $('#contents').keydown(function(){ var rows = $('#contents').val().split('\n').length; console.log($('#contents').val()) console.log(rows) var maxRows = 2; if( rows > maxRows){ alert('2줄 까지만 가능합니다'); modifiedText = $('#contents').val().split("\n").slice(0, maxRows); $('#contents').val(modifiedText.join("\n")); } });
프로젝트를 진행하던 와중 전체 선택자를 이용해 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; ..
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..