화성갈끄니까아

자바스크립트를 활용하여 여러 프로퍼티에 접근하여 스타일, 클래스 명, 클래스 추가 및 삭제에 대해 알아보자! const today = document.querySelector('.today') 예시를 위해 today 변수에 today 클래스 명을 할당하였다. 1. style 프로퍼티 자바스크립트를 사용하여 style값을 수정할 수 있는데 그 방법에 대해서 알아보자 today.children[0].style.textDecoration = 'line-through' 변수.style.style값 = "값"의 형태로 작성해주면 된다. style값은 css와 선언하는 방식이 동일하다. 주의할 점은 css에서는 케밥 표기법을 사용하였지만 자바스크립트에서는 반드시 카멜 표기법으로 사용해야 한다. 2. classNam..

요소노드 생성/삭제/이동, 자식 및 부모 요드로의 접근에 대해 알아보자! 1. 노드 여행하기 다양한 방식으로 자식 노드, 부모 노드, 형제 노드 등에 접근할 수 있다. const myTag = document.querySelector('.content'); myTag라는 변수에 content 클래스 명을 가진 요소를 할당하고 예시를 보자 1.1 자식 요소 노드 접근 myTag.children // 자식 요소에 접근 myTag.children[1] // 두 번째 자식 요소에 접근 myTag.firstElementChild // 첫 번째 자식 요소에 접근 myTag.lastElementChild // 마지막 자식 요소에 접근 1.2 부모 요소 노드 접근 myTag.parentElement // 부모 요소에 ..

About Dom!? DOM, Document Object Model 문서 객체 모델의 개념이다. 돔은 계층형 구조로써 부모노드, 자식노드, 형제노드가 존재하는 형태이다. 노드의 종류에는 코멘트 노드, 요소 노드, 문서 노드, 텍스트 노드 등 12개의 노드가 존재하는데 대부분 요소노드와 텍스트 노드 2가지를 자주 사용하게 된다. 요소 노드 (Element node) 태그 노드를 뜻하며 자식 노드가 존재할 수 있다. 텍스트 노드 (Text node) 문자를 표현하는 노드로써 자식 노드가 존재할 수 없다. 자바스크립트에서 태그 선택 id 속성 또는 class 속성을 통하여 태그를 선택하는 등 여러가지 방법으로 자바스크립트를 통해서 태그를 호출하고 변수에 할당하는 방법에 대해서 알아보자!! 1. getElem..

CSS에서 요소들을 배치하는 방법에는 float, relative, absolute 등 다양한 방법들이 있다. 그 중 최근에 많이 사용되는 flex 속성에 대해서 알아보자! ☞ display 값으로 flex를 설정하고 요소를 움직일 수 있다. 3개의 div태그를 이용하여 요소를 만들었다. flex 속성을 사용하기 위하여 부모요소를 div태그를 통하여 만들고 작성하였다. 다음은 어떠한 속성도 적용하지 않고 display: flex만 적용한 예시이다. div태그는 block요소로써 한줄에 하나씩만 접근하지만 flex를 통해서 가로정렬이 된 모습을 확인할 수 있다. 따라서 flex는 가로정렬하는데 유용하게 쓰인다는 것을 알 수 있다! 이제 속성을 이용해보자!! ☞ justify-content 속성은 x축을 담..

Display 속성 값 중 가장 기본적인 inline, block, inline-block 요소에 대해서 알아보자! 1. Inline element 인라인 요소는 기본적으로 줄바꿈 없이 순서대로 배치되며 컨텐츠 크기만큼 영역을 사용하는 요소이다. 그렇기 때문에 width와 height를 이용한 크기를 가질 수 없다. 텍스트와 같다고 이해하면 쉬울 것이다. 상하 마진 적용 불가능! but 좌우 마진 적용 가능 (패딩은 상하좌우 모두 가능!!) / / / / / / / / / / / / 2. Block element 블록 요소는 가로폭 전체의 넓이를 가지는 직사각형 형태의 요소이다. 따라서 한줄을 차지하며 블록 요소 뒤에 또 다른 요소들이 오게 되면 밑에 줄에 입력이 되게 된다. 블록 요소는 width와 h..

CSS를 사용해서 요소의 배치를 옮기는 경우 여러 방법들이 존재한다. 그 중 position 속성에 대해 알아보자! 1. position: static 모든 요소들은 position: static 값을 기본 값으로 설정하고 있다. 그렇기 때문에 어떠한 position값도 할당되지 않는다. static은 따로 쓰지 않아도 된다. 2. position: relative 원래 위치를 기준으로 이동시키는 속성이다. 다시 정리하자면, 자기 자신을 기준으로 해서 위치를 이동시킨다. 요소 위치 지정은 top, bottom, right, left를 사용하여 배치할 수 있다. 예시1) 요소1, 요소2, 요소3에 색을 입히고 요소2에 position: relative 속성을 적용시키고 위로 30px 왼쪽으로 30px을 주..