전체 글
자바스크립트 버튼 클릭 이벤트 추가하는 3가지 방법
자바스크립트 버튼 클릭 이벤트 추가하는 3가지 방법
2022.12.16이번 포스팅은 버튼에 클릭 이벤트를 추가하는 3가지 방법을 다룹니다. 권장하지 않는 방법부터, 권장되는 방법, 그리고 추가한 이벤트를 삭제하는 방법도 다룹니다. 우선 base HTML 코드는 아래와 같습니다.! 느낌표로 추가되는 기본 html 구성에 를 쓰고, 그 안에 을 추가한 코드입니다. Button HTML 태그 onclick 버튼 태그에 이벤트를 추가하는 방법으로 HTML 태그에 onclick를 추가해주는 방법이 있습니다. button 여는 태그 안에 onclick를 쓰고, 클릭했을 때 사용하고 싶은 JavaScript 코드를 안에 문자열로 작성합니다. 이 방법으로 button에 이벤트를 연결하면, 코딩하기 쉽다는 장점이 있지만, HTML 코드에 JavaScript 코드가 들어가면서 깨끗하지 않은..
자바스크립트 HTML Template 태그
자바스크립트 HTML Template 태그
2022.12.15Javascript 파일에서 innerHTML을 사용해서 HTML 코드를 사용할 수 있지만, template 태그로 html 코드 상에서 미리 구현해 놓은 것을 사용하면 더욱 깔끔한 코딩이 가능합니다. Template 사용 전 코드 JavaScript 코드 const toolElement = document.createElement('div'); toolElement.innerHTML = ` Merry Christmas! I am so happy `; Template 사용 코드 JavaScript 코드 const toolElement = document.createElement('div'); const toolTemplate = document.getElementById('tool'); const too..
CSS background 꽉차게 넣는 방법
CSS background 꽉차게 넣는 방법
2022.12.12이번 포스트에서는 CSS background 프로퍼티를 다룹니다. CSS background #overview{ background: url("css.jpg"); width: 100%; height: 528px; padding: 10px; margin-top: 43px; position: relative; } background는 background-color, background-image, origin, size, repeat 등 모든 background와 관련된 프로퍼티를 설정할 수 있는 프로퍼티입니다. background에 url로 background 이미지를 설정했다면, 아래 사진처럼 여러 번 반복됩니다. 이때의 background의 역할은 background-image인 것이죠. 참고로 아래 ..
자바스크립트 getElementById, querySelector 차이점
자바스크립트 getElementById, querySelector 차이점
2022.12.11이번 포스팅에서는 getElementById와 querySelector 차이점에 대해서 알아보려고 합니다. 클론 코딩을 하는 중에 lementById를 쓸 때도 있고, querySelector을 쓸 때도 있는데, 쓰임이 다른 이유가 궁금했습니다. Black Box Blue Box getElementById() getElementById를 사용하면 넘겨받은 문자열과 같은 id를 가진 idelement object를 반환합니다. ID는 단 하나의 유일한 값이기 때문에 getElementById를 사용하면 특정한 element에 접근할 수 있습니다. 하지만 모든 element가 Id값을 가지는 것은 아니므로, id 값이 없는 경우에 querySelector()를 사용하여 element를 찾을 수 있습니다. g..
자바스크립트 static의 모든 것
자바스크립트 static의 모든 것
2022.12.03자바스크립트 Class 실습하다가 문득 static이 무엇인지 궁금해졌습니다. APP 클래스를 만들고, APP 클래스를 시작하기 위해 App.init()을 하는데, 여기에 사용된 static 개념을 정리하는 글을 작성해 봅니다. class App { static init() { } } App.init(); 자바스크립트 static static 키워드는 정적 메서드(static method)나 정적 프로퍼티(ststic property)를 정의하기 위해 사용합니다. static으로 만들어진 메서드, 프로퍼티는 클래스의 인스턴스에서 호출될 수 없고, 클래스 자체에서 호출될 수 있습니다. class App { static init() { console.log("static init called"); } } /..
자바스크립트 클래스 Class의 모든 것
자바스크립트 클래스 Class의 모든 것
2022.11.30OOP(Object Oriented Programming) 객체 지향 프로그래밍을 배울 때 꼭 따라오는 것이 클래스(Class)입니다. Class는 Object 객체의 청사진과 같은 역할을 하기 위해 사용합니다. 청사진, 미래에 대한 희망적인 계획이나 구상을 의미하는데, 코드를 짤 때 Object가 어떤 프로퍼티(property)와 메서드(method)를 가질지 미리 구상한다는 의미입니다. 자바스크립트 클래스 클래스 생성 자바스크립트에서 클래스를 생성하려면 class 키워드를 사용하면 됩니다. 이때 클래스 선언문은 사용하기 전에 정의되어 있어야 합니다. 먼저 사용했으면 referenceError가 발생할 수 있어요. constructor 메서드는 클래스에서 단 한 번만 사용해야 하며, 다수의 constr..
사는 데 꼭 필요한 101가지 물건, 소중한 것
사는 데 꼭 필요한 101가지 물건, 소중한 것
2022.11.29사는 데 꼭 필요한 101가지 물건 아무것도 없는 집에 하루에 하나씩 물건을 들여오는 생활을 시작했다. 하루에 꺼낼 수 있는 물건은 딱 1개. 음식물 구입은 괜찮지만 조미료는 카운트한다. 초기 장비는 최소한으로 설정하되, 기본 시설은 사용이 가능하다. 기간은 조건 없이 단 100일! 가장 먼저 들여온 물건은 침구, 다음 날은 칫솔, 100일째는 가족의 선물이었다. 예상외로 필요 없는 물건은 전기밥솥과 지갑, 9일째 갖고 싶어진 물건은 ‘○○’이었다. 시간을 줄이는 도구와 늘리는 도구가 있었고, 냉장고의 또 다른 기능이 타임머신이라는 사실을 알았다. 책은 정리의 기술을 알려주지도, 미니멀리스트를 지향하지도 않는다. 다만 누구도 하지 않는 이 무모하고도 대단한 도전을 통해 자신의 삶에 꼭 필요한 것을 생각해..
HTML 시맨틱 태그의 모든 것 Semantic Tag
HTML 시맨틱 태그의 모든 것 Semantic Tag
2022.11.27HTML 시맨틱 태그 뜻 시맨틱 태그 (Semantic tag)의 의미는 '의미를 가지고 있는 tag'를 의미합니다. Semantic을 네이버 영어 사전에 찾아봤을 때, Semantic은 '의미의, 의미론적인' 의미를 가지고 있으니, 시맨틱 태그는 의미가 있는 태그를 말합니다. 여기서 의미라는 것은 태그가 어떤 내용을 가지고 있는지 알려준다는 의미입니다. 검색이 중요한 시대에서 브라우저가 검색 내용을 찾을 때, 태그를 보고 내용이 중요한지 아닌지 구분할 수 있게 해주는 지표라고 생각하면 됩니다. 시맨틱 태그 종류 시맨틱 요소(elements) article aside details figcaption figure footer header main mark nav section summary 각 요소들은 ..
자바스크립트 배열 중간에 값 추가하기 splice()
자바스크립트 배열 중간에 값 추가하기 splice()
2022.11.21자바스크립트에서 배열을 다루다 보면 배열 중간에 값을 추가하고 싶을 때가 있기 마련입니다. 이 포스팅에서는 배열을 수정해주는 splice 메서드와 splice 메서드를 사용할 때 함께 쓰면 좋은 메서드를 다룹니다. splice() 메서드는 배열이 가지고 있는 내용을 삭제하거나 기존 값을 바꿀 때, 또는 새로운 값을 넣고 싶을 때 사용하는 메서드입니다. 사용 방법은 아래와 같습니다. splice(시작 인덱스 지정, 시작 인덱스부터 삭제하고 싶은 항목의 수, item1 ,..., itemN 삭제된 부분에 추가하고 싶은 값) Splice 사용 전 알면 좋은 메서드 Array.from() 만약에 문자열 splice를 사용하려면, Array.from을 사용하면 됩니다. Array.from() 메서드는 iterab..
Javascript for 반복문 정리
Javascript for 반복문 정리
2022.11.19이번 포스트에서는 Javascript for 문 정리를 다룹니다. 기본적인 for부터 for in, for of를 다룹니다. Javascript for 문 정리 Javascript는 다양한 종류의 for 문을 지원합니다. for 코드 블록을 여러 번 반복하는 루프 for in 객체(object)의 프로퍼티(property)를 반복하는 루프 for of 객체(object)의 값(value)을 반복하는 루프 { key : value}로 구성되어 있다면 for in을 사용하고, [1,2,3] 배열이라면 for of를 사용하면 되겠구나 이해하면 됩니다. Javascript for 예시 for(표현식1 ; 표현식 2; 표현식 3){ console.log("hi"); 코드 block; } for(let i = 0;..
CSS 구글 폰트 적용 방법
CSS 구글 폰트 적용 방법
2022.11.17CSS에서 폰트를 바꾸고 싶을 때 google font를 사용할 수 있습니다. 이번 포스트에서는 구글 폰트에서 링크를 받고, HTML 파일에 적용하고, CSS 파일에서 폰트를 사용하는 방법을 다룹니다. 구글 폰트 적용하는 방법 구글 폰트를 적용하고 싶다면 구글 폰트 웹 사이트에 접속합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google Fonts 웹 사이트에 접속하고, 적용하고 싶은 fonts를 검색합니다. 사용하고 싶은 폰트 고르는 방법 저는 예시로 Signika Negative라는 폰트를 적용해보고자 합니다. ..
Javascript DOM 요소 삭제 방법
Javascript DOM 요소 삭제 방법
2022.11.14이번 포스트는 Javascript DOM element(요소)를 추가, 삭제하는 방법을 다룹니다. DOM은 Document Object Model 즉, 문서 객체 모델입니다. DOM은 노드와 객체로 문서를 구성하고, 프로그래밍 언어(Javascript)가 페이지 간에 상호작용할 수 있도록 도와주는 역할을 합니다. DOM은 프로그래밍 언어가 아니지만, DOM이 없다면 JS는 웹페이지, 요소와 관련된 모델 정보를 갖지 못합니다. Javascript Node, Element 차이 DOM 관련 문서를 읽다가 Node와 element의 차이점도 알아두면 좋을 것 같아 내용을 추가합니다. Node는 document에 있는 모든 객체(object)를 의미합니다. HTML 문서에는 element node, text n..