반응형 IT, 개발/웹개발13 제이쿼리 style 가져오기, 변경하기 (JQuery css() CSS수정 ) 제이쿼리의 css()를 활용하면 해당 태그의 style 속성을 가져오거나 변경할 수 있습니다. 이 또한 HTML 코드를 동적으로 구성할 때 유용하게 사용됩니다. 현재 적용되어있는 style을 확인하거나 새로운 style 항목을 추가하거나, 기존 내용을 변경할 수도 있습니다. 사용법을 하나씩 확인해보도록 하겠습니다. 1. CSS 가져오기 테스트를 위한 div 태그를 아래와 같이 생성하였습니다. 너비와 높이에 100px를 주고 배경색을 초록색으로 지정하였습니다. id가 testDiv인 이 태그의 style 값을 제이쿼리로 조회하고 싶다면 아래와 같이 사용할 수 있습니다. css 뒤에 조회하고자 하는 style의 속성을 입력하면 됩니다. $("#testDiv").css("width"); console로 결과를.. 2022. 8. 23. 제이쿼리 html 내용 가져오기, 변경하기 (JQuery html(), appendI()) 제이쿼리의 html()을 활용하면 해당 태그 하위의 html 내용을 가져올 수 있고 그 내용을 새로운 내용으로 변경할 수도 있습니다. HTML 코드를 동적으로 구성할 때 주로 사용하게 되는데, 예를 들어 데이터베이스의 내용을 기반으로 표를 그린다던지, 데이터베이스 정보를 기반으로 이미지를 보여준다던지 할 때가 그렇습니다. HTML 코드 값을 가져와서 확인하거나 용도에 맞게 사용할 때도 있습니다. 사용법을 하나씩 알아보도록 하겠습니다. 1. HTML 가져오기 테스트용 기본 테이블을 아래와 같이 생성하였습니다. Column 1 Heading Column 2 Heading Row 1: Col 1 Row 1: Col 2 id가 testTable인 이 테이블의 html 코드를 조회해보도록 하겠습니다. var ta.. 2022. 8. 22. 제이쿼리 속성값 가져오기, 제어 (attr() / HTML태그 속성 변경) 웹 개발을 할 때 제이쿼리의 attr()을 활용할 때가 많습니다. 개인적으로 HTML 코드보다는 제이쿼리를 사용하여 동적으로 활용할 수 있도록 구성하는 게 나중에도 더 편하다고 생각하기 때문인 것 같습니다. attr()을 활용하여 원하는 속성 값을 가져와서 그 내용을 다른 곳에 사용한다던지 어떤 이벤트가 발생했을 때(예를 들어 버튼을 클릭했다던지, 일정 시간지 지났다던지 등) 속성을 변경시킬 수 있습니다. 예시를 보며 알아보도록 하겠습니다. 1. 속성 값 가져오기 위와 같은 이미지 태그가 있다고 가정해보겠습니다. 이미지 태그의 id는 testImg이고 src에 적혀있는 경로에 있는 이미지를 화면에 표시합니다. 이때 저 태그의 이미지 경로를 알아내고 싶다면 $("#testImg").attr("src"); .. 2022. 8. 20. 제이쿼리(jquery) 사용하기(jquery 다운로드/CDN) JAVA로 웹 개발 시 매우 유용하게 사용하는 제이쿼리 사용하는 방법에 대해 알아보도록 하겠습니다. 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 사용하면 간단한 코드로 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 많은 장점이 있지만 일단 HTML 조작이 쉽고, CSS 스타일도 간단하게 수정, 추가할 수 있는 것이 장점입니다. 이 제이쿼리를 사용할 수 있도록 하기 위해 준비과정에 대해 알아보고 간단하게 테스트까지 해보도록 하겠습니다. 1. jquery 준비(다운로드 or CDN) 2. jquery 적용 3. 테스트 1. jquery 준비 js파일을 다운로드하거나, URL로 연결하여 사용할 수 있습니다. 두 가지 방법 중 원하는 방법으로 적용할 수 있습니다... 2022. 6. 30. HTML/CSS class명 띄어쓰기의 의미 오늘은 class명에 관련된 내용을 보도록 하겠습니다. 먼저 class명을 지정하는 방법을 확인해보겠습니다. ⊙ 첫 글자는 알파벳으로 시작해야 합니다. ⊙ 두 번째부터는 알파벳과 숫자, 하이픈(-), 언더바(_)를 사용할 수 있습니다. (대소문자 구분되기 때문에 카멜 기법으로 사용 가능) * 카멜 표기법 낙타의 등 모양처럼 생겨서 붙어진 이름입니다. 단어의 첫음절마다 대문자를 사용하여 표기합니다. ex) className testClass 이제 class명 띄어쓰기 의미에 대해 알아보도록 하겠습니다. HTML 태그 예시를 보면서 살펴보겠습니다. 테스트 위 태그 예제에서 class 항목에 "className1"와 "className2"가 적혀있습니다. 두 단어 사이에 띄어쓰기로 표시가 되어있는 것은 서로 .. 2022. 6. 29. HTML/CSS class 사용하여 관리하기 웹 개발을 할 때 class 속성을 사용해서 css를 관리하게 됩니다. 각 태그마다 style을 사용하여 적용한다면 한 두 번은 편할지도 모르지만 점점 소스량이 많아질수록 관리하기가 매우 어려워집니다. 처음 설정한 값이 절대 변하지 않는다면 모르겠지만 나중에 수정하거나 추가하려면 여기저기 찾아다니며 수정하기란 결코 쉬운 일이 아닙니다. 예시를 보며 비교해보도록 하겠습니다. 1. class 사용 HTML 소스 테스트 CSS 소스 .box { background-color: black; width: 100%; height: 50%; } 2. class 미사용 테스트 위 예시로만 본다면 style을 사용하여 코딩하는 쪽(class 미사용)이 더 편리해 보일 수 있으나 동일한 style을 가진 태그가 양이 많아.. 2022. 6. 28. 이전 1 2 3 다음 728x90 반응형
