좌충우돌 개발자의 길

1. CSS style 2. class 제어 className 으로 제어하기 classList 로 제어하기 (여러개 class 넣을 수 있음) .classList.add : 클래스 추가 .classList.remove : 클래스 제거 .calssKist.replayce(a,b) : a를 b로 바꿈 .classList.toggle() : 클래스가 있으면 빼고 없으면 넣는 기능 출처 : 코딩앙마

1. 노드 수정 추가 - nodeValue를 이용해서 내용을 추가 수정할 수 있음 (text value만 사용 가능, 나머지는 null처리함) -> ex) blueTextNode.nodeValue = '파랑'; -> blue -> 파랑으로 바뀜 2. innerHTML 사용법) 마크업을 제대로 표현하고 싶을 때 사용 -> EX) ul.innerHTML = 'RED; 단점) 요소를 추가,제거 수정할때마다 다시 모든 html을 string으로 추가해야함 -> EX) ul.innerHTML = 'REDBLUE; 3. 노드 생성 1) appendChild() 방법1) innerHTML 새로운 li 를 만듦 : const newLi = document.createElement('li'); 자식 텍스트 노드 붙이기 ..

1. queryselectorAll과 getElementsByTagName의 차이점 1) 반환값이 다르다 2) 업데이트된 내용 - p태그를 하나 더 추가하고 위의 코드 다시 돌려보면 getElement..는 업데이트하고 querySelectorAll은 반영 x 2. 부모노드 접근 - red.parentNode : red라는 id를 가진 태그의 부모노드를 출력 - red.parentElement : red라는 id를 가진 태그의 부모노드를 출력 3. parentNode와 parentElement의 차이점 - parentNode : 부모노드를 반환하는데 html의부모노드는 document가 되는 거임, 부모인 노드 중 모든 노드를 반환 - parentElement : 부모노드 중 요소노드만 반환함 (요소노드..

1. DOM (Document Object Model) DOM은 html의 각 요소들을 트리 형식으로 표현해주는 자료구조이며 개발자는 JS로 이것들을 수정하거나 삭제하거나 생성 가능 - 하나의 객체를 노드라고 함 - 부모 노드와 자식 노드로 구분 2. 모든 html 태그는 객체로 구성 - 콘솔창에 : document.documentElement 하면 html 태그 안의 코드가 출력 document.body; 하면 body 태그 안의 있는 코드가 출력 태그명으로 접근 : document.getElementsByTagName('p')' -> p태그로 접근 - className로 접근하기 className으로 접근 : 1) document.getElementsByClassName('link') -> class..

width: auto와 height: auto = 자동 크기 맞춤 -> width: auto와 height: auto는 내용물의 크기에 맞혀 자동 크기 조절의 의미를 가진다.

width: 90%; /*1000px의 90% 너비*/ max-width: 1000px; height: 80%; /*700px의 80% 너비*/ max-height: 700px; 최대 높이, 너비를 설정하고 그 안에서 크기를 설정할 수 있음

드림코딩의 JS 강의를 듣고 노션에 정리했다! https://blossom-river-c97.notion.site/JS-1ba1de37b1f544c48c977b3872226610 JS A new tool for teams & individuals that blends everyday work apps into one. blossom-river-c97.notion.site

https://hansolcha.tistory.com/4 [Css] margin auto, 중앙정렬하기 margin: 0 auto; 위는 대표적인 중앙정렬 속성이다. 그런데 어떻게 동작되길래 중앙정렬이 되는 것일까? 1. '0' 여기서 0값은 위 아래 여백을 주지 않는다는 의미이다. 즉, margin: __;에서 __값은 좌우위 hansolcha.tistory.com - 중앙정렬하는 방법은 여러가지가 있지만 magin으로 정렬하는 법이 있다. margin: 0 auto 자세한 설명은 위의 주소를 참고

css-module을 사용할 때 styles name을 하나 적용 ... styles name을 여러 개 적용 ... *주의!! : `${styles.description}, ${styles.yellow} => 이렇게 콤마 붙이면 절대 절대 안됀다

https://velog.io/@donee/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90-font-awesome-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%82%AC%EC%9A%A9 리액트에 font-awesome 아이콘 사용 fontawesome무료버전만 설치했다.RegularSolidLightDuotoneBrand원하는 아이콘을 font awesome에서 찾아 클릭한다.작업하는 jsx에 다음과 같이 추가해준다. velog.io 리액트에 font-awesome 아이콘 사용 fontawesome무료버전만 설치했다.RegularSolidLightDuotoneBrand원하는 아이콘을 font awesome에서 찾아 클릭한다.작업하는 jsx에 다음과 같이 추가해준다. velo..