원본: 자바스크립트 for 문 문법과 예제 루프는 자바스크립트 개발을 하다 보면 계속 접해야 하는 프로그래밍 개념입니다. 많은 개발자들이 루프를 익숙하게 사용하지만 루프의 정확한 작동 방법과 언제 어떻게 적절한 루프를 선택해야 할지에 대해 잘 모르기도 합니다. 이 포스트에서는 for 루프가 무엇인지, 어떻게 작동하는지, 왜 사용하는지 등에 대해 알아보겠습니다. 루프란? 루프란 같은 명령을 여러번 작성하지 않고 한번만 … Read more
원본: CSS 크기 단위 설명 CSS에는 속성의 다양한 크기를 나타내는 몇 가지 단위가 있습니다. 여러가지 CSS의 단위를 알면 어떤 화면에서도 멋지게 보이고 관리하기도 쉬운 스타일을 연출할 수 있습니다. CSS 크기 단위 란? CSS의 단위는 요소 또는 해당 콘텐츠의 크기를 결정합니다. 예를 들어, 단락의 margin 속성을 설정하려면 특정 크기를 지정해야 하는데 이 값에는 CSS 단위도 포함됩니다. … Read more
원본: CSS color format basic tutorial 이 포스트에서는 Hex 코드, HTML 색 이름, RGB 및 HSL 같은 다양한 CSS Color Format을 사용하는 방법을 알아보겠습니다. CSS Color Format: Hex 코드 사용 방법 HTML 요소에 색을 추가하고자 하는 경우 Hex 색상 코드를 많이 사용합니다. css 파일에서는 body 태그의 color 속성에 Hex 색상 코드를 적용하면 웹 사이트 텍스트의 … Read more
원본: 예제와 함께 CSS Box Model 및 속성 알아보기 이 포스트에서는 웹 페이지 모든 요소의 기본인 CSS Box Model을 알아보겠습니다. CSS는 색상, 글꼴, 레이아웃을 포함해 웹 페이지 디자인을 위한 스타일 시트 언어입니다. 이는 다양한 스크린에 사용되는 인기있는 언어입니다. CSS Box Model 이란? CSS Box Model은 border, margin, padding 및 콘텐츠 자체를 비롯한 여러 속성을 가지는 … Read more
원본: CSS Selector – 클래스, 이름, 자식 선택자에 대한 커닝 페이퍼 CSS Selector (CSS 선택자)는 스타일을 지정할 HTML 요소를 특정합니다. 이를 사용하면 한 번에 여러 개의 HTML 요소를 선택할 수도 있습니다. 한 번에 여러 개의 HTML 요소를 선택할 수 있기 때문에 동일한 스타일을 여러 요소에 적용하려는 경우 유용합니다. 왜냐하면 이 작업을 위해 같은 코드를 여러 … Read more
원본: https://itsourcecode.com/javascript-tutorial/how-to-use-dom-element-hasattribute-method-in-javascript/ hasAttribute() 메소드는 요소에 해당하는 속성이 존재하면 true 값을 리턴하고 그렇지 않으면 false 값을 리턴합니다. document의 요소에 해당 속성이 있는지 여부를 확인하는 작업은 여러 부분에서 유용하게 쓸 수 있습니다. hasAttribute 문법 다음은 이 메소드를 사용하는 문법 구문입니다: 여기서 변수 “element”는 속성이 존재하는지 확인할 HTML 요소입니다. “name”은 문자열 타입으로 체크 하고자 하는 속성의 이름입니다. Note: … Read more
원본: https://www.javatpoint.com/javascript-removeattribute-method removeAttribute() 메소드는 HTML 요소에서 지정된 속성을 제거하는 기능을 합니다. removeAttribute 문법 attributename: 이는 필수 매개변수로서 HTML 요소에서 제거할 속성의 이름을 지정합니다. 속성이 존재하지 않더라도 메소드에서는 예외를 발생시키지 않습니다. setAttribute() 메소드를 사용하여 요소의 속성 값을 null로 설정하기 보다는 removeAttribute() 메소드를 사용하여 요소의 속성을 제거하는 것이 좋습니다. removeAttribute 예제 1 이 예제에는 id가 para, para1인 … Read more
원본: https://www.javatpoint.com/javascript-getattribute-method getAttribute() 메소드는 특정 요소의 속성 값을 리턴해줍니다. 요소에 속성이 존재하면 해당 속성의 값에 해당하는 문자열을 리턴합니다. 해당 속성이 존재하지 않으면 빈 문자열 또는 null을 리턴합니다. getAttribute 문법 attributename: 필수 매개변수로, 얻고자 하는 속성 값에 해당하는 속성 이름입니다. getAttribute 예제 1 다음의 예제 코드에는 두 개의 div 요소가 id를 div1, div2로 가지고 있고 각각의 … Read more
원본: https://www.scaler.com/topics/setattribute-in-javascript/ 자바스크립트의 setAttribute() 메소드는 HTML 요소에 속성 값을 할당합니다. 만일 요소에 설정하려는 속성이 존재하지 않는 경우 매개변수로 주어진 속성 이름과 값으로 새로운 속성을 추가합니다. 여기서 속성 이름은 즉시 소문자로 변경됩니다. setAttribute 문법 이 메소드는 모든 매개변수가 필수 입력 값 입니다. 각각의 매개변수의 의미는 다음과 같습니다: 매개변수 리턴 값 이 메소드의 리턴 값은 undefined 입니다. … Read more
원본: https://www.scaler.com/topics/getelementsbyclassname/ getElementsByClassName() 메소드는 매개변수로 지정된 클래스가 있는지 DOM 트리의 모든 요소를 검색하고 결과를 컬렉션으로 리턴합니다. getElementsByClassName 문법 다음은 이 메소드의 문법 구문입니다: 이 메소드는 일반적으로 HTML document 객체에서 사용하지만 document 객체 대신 DOM의 요소에서도 사용할 수 있습니다. 이 경우 호출한 요소의 document 객체 트리의 하위 요소에 대해서만 검색을 수행합니다. 매개변수 클래스 이름으로 문자열 타입의 … Read more
원본: https://www.scaler.com/topics/javascript-getelementsbytagname/ document 객체 또는 DOM 요소에는 getElementsByTagName() 이라는 메소드가 있습니다. 이는 document의 지정된 태그 이름을 가진 모든 요소의 컬렉션을 리턴합니다. getElementsByTagName 문법 다음은 document.getElementsByTagName() 메소드의 문법입니다: 위의 구문에서 이 메소드는 라이브 컬렉션을 리턴합니다. 즉 검색한 태그 이름을 가진 요소가 페이지에 추가되거나 제거될 때 마다 자동으로 업데이트 됩니다. 매개변수 리턴 값 getElementsByTagName 예제 다음의 HTML … Read more
원본: https://www.educba.com/javascript-getelementbyid/ 자바스크립트의 getElementById() 메소드는 특정 id 속성을 가진 요소를 검색하고 그 요소를 리턴합니다. 이는 HTML DOM 관련 스크립트를 짤 때 가장 유용하고 일반적으로 쓰이는 메소드입니다. 주로 document의 일부 요소를 찾거나 조작할 때 많이 사용합니다. 이 메소드는 특정 id로 document를 검색하는데 요소를 찾지 못한 경우 null을 리턴합니다. id는 원래 페이지 내에서 고유한 값 이어야 하기 … Read more
원본: https://www.javatpoint.com/javascript-queryselector querySelector는 DOM에 추가되어있는 요소를 검색하는 중요한 메소드 중 하나입니다. 이 포스트에서는 querySelector() 메소드의 개념을 알아볼 것이고 예제를 통해 실제 사용 방법을 살펴보겠습니다. 자바스크립트의 querySelector querySelector는 document 내의 요소를 검색하고 여러 결과를 찾았다면 첫 번째 요소만 리턴해주는 메소드입니다. 이는 CSS 선택자 또는 선택자 그룹과 일치하는 요소를 찾고 일치하는 요소를 찾지 못한 경우 null을 리턴합니다. … Read more
원본: https://www.tutorialspoint.com/replace-a-child-node-with-a-new-node-in-javascript replaceChild() 메소드는 자식 노드를 새로운 노드로 대체하고 replaceWidh() 메소드는 선택된 노드를 다른 노드로 교체합니다. 이들 기능은 DOM Level 1의 기능이기 때문에 모든 최신 브라우저에서 작동합니다. 이해를 돕기 위해 이들 메소드의 문법과 사용 방법을 알아보겠습니다. 자바스크립트 replaceChild 이 메소드는 선택된 부모 노드가 가지고 있는 노드를 새로운 노드로 교체하는 기능을 합니다. 문법 매개변수 리턴 값으로는 … Read more
원본: https://www.javatpoint.com/javascript-removechild removeChild() 메소드는 자식 노드를 제거하고 제거된 노드를 리턴합니다. 이 포스트에서는 부모 노드에서 자식 노드를 제거하는 방법을 알아보고 이를 사용하는 몇 가지 예제를 살펴보겠습니다. 자바스크립트 removeChild 부모 노드에서 자식 노드를 제거하려면 removeChild() 메소드를 사용할 수 있습니다. 이 메소드는 노드의 자식 요소를 제거하는 데도 사용합니다. 문법 위의 구문에서 매개변수로 전달하는 childNode는 부모 노드에서 제거하고자하는 요소를 … Read more
원본: https://www.golinuxcloud.com/insertbefore-javascript/ DOM 메소드 중에는 insertBefore라는 메소드가 있습니다. 이는 기존 노드 앞에 새로운 노드를 삽입하는 기능을 하며 올바르게 사용하려면 다음 세 가지를 지정해야 합니다: 자바스크립트 insertBefore 문법 다음은 insertBefore() 메소드의 문법 구문입니다: 이 메소드는 newnode, existingnode 두 개의 매개변수를 받습니다: 새로운 노드를 삽입 시 삽입할 부모 노드가 뭔지 모를 경우도 있습니다만 몰라도 상관없습니다. 왜냐하면 모든 … Read more
원본: https://www.javatpoint.com/javascript-appendchild-method appendChild() 메소드는 자바스크립트 Node 인터페이스의 메소드입니다. 지정된 부모 노드에서 appendChild() 메소드를 사용하면 부모 노드가 가지고있는 자식 노드 목록의 끝에 매개변수로 전달 받은 노드를 추가합니다. appendChild 문법 이 메소드의 문법 구문은 다음과 같습니다: 위의 구문에서 childNode는 부모 노드에 추가할 노드를 의미합니다. 리턴 값으로는 방금 추가된 자식 노드를 리턴합니다. childNode가 이미 document에 추가되어 있다면 현재 … Read more
원본: https://www.javatpoint.com/javascript-create-element 이 포스트에서는 자바스크립트의 createElement 통해 HTML 요소를 생성하는 방법을 알아보겠습니다. 또한 생성된 요소를 document에 삽입하는 예제도 함께 살펴보겠습니다. HTML에서만 HTML 요소를 만들 수 있는 것은 아닙니다. 이 방법이 가장 간단하기 때문에 대부분 HTML document에서 바로 요소를 생성하지만 자바스크립트를 통해서도 요소를 생성하는 것이 가능합니다. 동적으로 특정 태그의 HTML 요소를 생성하려면 자바스크립트의 document.createElement() 메소드를 사용할 … Read more