Q. 질문 1이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #5) A. 답변1. 이벤트 버블링이벤트 버블링이란 무엇일까?이벤트 버블링이벤트가 발생하면, 같은 타입 이벤트를 가진 부모 핸들러도 동작즉, 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 한다. 버블링 적용이런 코드가 있을 때, content 오늘 할 일 list 자바스크립트 공부 유튜브 시청 저녁 약속  요소를 클릭했을때, 실제 핸들러 이벤트가 동작하는 요소(currentTarget)와 문구를 출력하도록 자바스크립트 코드를 만든다.const content = document.querySelector('#content');const title = docu..

Q. 질문var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요. (코드잇 스프린트 위클리 페이퍼 #4) A. 중복 선언 허용var - 중복 선언 Ovar 은 정상적으로 중복 선언이 가능하다. let - 중복 선언 Xlet 은 중복 선언이 불가능하여 SyntaxError  가 발생한다.const - 중복 선언 Xconst 도 let 과 마찬가지로 중복 선언이 불가능하여 SyntaxError 가 발생한다.추가적으로 const 는 let 과 다르게 재할당 시 TypeError 가 발생한다.A. 스코프함수 스코프함수 안에서 정의된 변수는 해당 함수 내에서만 접근 가능블록 스코프중괄호 {} 로 둘러싸인 블록 내에서만 접근 가능var - 함수 스코프var 은 함수 스코프로..

Q. 질문자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #4) A. 기본 배경자바스크립트에서 기본형 데이터는 불변값이고, 참조형 데이터(객체)는 가변값이다. 불변객체변하지 않는 객체 자바스크립트에서 객체는 가변값인데, 원본 객체가 변하지 말아야 할 상황에 불변 객체가 필요하다. 불변 객체가 필요한 상황student1 객체에서 name 만 수정한 새로운 객체를 만들기 위해student1 객체를 newStudent 에 복사하고, newStudent 의 이름을 변경하고 리턴하였다.결과는 student2 에서 바뀐 이름이 나올 것 같지만, 실제로는 둘 다 Lee 로 변경되었다. 결론위에 코드처럼 객체의 가변성 에 따른..

☘️ 기본 코드 작성하기 absolute 를 적용하기 위해 부모와 자식을 만들어주었다. HTML 코드 CSS 코드 .parent { width: 500px; height: 500px; background-color: aquamarine; position: relative; } .child { width: 30%; height: 30%; background-color: pink; position: absolute; } ☘️ 자식 요소 가운데 배치하기 ❌ top, left 50% 자식 요소를 가운데 배치하려면 어떻게 해야할까? top(또는 bottom) 이랑 left(또는 right) 를 50% 로 하면 될 것 같다. 부모 기준으로 위에서 50%, 왼쪽에서 50% 이니깐 가운데에 배치 될 것 같기 때문이다!..

Q. 질문 1시맨틱 태그를 사용하면 좋은 점을 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변 1시맨틱 태그란?시맨틱(semantic)이라는 단어의 뜻은 '의미의, 의미론적인` 이라는 뜻을 담고 있다.그렇다면 시맨틱 태그란 의미를 가지고 있는 태그라고 이해할 수 있다. 시맨틱 태그 (Semantic Tag)포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그 시맨틱 태그는 기존 HTML의 태그와 기능이 똑같다. 하지만 시맨틱 태그는 단순 태그가 아니라, 태그의 의미를 부여하여 웹사이트의 구조를 쉽게 파악할 수 있게 도와준다. 시맨틱 태그의 종류시맨틱 태그의 종류는 크게 다음과 같다. (이 외에도 다양한 종류가 있음)태그설명문서의 머리말, 상단 ex) 로고, 제목 등을 포함문서의 내..

☘️ 시작하기 앞서 티스토리 블로그는 사용자가 자유롭게 커스텀할 수 있다는 장점이 있다. 그래서 티스토리 블로그의 기본 글씨체 폰트를 본인이 원하는 대로 수정을 해보겠다. ☘️ 폰트 선택하기 먼저 사용할 폰트를 선택해야 한다. 나는 주로 눈누 라는 사이트를 사용하며 프로젝트를 진행할 때에도 주로 눈누에 있는 폰트를 사용한다. 눈누 상업용 무료한글폰트 사이트 noonnu.cc 다양한 폰트들이 있는데 거기서 원하는 폰트를 골라준다. 나는 오뮤 다예쁨체 를 선택하였다. 라이선스 사용하기 앞서, 먼저 이 폰트가 웹 사이트에서 사용할 수 있는지 라이선스를 확인해야 한다. 다행히 이 폰트는 웹 사이트에서 사용 가능한 폰트이다. 웹 폰트 티스토리 블로그에 사용하기 위해 오른쪽에 있는 웹폰트로 사용 안에 있는 내용들을..

Q. 질문CSS의 Cascading에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변CSS 를 적용하다보면 겹치는 속성이 발생할 수 있다. 개발자 도구를 사용해 임의로 코드잇 페이지에 있는 컴포넌트의 배경 색상을 blue 와 red 로 변경하여 속성이 겹치도록 하였다.그렇다면 화면에서는 blue 와 red 중에 어떤 것이 반영이 될까? 바로 이러한 상황에서 CSS 규칙들을 어떻게 합쳐 줄지 정해주는 방식을 CSS 의 Cascading 이라고 한다.  Cascading 이란?그렇다면 Cascading  는 정확히 무엇일까?  그 전에 CSS 의 약자는 Cascading Style Sheets (CSS) 이다.  이를 한국말로 직역하자면 계단식 스타일 시트 라는 의미이다. 즉, CS..

시작하기 앞서 지난 게시물에서 입력 태그인 input에 대해 알아보았다. HTML input 태그(새 창 바로가기) 정보를 입력받을 때 사용되는 태그이지만 input 이 아닌 태그에 대해 알아볼 것이다. textarea 태그 input 태그를 보면 내용을 입력하는 부분이 한 줄이다. 그래서 만약 게시물처럼 긴 글을 입력하고 싶을 때에는 태그를 사용한다. textarea 태그 메시지를 입력하세요. 그러면 긴 텍스트를 입력하는 창이 생긴다. textarea - 크기 변경 만약 텍스트 창의 크기를 수정하고 싶으면 cols, rows 속성을 사용하여 각각 열(가로)과 행(세로) 수를 설정하여 크기를 수정한다. 그래서 가로는 30개 만큼 커졌고, 세로는 5개 만큼 커졌다. textarea - 입력 값 넣기 in..

HTML 입력 태그 HTML 에서 아이디나 비밀번호 등 정보를 입력해서 로그인 하거나, 게시물과 댓글 등을 작성하기 위해서 입력 태그인 태그 등을 사용해야 한다. HTML 입력 태그 구조 입력 태그를 사용하기 전 알아야 되는 4가지 태그가 있다. 태그 설명 속성 제출할 정보들을 담고 있는 태그 autocomplete (자동 완성 여부) - on, off 정보를 입력 받는 태그 type - 매우 다양함 태그의 라벨 for - input 태그의 id 와 연결 버튼 type - submit(제출), rest(초기화), button(기본) 사용 방법은 다음과 같다. 태그 안에 태그를 넣는다. 은 입력받는 태그로 이름을 입력받기 위해 text 형식을 속성으로 설정해준다. 은 태그의 라벨로 의 for 값과 의 id..

시작하며... 이번엔 HTML 태그 중에서 링크 태그인 에 대해 알아볼 것이다. HTML 링크 태그 a 태그 html에서 다른 페이지로 이동하는 링크는 태그를 사용하여 만들 수 있다. - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. 안의 콘텐츠는 링크 목적지 developer.mozilla.org a 태그 속성 - href, target 태그 속성에는 href 와 target 이 있다. href는 이동할 링크의 주소를 작성한다. 예를 들어 https://www.naver.com 와 같은 웹 사이트 주소이다. t..