본문 바로가기
728x90

분류 전체보기104

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.
Javascript - array 안녕하세요, 오늘은 자료구조에 대해 공부할 때 꼭 필요한 array(배열)에 대해 정리하겠습니다. 1. Declaration : 정의하는 방법으로는 2가지가 있습니다. 리터럴 형식의 정의와 new Array()를 이용하는 방법이 있습니다. const arr1 = new Array(); const arr2 = [1, 2]; // 리터럴 형식 2. Index position : 배열 내 요소들에는 각각 인데스가 배정이 되고 시작은 0부터 시작합니다. const fruits = ['apple','banana']; console.log(fruits); console.log(fruits.length); // 2 출력(요소의 수를 확인할 수 있다.) console.log(fruits[0]); // apple 출력 .. 2021. 6. 21.

티스토리툴바