https://2duckchun.tistory.com/254 CSS의 기본 구조 영어로 외워주자. 셀렉터, 프로퍼티, 밸류, 디클레어레이션 등등. Selector : html의 element를 지정해주는 기능을 한다. 해당 셀렉터를 기준으로 style이 들어간다. propery : CSS에서, 디자인 기능을 담당 2duckchun.tistory.com CSS Selector 종류의 설명에 앞서, CSS의 기본 구조에 대해 알 필요가 있다. Selector의 분류 Selector는 4가지로 분류할 수 있다. 셀렉터 의미 예시 전체 셀렉터 - 문서에 있는 모든 엘리먼트에 스타일을 적용. * {font-size: 20px;} 타입 셀렉터 - 지정한 엘리먼트에 스타일을 적용. - 동시에 여러 엘리먼트 지정 가능..
간단한 자바스크립트와 html 요소들을 이용해 TODO LIST를 작성해보았다. input 엘리먼트에 입력 후 Add를 누르면 밑의 빈 공간에 해당 문장이 저장되고, 문장을 클릭하면 문장이 사라지는 다소 간단한 Todolist 이다. 코드 TODO LIST Add forEach는 배열이 가진 각기 요소들을 순회하여 다른 기능을 부여하는 메서드이다. querySelectorAll은 뒤 괄호에 오는 클래스명 또는 엘리먼트의 위치를 기억하여, 조건에 부합하는 엘리먼츠들을 위에서 아래 순서로 배열 형태로 저장한다. querySelectorAll과 forEach를 합쳐서 이용해볼 수 있다. display에 약간의 수정만 가해지더라도 새롭게 요소들을 지정해주어야 한다. 따라서 render()를 재사용성 있게 활용한다.
querySelector는 인수와 매치되는 첫번째 요소를 선택하는 기능이다. querySelectorAll은 위와 거의 비슷한 기능이지만, 인수와 매치되는 모든 요소들을 배열화해서 리턴한다는 점이 다르다. Hello Hola Buna ziua Aloha Hi world
LocalStorage는 브라우저에 데이터베이스처럼 자료를 저장할 수 있게 해주는 기능이다. 쓰는 방법은 여러가지가 있겠지만, 여기서는 간단하게 실습을 해 볼 것이다. localStorage의 두 기능만 알고 넘어가보자. localStorage.setItem localStorage.setItem 기능은 2개의 문자열을 인수로 받는데 첫번째 인수는 Key 이름에 해당하는 문자열이 되고 두번째 인수는 그 Key값의 Value가 되는 값이 된다. 즉, localStorage.setItem은 키값쌍(배열)의 구조로 데이터를 처리하게 가공해준다. localStorage.getItem localStorage.getItem은 오로지 문자열 하나의 인수만 받는다. 인수로 받은 문자열과 동일한 localStorage의 ..
이두희님이 강의하시는 일단 만드는 HTML 강의를 듣고나서 아무것도 참조하지 않고 맨땅으로 만들어 보았다. 제작시간은 약 30분이 걸렸으며, 많은 수고와 노력을 들이지는 않았다. html을 조금씩이나마 해와서 쉬운 과제였지만, 그럼에도 불구하고 백지에서 만드는 것은 상당한 노동력이 들었다. 김태수 프론트엔드 스쿨 3기 안녕하세요. 프론트엔드 스쿨 3기 김태수입니다. Programming experience 2022.4 ~ NOW HTML CSS Javascript Awards 2022.4 ~ NOW have No Awards 이러쿵 저러쿵 2022.4 ~ NOW 아이구야아아 copyright 없음 @import url('https://fonts.googleapis.com/css2?family=Montse..
멋쟁이 사자처럼에서 주관하는 프론트엔드 스쿨 3기에 최종합격했다. 나에게 주어진 기간동안 최선을 다해 배울 것이다.
JSON.stringify를 통해 자료형을 문자열 형태로 만들 수 있고, 이를 JSON이라고 한다. 이것을 다시 배열로 만들고자 한다면? JSON.parse 메서드를 사용하면 된다! 이 기능은 문자열을 parse하여 JavaScript 데이터 형태로 만들어준다. const arr = [-18, 'Peter Parker', true] const strArr = JSON.stringify(arr) const newArr = JSON.parse(strArr) const isSame = arr === newArr console.log(arr) console.log(strArr); console.log(newArr); console.log(isSame); arr는 배열이다. strArr에 문자열화 한 arr를 할..
웹사이트에 데이터를 전송할 때, 데이터는 문자열(string) 형태로 전달된다. 만약 배열 데이터형을 인터넷으로 전달하고자 한다면? 배열을 문자열 형태로 바꿔주는게 필요하다. 데이터(number, boolean, string, array, objects)가 문자열 형태로 변환되었을 떄, 이것을 JSON이라고 부른다. (JSON은 JavaScript Object Notation의 약어이다.) 데이터베이스도 데이터를 문자열의 형태로 보관하기에, 데이터베이스에 배열을 저장히기 위해서는 데이터를 문자열로 먼저 변환해야하는 경우가 있다. 우리는 자바스크립트의 데이터를 문자열로 바꾸기 위해 JSON.stringify 메서드를 사용할 수 있다. JSON은 주로 브라우저 작업에 사용되지만, 노드를 통해 간단한 예제를 ..
select 요소(element)는 드롭다운 메뉴를 만들 수 있게 해준다. select 요소 내부에 option 요소를 자식 요소로 해서 드롭다운 메뉴를 만들 수있다. 말이 어려우면 아래를 보자! Mild Medium Spicy 만약 자료로 주어진 배열이 있고, 이 배열 내용들을 드롭다운 형식으로 가공하고 싶다면 배열 메서드를 이용해볼 수 있다. 주어진 배열형 data가 있다. select의 innerHTML에 reduce() 메서드를 이용한다. reduce 메서드는 각 배열에 을 붙이는 가공을 통해서 자료가 HTML에 잘 맞아들어가게 할 수 있다.
이 전에 onclick 이라는 어트리뷰트를 배운 적이 있다. onclick은 유저가 해당 요소(element)를 클릭했을 때, 동작하는 함수를 할당해주는 기능이다. onclick의 단점은 각 요소에 기능을 하나만 할당할 수 있다는 것이다. (onclick은 click 기능만 가능하다는 의미) 이보다 더 좋은 방법은, 요소에 addEventListener를 할당해 주는 것이다. addEventListener의 문법은 아래와 같다. addEventListener('eventName', function) addEventListener 어트리뷰트를 이용해서 onclick 기능을 구현해보자 Click Me! document.querySelector를 통해 button 요소(element)를 지정할 수 있도록 설정..
