반응형 SMALL HTML TIPS 2023. 9. 13. [jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after #jQuery #append #prepend #before #after #jQuery기초 #jQuery처음 #css #택스트 바로 설명 시작하겠다. 원하는 문자는 text, append, prepend, before, after를 써서 나오게 할 수 있다. 사용방법은 jQuery 기초 및 사용방법 part.2를 보고오시면 된다.(글 하단에 링크있다) 하나하나 기초적인 부분부터 설명하면 text를 사용하면 기존에 있던 값에다가 '덮어씌우게'된다. append를 사용하면 text와는 달리 기존에 입력되어있던걸 '유지'한 채 '우측에' 주가로 삽입하게 된다.(부모요소 마지막에) prepend를 사용하면 기존에 입력되어있던걸 '유지'한 채 '좌측에' 주가로 삽입하게 된다.(부모요소 맨앞에) before를 사용하.. TIPS 2023. 9. 11. [jQuery] 제이쿼리 기초 및 사용방법 part.1 $, #, 태그? 일단 여기서 설명할 방법은 다양한 예시를 보여주고 한줄한줄 풀어보면서 설명할 예정이다 왜냐하면 나는 공부할때 개념보단 문제를 먼저 보기 때문이다 쌩판 모르는 문제이지만 어떤것인지 예시를통해 추측하고 파악하는 케이스라 jQuery는 무엇무엇이다! 라고 말하는 기존 다른 블로그와는 다를것이다. 처음엔 간단한 사용방법만 알려주고 예시를 읽어가면서 어떻게 쓰이는구나 이런식으로 사용해야하는구나 하고 깨달아갔으면 좋겠다.(스스로 예시보고 사용방법보고 왓다갔다 해보자) 일단 jQuery는 반드시 기본 틀 안에서 작성해야한다. 예를들어 $(document).ready(function(){ // 여기서 코딩 시작 }); 이렇게 기본틀을 만들고 사용한다. 참고로 document, window, this는 jQuery에서 .. TIPS 2023. 9. 8. Disabled란? (html, css) #CSS # disabled #HTML #수정삽입 #로그인 disabled는 선택, 클릭, 입력 등 포커스를 받지 못하게 하는 기능이다. 이것을 위와같은 코드로 작성하게된다면 비록 인풋박스이지만 선택도 클릭도 입력도 할 수 없는 박스가 된다. 먼저 간단하게 소스코드를 짠 뒤 테스트 해보았다. CODE 출처 입력 $("#test2").val("수정 가능 @#@#@#@#@123456789"); $("#test3").val("수정 불가 @#@#@#@#@123456789"); test disabled를 설정해주는 방법은 html 태그 안에서 disabled="disabled"를 입력해 주면된다. 위와같이 disabled를 설정해 주지 않은것은 input박스이니 당연히 수정, 삽입이 가능한데 이렇게 disable.. TIPS 2023. 8. 25. 화면단위 css 및 html 수정 tip 평소에 웹을 만들면서 f12를 눌러 개발자 창에서 콘솔창만 보거나 했는데 사실 여기엔 엄청난 장점들이 많다 특히 나는 프론트를 잠깐잠깐 만져야 할때가 있었는데 이때는 페이지 콘솔창에서 수정해서 원인을 찾는게 더 빠르고 유용하다. 일단 화면단위에대해 수정은 페이지에서 f12를 누르고 요소 또는 밑에 스타일에서 바로바로 수정하면서 어떤점을 수정해야하는지 즉각적으로 나와 이렇게 수정 보완하는게 편하고 빠르다!! 예시로 예전에 화면을 숨겼다 나타내는 것을 한적이 있는데 (화면 숨기기 참고) 여기서 style="display: none;" 에서 block로 숨겼다 나타내곤 했다. 하지만 이렇게 하면 기존 css가 무너지는 현상이 발생하게 되었다.(ex 화면중앙에 오던 로딩창이 숨겼다 나타내니 화면 좌측 상단으로 .. 프로젝트 2023. 8. 10. #HTML #JQuery 태그 삭제, 숨기기, 보이기 part3. 야매 응용(feat. context클릭 popup이벤트) 태그를 숨기는건 정말 비주얼적으로만 숨기는 것이다. (심지어 막 이뻐지지도 않음) 그럼 이걸 좀더 활용할 순 없을까?? 야매로 쓰는경우에도 사용될때가 있다 바로바로 현재화면을 좀더 구체적으로 알려주는 detail popup 이벤트를 할때이다. 참고로 팝업창을 띄워주기 위해선 java spring상 view안에 새로운 popup폴더를 만들고 거기에 새로운 popup view를 만들어야한다.(기본) 그런데 여기서 화면에 있는 값을 넘겨주기위해선 param를 이용하여 넘겨주어야한다. 특히 한 화면에 여러 개를 보여주는 탭을 넣는다면 탭에 때라 어떤탭인지 divison을 해줘야하고 그거에 따른 각각의 다른 popup이벤트도 있어야한다. 그러기위해선 division을 정해주는 치밀한 방법이 있는데....(여기서 .. TIPS 2023. 8. 10. #HTML #JQuery 태그 삭제, 숨기기, 보이기 part2. 숨기기, 보이기 이클립스 초기설정 part 1. 서버, 자바버전, 톰캣버전 설정 https://hacs2772.tistory.com/11 이클립스 초기설정 part 1. 서버, 자바버전, 톰캣버전 설정 이클립스를 처음 시작하다보면 많이 난감한 경우가 많다.(가시성 최고인 IntelliJ에 비하면..) 하지만 테마 설정은 하단 링크를 확인하시고 이클립스 초기설정 part.2 가독성 높이기(테마 및 색상변 hacs2772.tistory.com 이클립스 초기설정 part.3 가독성 높이기(글자색 변경) https://hacs2772.tistory.com/27 이클립스 초기설정 part.3 가독성 높이기(글자색 변경) 이번에 할 것은 사실상 코딩할때 기초설정중 가장 중요하다 할 수 있는 글자색 변경이다 왜인지 이해를 돕기위한 .. TIPS 2023. 8. 9. #HTML #JQuery 태그 삭제, 숨기기, 보이기 part1. 삭제 태그의 종류는 많지만 사용하는법은 어렵지 않다. 부득이하게 한 화면에 여러 태그를 사용하되 원하는 태그만 보여주고싶은 경우가 생길 수 있다. ex) 한 화면에 탭버튼을 이용하여 원하는 차트의 팝업창만 보여주고싶은경우 html 코드를 보여주면서 설명하겠다. 사용시간 이름 아이디 그룹이름 IP 행위 날짜 아이디 직업 유형 직업 상태 파일 사이즈 이건 testpopup에서 보여주는 팝업이벤트 화면부분이다. 이 화면에선 2가지의 팝업창을 각자 조건에 따라 보여주게 되는데 이걸 그냥 보여줄 수 없다. 왜냐하면 각자 차트마다 호출하는 data-key도 다를뿐더러 리스트 컬럼개수도 그리드1은 5개 그리드5는 6개 이다. 그냥 보여주게 된다면 하나의 팝업창에 2개의 표시도 안되는 그리드가 보여지게된다. 이러한 경우 각.. 이전 1 다음 반응형 LIST
![[jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/n0ynW/btstQSspony/0EKDJ3G1ldd7Pn6aa8Yh4k/img.jpg)
![[jQuery] 제이쿼리 기초 및 사용방법 part.1 $, #, 태그?](http://i1.daumcdn.net/thumb/C400x400/?fname=https://blog.kakaocdn.net/dn/DivMX/btstSj32vQb/Mk3IUEMlzsG6QPcgI1pjq1/img.jpg)
