본문 바로가기
728x90

Web 개발40

Javascript - DOM 안녕하세요, 오늘은 DOM과 DOM에서 요소를 선택하는 것에 대해 정리해보겠습니다. 우선 DOM이란? Document Object Model의 약어로 직역하자면 문서 객체 모델이라는 뜻입니다. 웹페이지에 나타난 태그들을 객체로 다룰 수 있는 것이라고 생각하면 됩니다. 이전 시간에 배웠던 document 객체가 웹의 최상단에 있는 객체입니다! 제 생각에 DOM을 이해하는 것이 프론트엔드 개발자로서 가장 중요하다고 생각하여 "DOM을 께우치다"라는 책을 사서 읽고 있습니다. 내용이 방대하고 저도 이해를 완벽히 하지 못해 여기서는 기본 개념에 대해서만 정리하고 나중에 깊게 정리해보도록 하겠습니다! 실제로 HTML을 살펴보면 window - document에서 시작하여 html/ head/ body 등 태그들이.. 2021. 6. 26.
Javascript - CSS 선택자 선택 안녕하세요, 지난 시간까지 Javascript의 얕은 이론(?)을 정리하였고 이제부터 본격적으로 Web을 만드는데 필요한 HTML/CSS와의 연결에 대해서 정리하려 합니다. 오늘은 Javascript에서 CSS 선택자를 선택하는 방법을 정리해보겠습니다. CSS의 선택자를 선택하기 위해서는 document객체의 내장 API들을 사용해야 합니다. -. document.getElementById('id를 문자열로 표현') : id 속성을 이용하여 태그를 선택하고자 할 때 사용. HTML 문서에 존재하지 않는 id값으로 태그를 선택하면 null이 리턴됩니다. -. document.getElementsByClassName('class를 문자열로 표현') : class 속성을 이용하여 태그를 선택하고자 할 때 사용.. 2021. 6. 24.
HTML/CSS - transform 안녕하세요, 오늘은 transform 변환 속성에 대해 정리하겠습니다. transform은 요소들에 이동, 크기 변환, 회전, 비틀기 등을 적용할 때 사용하는 함수입니다. transform은 애니메이션화 할 때 사용하면 유용합니다. 2D 변환과 3D 변환이 있습니다. 직접 코딩하면서 보는 것이 이해하기 쉬우므로 translate만 코드를 보고 나머지는 한 번씩 Codepen에서 실행해보시기 바랍니다! ◆ 2D 변환 이동 : position이라는 속성을 이용해도 동일한 효과를 주지만 position은 배치하고 변경을 안해줘야 하므로 애니메이션이나 변경되는 상황에서는 translate을 사용해줘야합니다! -. translate(x, y) : 이동(X축, Y축) -. translateX(x) : 이동(X축) .. 2021. 6. 23.
Javascript - array(Quiz) 드림 코딩 유튜브 채널의 문제를 혼자 풀어보고 영상의 해설과 비교해보았습니다. ◆ 나의 풀이 // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const fruit = fruits.join(', '); console.log(fruit); } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; const answer = fruits.split(','); console.log(answer); } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, .. 2021. 6. 22.