본문 바로가기

전체 글402

[코드팩토리] 호이스팅:Hoisting 개념 모든 변수 선언문이 코드의 최상단으로 이동되는 것처럼 느껴지는 현상을 이야기한다. 모든 프로그래밍 언어들은 Top to Bottom의 개념이다. 이것은 위에서 쓰인 함수부터 차례대로 실행한다는 의미인데, 호이스팅은 변수를 선언하면 그 변수들을 미리 메모리에 저장해두고, 나중에 호출이 되면 값을 출력해주는 방식을 일컫는다. 위의 코드는 정상적이다. fruit라는 변수에 사과라는 값을 담았고 이를 콘솔에 출력했더니 정상적으로 사과라는 string이 출력됐다. 그런데 이 경우를 보면 1번줄의 console.log(fruit);는 분명히 변수가 선언되기도 전에 쓴 함수이기 때문에 에러가 출력되어야 하는데 변수의 초기화를 의미하는 undefined가 출력됐다. 2번째 줄에서 변수를 선언한 것인데 변수를 최상.. Programing/JavaScript 2024. 3. 2.
티스토리 글에 목차 넣기 글 하나에만 적용하기 글을 작성 후 HTML 편집모드에서 아래의 코드를 추가한다. 출처 : https://rich-smile.tistory.com/439 IT/Tistory 2024. 3. 1.
[코드팩토리] 자바스크립트의 데이터 타입 자바스크립트의 데이터 타입 Primitive Type:원시타입 (6개) 1. Number (숫자) 2. String (문자열) 3. Boolean (불리언, 참과 거짓) 4. undefined (정의가 되지 않은 상태) 5. null (정의가 되지 않은 상태) 6. Symbol Object Type (1개) 7. Object (객체) : object, array, function(이 글에서 다루진 않음) 1. Number (숫자) const age = 32; 위 변수는 Number 타입으로 선언한 모습이다. const temperature = -10;와 같이 음수로도 선언 가능하다. 해당 변수가 어떤 타입인지 확인하고 싶을 때 console.log(typeof age);로 콘솔에 띄워볼 수 있다. 2. .. Programing/JavaScript 2024. 3. 1.
[코드팩토리] JavaScript 세팅, 콘솔에 로그 띄우기, 변수 선언하기 출처 : https://www.youtube.com/watch?v=ZOVG7_41kJE&t=8556s 자바스크립트 세팅하기 설치하기 Visual Studio Code 사용 익스텐션 Live Server, Code Runner 사용 Console.log('Hello, World!'); 콘솔에 무언가를 띄우기 주석 작성하기 한 줄만 넣을 때 // 여러 줄 넣을 때 /* */ 변수 선언하기 var, let, const 세 가지가 있다. 현업에서는 var은 잘 사용하지 않는다. let과 const가 그 이후에 보완해서 나왔기 때문.그러나 배우는 단계에서는 알고는 있어야 한다. var로 짜여진 스크립트가 많기 때문. 처음에는 console.log('자바스크립트'); 와 같이 '' 따옴표로 묶어서 텍스트를 표현했지.. Programing/JavaScript 2024. 3. 1.
티스토리 장문의 글 작성 후 제목 색 한번에 바꾸기 장문주의 본 글은 방법을 알려드리기 보다는 CSS에 이제 막 입문한 필자가 문제를 해결해나가는 과정을 기록한 내용입니다. 방법이 궁금하신 분들께는 결론을 먼저 말씀드립니다. 더 좋은 방법이 있는지 더 찾아보겠습니다. 1. 글쓰기 편집 모드를 HTML 모드로 바꾸어 내가 바꾸고자 하는 곳의 태그를 찾아 일괄적으로 수정하기. (단 폰트 사이즈는 바뀌지 않음. 티스토리 CSS 설정을 우선함.) 2. 스킨편집에서 CSS 설정 자체를 바꿔버리기. 문제 상황 공부한 것을 나중에 찾아보기 위해서 티스토리 블로그를 만들어서 메모를 하고 있는데, 처음으로 장문의 글을 작성했다. 그런데 장문의 글을 작성하는데 시간이 오래 걸리고, 다른 사람에게 보여주기 위해 작성한 글은 아니지만 제목1, 제목2 등 제목 크기의 변화가 티.. IT/Tistory 2024. 2. 29.
티스토리 본문 웹폰트 바꾸기 CSS 편집을 통해 본문의 기본서체를 바꿀 수 있다. 웹폰트는 눈누 사이트를 활용한다. https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 1. 눈누에서 필터링을 웹폰트로 하여 마음에 드는 웹폰트를 찾는다. 2. 마음에 드는 폰트를 찾았다면 우측의 웹폰트 CSS 코드를 복사한다. 3. 티스토리 스킨 편집 화면에서 CSS를 찾는다. 4. 복사한 코드를 CSS 편집화면에 붙여넣는다. 위치는 상관없으나 초보자는 기본으로 작성된 CSS를 건드리다가 전체 초기화해야 하는 불상사를 막기 위해 맨 아래에 /* */ 으로 주석을 달아 관리하는 것도 좋다. 5. HTML에서 본문 영역에 웹폰트 적용 다시 HTML로 넘어온다. 그리고 ctrl + F 를 눌러 검색창에 #article-vie.. IT/Tistory 2024. 2. 29.
기존에 있던 텍스트 지우고 input에 있는 이미지 링크로 이미지 출력하여 대체하기 상황 html 어딘가 샘플 텍스트가 입력되어 있고, (또는 없더라도 정해진 구역이 있고) 웹 사용자가 input이나 textarea에 이미지링크 (웹주소 또는 로컬 주소)를 적고 버튼의 onclick 이벤트를 발생시켜 해당 위치에 이미지로 대체하고자 한다. 문제 해결 이 자바스크립트 함수에선 JQuery를 혼용 사용한다. JQuery 사용을 위한 CDN을 입력한다. 이따가 기존 텍스트를 지우는 과정에서 JQuery의 empty 함수를 이용하여 JQuery 함수만 사용하는 것이 깔끔하겠지만 본인은 코딩 7일차라 잘 모르는 내용으로 이렇게 해결했다. 이미지를 대체시킬 구획을 로 만들어 id를 부여한다. 아래 예제에선 을 사용했지만 안의 내용은 전부 사라지기 때문에 어떠한 내용이나 형식이어도 상관없다. 아래 .. Programing/JavaScript 2024. 2. 29.
버튼에 새로고침 기능 넣기 버튼 Programing/HTML 2024. 2. 29.
특정 영역 캡쳐해서 이미지로 HTML에 띄우기 출처 : https://hooongs.tistory.com/65 [html] Canvas로 특정 영역 스샷하기 [html] Canvas로 특정 영역 스샷하기 html파일이 render가 된 상태인 브라우저에서 보이는 화면을 캡쳐를 해야해는 경우가 있어 알아본 결과. html2canvas를 사용하여 특정 div나 canvas (html에서 그림을 그릴 hooongs.tistory.com 상황 든 HTML의 특정 영역을 캡쳐해서 별도로 지정한 등의 영역에 캡쳐해서 자동으로 이미지로 띄워주는 기능을 구현하고 싶다. 문제 해결하기 기능 구현에 사용되는 JQuery, html2canvas CDN 삽입하기 닫는 태그 앞 권장 HTML 문서에서 외부 자바스크립트 시트를 불러와 별도로 작업하는 경우 해당 호출 태그는 .. Programing/JavaScript 2024. 2. 29.
그림자효과 추가하고 마우스를 올렸을 때 커졌다가 떼면 원상태로 복귀하는 CSS 애니메이션 효과 적용하기 .클래스명 { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 그림자 효과 추가 */ transition: transform 0.3s, box-shadow 0.3s; /* 그림자 애니메이션 효과 추가 */ } .클래스명:hover { transform: scale(1.05); /* 마우스를 올렸을 때 크기를 살짝 키웁니다. */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* 그림자 효과를 더 짙게 만듭니다. */ } Programing/CSS 2024. 2. 29.

티스토리툴바