어제 오늘 내일

지난번에는 div 안에 text를 추가하는 방법을 알아보았습니다. [jQuery] div 안의 텍스트 변경 text(), html() 이번에는 div 안의 텍스트를 읽어오는 방법입니다. text() 텍스트를 추가할 때와 마찬가지로 텍스트를 읽어올 때도, text() 메소드를 사용할 수 있습니다. 이번에는 파라미터를 전달하지 않고 호출합니다. Hello // Hello const value = $('#myDiv').text(); document.write(" 읽어온 값 : " + value) $('#myDiv').text() id가 myDiv인 div를 선택하고, text() 메소드를 사용하여 div의 텍스트를 읽어옵니다.

jQuery를 이용하여 div 안의 텍스트를 변경하려면 다음 2가지 방법을 사용할 수 있습니다. text() html() 1. text() 요소 안의 텍스트를 변경합니다. html 코드를 전달하여도, text로 인식되어 그대로 출력합니다. $('#myDiv1').text('hello'); $('#myDiv2').text('버튼'); $('#myDiv1').text('hello'); 파라미터로 전달된 텍스트가 그대로 화면에 출력되었습니다. $('#myDiv1').text('버튼'); html 태그를 넣어도 태그가 그대로 화면에 출력됩니다. 2. html() 요소 안의 html을 변경합니다. 파라미터로 html 코드를 전달하면, html 코드가 실행됩니다. $('#myDiv1').html('hello'); ..

jQuery에서 선택된 element의 클래스 값을 가져오는 방법입니다. attr() attr()은 선택된 요소의 속성 값을 가져옵니다. // my1 my2 my3 const classList =$('#myDiv').attr('class'); document.write(classList); attr('class') attr() 함수는 파라미터로 입력받은 속성의 값을 가져와서 문자열로 리턴합니다. class도 속성이므로 attr() 함수를 이용하여 class의 값을 읽어올 수 있습니다.

jQuery를 이용해서 특정 class를 가지는 요소 갯수를 구하는 방법입니다. 클래스 선택자 / length const my2cnt = $('.my2').length; // 2 document.write(my2cnt); $('.my2').length $('.my2') 클래스 선택자를 이용하여 my2 클래스를 가지는 요소들을 선택합니다. length length 속성을 사용하여 위에서 선택된 요소가 몇개인지 얻어냅니다. 위 예제에서 my2 클래스를 가지는 요소는 2개입니다.

jQuery를 이용하여 클래스를 추가, 삭제하고 토글 하는 방법입니다. 클래스 추가 - addClass 안녕하세요 .bg-yellow { background-color: yellow; } $("#myDiv").addClass("bg-yellow") $("myDiv").addClass("bg-yellow"); id가 myDiv인 요소에 bg-yellow 클래스를 추하여, div의 배경색이 노란색으로 변경되었습니다. 클래스 삭제 - removeClass 안녕하세요 .bg-yellow { background-color: yellow; } $("#myDiv").removeClass("bg-yellow") $("#myDiv").removeClass("bg-yellow") 이번 예제의 html을 보면 bg-yell..

hasClass() jQuery의 hasClass() 메소드를 이용하여 특정 클래스가 존재하는지 확인할 수 있습니다. 예제 .my1 { background-color: yellow; } const hasMy1 = $('#myDiv').hasClass('my1'); // true const hasMy2 = $('#myDiv').hasClass('my2'); // true const hasMy3 = $('#myDiv').hasClass('my3'); // false const hasMy12 = $('#myDiv').hasClass('my1 my2'); // true const hasMy21 = $('#myDiv').hasClass('my2 my1'); // false const hasMy23 = $('#my..

Javascript의 숫자 앞 또는 뒤에 0을 추가하여 특정 자릿수의 문자열을 만드는 방법입니다. padStart(), padEnd() str.padStart(문자열길이 [, 채울문자]) str.padEnd(문자열길이 [, 채울문자]) padStart(), padEnd()는 문자열을 특정 길이로 패딩 하는 데 사용하는 메소드입니다. 이름에서도 알 수 있듯이, padStart()는 문자열의 앞에 '채울 문자'를 넣어서 원하는 길이의 문자열을 만들고, padEnd()는 문자열의 뒤에 '채울문자'를 넣어서 원하는 길이의 문자열을 만듭니다. const num = 1; // 00001 const str1 = num.toString().padStart(5, '0'); // 10000 const str2 = num...

이번에는 버튼을 왼쪽, 오른쪽, 가운데 정렬하는 방법을 정리해 보았습니다. 1. text-align 왼쪽 정렬 가운데 정렬 오른쪽 정렬 .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } 버튼을 감싸고 있는 div 영역에 text-align 속성을 적용하여 그 안의 버튼을 정렬하였습니다. 2. flex 왼쪽 정렬 가운데 정렬 오른쪽 정렬 .container { display: flex; } .left { justify-content: flex-start; } .center { justify-content: center; } .right { justify-content: flex-end; } 버튼을..

다음 설정을 통해 인텔리제이에서 수정된 파일을 구분할 수 있도록 수정된 파일명 앞에 별표(*)가 표시되도록 할 수 있습니다. 수정된 파일에 별표 표시하기 File > Settings > Editor > General > Editor Tabls 위 메뉴로 이동한 후 'Mark modified (*)' 항목을 체크합니다. 결과 열려진 에디터 창에서 수정된 파일의 탭에는 별표가 표시된 것을 확인할 수 있습니다.

인텔리제이의 자동 import 기능을 사용할 때 (Alt + Enter), 동일한 패키지의 클래스들을 여러개 import 할 경우, import 문에 자동으로 와일드카드(*)가 적용될 때가 있습니다. 이렇게... 이런 경우, 와일드카드를 적용하지 않고, 각각의 클래스들을 명시적으로 import 문에 써주도록 설정해 보겠습니다. 자동 import 시 와일드카드 사용하지 않도록 설정하기 File > Settings > Editor > Code Style > Java > Imports Use single class import : 체크 Class count to use import with '*' : 최대값 999로 설정 Names count to use static import with '*' : 최대값 9..