분류 전체보기
-
20.07.01:: TILStudy/TIL 2020. 7. 1. 22:03
오늘의 한 일 깃깃깃.. 새롭게 배운 것 querySelector와 querySelectorAll의 차이. 같은 클래스명의 파일이 여러개 있을 경우, querySelector는 제일 처음, 한개의 요소만 가지고 오는 반면에, querySelectorAll은 같은 클래스명을 가진 전체 파일을 불러온다. 보완해야할 부분 인스타그램 폰트어썸아이콘-> 인스타 svg로 바꾸기 인스타 검색기능 해보기 위코드 라이프 깃깃깃.... 깃깃깃... 깃은 어렵다. 깃은 필요하다. 깃을 배우자.
-
2020.06.30:: TILStudy/TIL 2020. 6. 30. 20:50
오늘의 한 일 인스타그램 클론코딩 ( 검색창 포커스 시 변화) 인스타그램 클론코딩 코드 클린하게 수정 (클래스네임 변경) 인스타그램 클론코딩 story수정 새롭게 배운 것 padding: 10px 10px 10px; 의미. let spanText = document.getElmentById('span').innerText; 클래스 네임 서로 동일하게, 규칙을 주어서 작성하기 css 우선순위에 맞추어 작성하기 => 클린코드 😚 리눅스 보완해야할 부분 리눅스 블로그 포스팅 내가 작성한 코드로 블로그 포스팅 위코드 라이프 으어어어어 ㅎㅎㅎ 오늘 인스타그램 클론코딩 리뷰 세션이 있었다. 클래스 네임을 신경써서 쓴다고 썼는데.. 그게 아니었다... ㅋㅋㅋ 제대로 확인했어야 했다. 그래서 다시변경하느라 시간을 많이..
-
2020.06.29:: 오늘의 TILStudy/TIL 2020. 6. 29. 21:28
오늘의 한 일 인스타그램 클론코딩 ( 로그인구현, 댓글기능 구현, 하트버튼 누르면 빨갛게 변하는 기능 구현) 새롭게 배운 것 form태그에서 button의 submit 막는 방법 form 태그 안에 있는 button은 무조건 submit 이벤트가 일어난다. submit을 하지 않고 button 기능구현만 하고 싶다면, button의 type을 아래와 같이 button으로 주면된다. 버튼 자바스크립트 DOM에서 getElementsByClassName 으로 html의 태그를 가져오려면, 인덱스 값을 넣어주어야 한다. className은 복수의 데이터를 가져올 수 있기 때문에 그 classname이 1개더라도 옆에 인덱스 [0]을 붙여서 호출해야한다. const commentBtn = document.get..
-
Object 프로퍼티 접근, 할당, 중첩Study/JavaScript 2020. 6. 25. 16:27
프로퍼티 접근 let difficult = { 33: '숫자 형식도 되네', 'my name': '스페이스 포함 가능', color: 'silver', 키: '한글인 키는 따옴표가 없어도 되는군!!', '!키': '느낌표 있는 키는 따옴표가 필요하군', $special: '$는 없어도 되는군' }; console.log(difficult.color); 1. dot(.)으로 접근하는 방법 - 따옴표 없이 키를 바로 써 주어야 함. console.log(difficult['color']); 2. [] 대괄호로 접근하는 방법 - 키 이름을 따옴표로 감싸서 작성해주어야함. console.log(difficult.my name); console.log(difficult.33); 이렇게 스페이스가 포함된 키, 숫자..
-
클래스 생성자와 메소드Study/JavaScript 2020. 6. 25. 13:27
자바스크립트의 class에 관해서는 이전 피드에서 다루어 생략합니다.:) https://dream-frontend.tistory.com/334 클래스와 기본 문법 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. -위키백과 실무에선 dream-frontend.tistory.com 생성자 (Constructor) 객체(Object)의 설계도인 클래스(class)는 문법이 비슷하다. 둘의 가장 큰 차이는 constructor라는 생성자 함수이다. 아래의 class를 살펴보자. class Car { constructor(name, price) { this.name = name; this.pri..
-
function 함수의 형태와 구성Study/JavaScript 2020. 6. 25. 10:37
함수를 왜 사용하는가? 스크립트를 작성하다보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. 사용자가 로그인이나 로그아웃을 했을 때 메시지를 보여주는 동작 같은 경우 말이다. 함수는 프로그램을 구성하는 주요 '구성요소(building block)'이다. 다시말하면, 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록이다. 함수를 이용하면 중복없이 유사한 동작을 하는 코드를 여러번 호출 할 수 있다. 혹시, alert(message)를 사용해본 적이 있는가? 이것은 명령만 내려도 alert기능을 사용할 수 있는 내장함수이다. 이번에는 함수를 직접 만드는 방법에 대해 알아보자:) 함수의 기본 형태 function checkCorrect () { let hi = "안녕하세요"; return hi..
-
2020.06.24:: 오늘의 TILStudy/TIL 2020. 6. 24. 21:59
오늘의 한 일 웹 개발의 역사 (위코드 세션) 자바스크립트 if문, 연산자, 함수, 배열, 데이터 타입 복습 (리플잇) 새롭게 배운 것 array의 데이터타입은 "object"객체이다. (배열은 확장된 객체이다.) console.log(typeof []); // object null의 데이터타입도 "object"객체이다. null은 말그대로 아무것도 아닌 빈 객체를 가리고 있어서 object라고 나온다. console.log(typeof null); // object function의 데이터타입은 "function". array indexOf() js slice 보완해야할 부분 블로그 포스트 하기. object 포스트하면서 복습하기 위코드 라이프 점심 저녁 먹으면서 점점 사람들과 함께 이야기나누고, 서로..
-
semantic elementsStudy/html 2020. 6. 24. 20:47
semantic elements = 의미를 가진 요소들. 시멘틱 요소는 분명하게 이것의 의미를 브라우저와 개발자 모두에게 전달한다. 예를들어, non-semantic요소인 와 은 이것의 내용에 대해 아무것도 말하지 않는다. semantic 요소의 예인 과 , 은 분명하게 이것의 내용을 정의한다. HTML에서의 시멘틱 태그 많은 웹사이트들은 네비게이션, 헤더, 푸터를 가리키기 위해 아래와 같은 HTML 코드를 가진다. HTML에는 웹페이지의 각각 다른 부분들을 정의하기 위해서 사용될 수 있는 시멘틱 요소들이 있다. HTML ELEMENT 요소는 문서 안에서의 한 section을 정의한다. W3C의 HTML 문서에 따르면 : "section은 일반적으로 제목이 있는 주제별 콘텐츠 그룹이다" 홈페이지는 일반적..