주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. after 선택자 요소 다음에 콘텐츠가 삽입된다. 구문의 차이만 빼고는 insertAfter와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('#wrap').after('새로운내용'); // 출력 내용 새로운내용 insertAfter 선택자 요소 다음에 콘텐츠가 삽입된다. 구문의 차이만 빼고는 after와 동일한 작업을 수행한다. // HTML 내용 // jQuery $('새로운').insertAfter('#wrap'); // 출력 내용 새로운내용 before 선택자 요소 ..

우리는 때때로 동적으로 컨텐츠를 조작하기도 합니다. 어떠한 컨텐츠를 넣고 싶다는 예제로 알아보도록하겠습니다. // HTML 안녕하시렵니까? 이럴때 사용하는 메서드는 append(), prepend(), appendTo(), prependTo(), after(), before()가 있습니다. 하나하나 알아보겠습니다. append() - 선택된 요소에 포함되며 마지막 위치에 새로운 요소로 추가된다. See the Pen LYPwWyX by leeyoonseo (@okayoon) on CodePen. prepend() - 선택된 요소에 포함되며 첫번째 위치에 새로운 요소로 추가된다. See the Pen XWrvMeE by leeyoonseo (@okayoon) on CodePen. appendTo() - a..

글 작성 당시 웹, 모바일 모두 해당하는 사항이었습니다. 이게 정상적인 모습인데, 사파리에서만 확인이 되는 부분이었습니다. 아래와 같이 라운드처리가 된 부분이 가려지지 않고 튀어나와있습니다. border-radius가 적용된 부분이 overflow:hidden이 안되는 모습입니다. css 적용 사항입니다. 첫번째로 든 의심은 특정 가상 선택자의 버그인가 생각이 들어서 :before -> :after로 변경해봤습니다. (X) 하위 엘리먼트의 가상선택자로도 변경해봤습니다. (X) 두번째는 가상선택자 버그인가 싶어서 태그로 변경했습니다. (X) 세번째는 border-radius를 다른 객체들에게도 줘봤습니다. (X) 네번째로 position:absolute를 relative로 변경했습니다.(X) 결론은 모두 ..