9강 javascrip와 css로 작업하기 (유데미 강의, CSS완벽 가이드, 맥스 선생님 강의)

</body> 태그 직전에 <script>을 넣어서 js 파일을 포함시켜준다

요소가 다 구현되고 이를 js가 건들이기에 안전하다

 

브라우저는 html의 요소들을 DOM (문서객체모델)이라는 가상의 모델로 구현하는데 js언어를 통해 이 dom에 접근할 수 있다

 

let element = document.querySelector('#아이디 .클래스 요소 etc...')

을 통해 요소 1개를 가져올 수 있고

let elements = document.querySelectorAll('#아이디 .클래스 요소 etc...')

을 통해 여러개의 요소를 가져올 수 있다

 

그 후 addEventListener()와 같은 메소드를 이용해서 이벤트(상황) 발생시 요소의 변화를 주는 코드를 작성할 수 있다

 

element.classList

.add()

.remove()

를 사용해서 클래스를 추가하고 뺄 수도 있다 (이를 통해 모달을 구현하기도 한다)

 

js에서 css 스타일을 직접 변경하고 싶을때는 그 표기 방법이 다름에 주의해야한다

css에서는 border-radius 라고 하지만 브라우저에서는 borderRadius로 표기되기 때문에 js로 '직접' (클래스 추가,제거 말고) 스타일을 건들때에는 위의 표기대로 해야한다 (이를 낙타의 등을 닮아 camelCase라고 한다)

 

자세한 js 내용은 별도로 js 강의를 듣도록 하자

(본인도 css 알고 있었는데 이번에 다시 들으면서 확실히 알게되는 개념이 있었다, 그래서 js를 알고 쓰고 있지만 맥스 강사님의 js강의도 한번 들어볼까 싶다, 기본기가 중요하지.. 암.. 그럼.)

 

 

 

 

강의,자료, 출처

https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/