그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 자바스크립트로 HTML 내에 코드를 어떻게 넣을 수 있는지 알아보겠습니다. 필요에 따라 HTML 내에 하드코딩식으로 넣을 수도 있지만 하나의 방법으로 자바스크립트로 어떻게 넣는지 알아보겠습니다🤔 왜 JS를 이용해서 넣을까? 단순히 한 부분에 간단한 코드를 넣는다고 하면 하드코딩으로 직접 HTML 코드를 넣으면 편합니다. 하지만 넣어야 하는 코드가 `input_text`라는 클래스를 가진 요소 앞에 모두 넣으려고 한다면 하드코딩으로 하기 힘듭니다. 그렇기 때문에 JS를 활용하면 특정 클래스나 아이디 등의 관련된 위치에 넣을 수 있는 편의성이 있습니다. HTML/CSS post JS window.addEventListener('load', function () { let p..

안녕하세요 무택입니다 :) 오늘은 일러스트에서 3D 풍선 느낌이 나는 표현 방법에 대해 써보려고 합니다. 위와 같은 느낌의 텍스트를 오늘 어떻게 만드는지 알아보겠습니다😀 3D 풍선 느낌 나는 텍스트 만드는 방법 1. 먼저 일러스트 프로그램에서 사용할 텍스를 입력해 줍니다. 2. 메뉴에서 [효과 - 3D 및 재질 - 부풀리기]를 눌러줍니다. 3. 위와 같은 창이 뜨게 됩니다. 3D 유형에서 부풀리기가 활성화되지 않았다면 다시 한번 눌러서 활성화시켜 주고 3D효과가 적용 안되어 보인다면 오른쪽 상단의 계단모양 아이콘을 누르면 적용된 모습이 보일 겁니다. 여기서 옵션 설정이 필요하면 옵션 값들을 설정해 주고 따로 설정할 필요가 없다면 넘어가줍니다. 4. 상단의 [재질]을 눌러서 재질을 설정해 줍니다. 기본 재..

한동안 코딩애플 강의를 못 듣다가 오랜만에 들어서 복습개념으로 전 강의들을 살펴보다가 npm start를 어떻게 하는지 까먹어서 생긴 오류 어떤 오류인지? 라이브 서버를 보기 위해 터미널에서 "npm start"를 입력했을 때 발생하는 오류 위 코드가 나오고 라이브 서버가 실행되지 않음 왜 발생했는지? 폴더 경로의 오류였다. React강의 폴더 경로가 [폴더1/폴더2/npm 설치한 폴더]인데 편의성을 위해 폴더1을 오픈하고 작업하다가 "npm start"를 입력하니 라이브 서버가 실행되지 않은 것. IDE에서 [npm 설치한 폴더]를 열고 입력하니 정상적으로 작동됨.

안녕하세요 무택입니다 :) 오늘은 css에 폰트를 적용할 때 CDN, OTF, WOFF 세 가지 방법을 비교해보려고 합니다. 업무를 하다가 폰트가 조금 깨져 보인다는 얘기가 있어서 접하게 된 이슈인데 문득 이 세 개 적용에 따라 차이점이 있을까 궁금해졌습니다. 아래에서 바로 확인해 보시죠🤔 폰트 적용 방법 차이 1. CDN 적용하는 방법 중 하나인 CDN에서 불러오는 방법은 파일이 업로드된 서버에서 바로 불러오는 방법입니다. @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); 위처럼 파일 경로에 'cdn'이 들어가는 곳에서 파일을 불러다 쓰는 게 cdn 방식이고 위 코드 두 가지 중..

안녕하세요 무택입니다 :) 오늘은 스크롤 트리거에 대해 설명해보려고 합니다. 스크롤을 활용해서 웹페이지를 동적으로 만들어 줄 수 있는 라이브러리인데 너무 좋은 라이브러리라서 보시면 활용할 곳이 정말 많을 것 같습니다😊 스크롤 트리거, 왜 사용할까요? 동적인 웹 구현을 하기 위해서는 자바스크립트가 거의 필수로 들어가야 합니다. JS를 활용한 기능들 중 스크롤 위치에 따른 기능 구현이 많이 필요한데 페이지마다 자바스크립트만으로 구현하기에는 복잡하고 사용성이 떨어지기 때문에 편하게 스크롤 위치를 감지하고 기능을 넣을 수 있는 스크롤 트리거 라이브러리를 사용하면 쉽고 빠르게 동적인 기능을 만들 수 있습니다. 코드 및 설명 HTML/CSS .full_screen { width: 100%; height: 100vh..

안녕하세요 무택입니다 :) 오늘은 상업적으로 사용이 가능한 일러스트를 공유하려고 합니다. 보통 무료 일러스트는 개인 프로젝트에서만 이용이 가능한 게 대부분인데 이 파일들은 높은 퀄리티에 상업적 이용까지 가능하게 공유되었으니 필요하신 분들은 사용하시면 좋을 것 같습니다😊 무료 일러스트 Free Vector Illustrations For Your Projects Hand-drawn, vector, free illustrations. Ideal for websites, web applications, mobile applications, marketing materials, printouts, social media posts, templates, work presentations, www.freeillus..

안녕하세요 무택입니다 :) 오늘은 포토샵에서 고급개체 레이어를 사용하는 이유에 대해서 써보려고 합니다. 포토샵이 아직 익숙하지 않은 분들이라면 고급개체와 일반 레이어의 차이가 정확히 무엇인지 모르는 게 당연하다고 생각합니다. 아래 내용에서 고급개체의 사용 이유에 대해서 알아보세요😊 고급개체 레이어의 개념 우선 고급개체 레이어는 위 이미지처럼 레이어에 문서표시가 들어가기 때문에 일반 레이어와 구분할 수 있습니다. 그런데 이 고급개체는 뭘까요? 고급개체는 "원본을 보존하면서 편집할 수 있는 레이어"를 말합니다. 여기서 말하는 원본의 종류는 이미지, 벡터 파일, PSD 파일 등 여러 가지가 될 수 있습니다. 그런데 이 원본들을 보존하면 뭐가 좋을까요? 바로 레이어의 크기나 필터 효과 적용 등 많은 편집을 하더..

안녕하세요 무택입니다 :) 오늘은 윈도우 기본 스크린 샷 기능을 끄는 방법에 대해 써보겠습니다. 저는 스크린샷 프로그램을 따로 사용하고 있는데 언제부터인가 프린트 스크린 키를 누르면 윈도우 캡쳐 기능이 켜지더라구요. 이게 불편해서 윈도우 스크린 기능을 끄고 제가 사용하는 프로그램을 사용하기 위해 알아봤습니다. 윈도우 스크린 샷 기능 설정하기 1. 윈도우 검색창에 "캡처도구"를 검색해 줍니다. 2. 실행하기 3. 우측 상단 점 세 개 클릭 4. 설정을 눌러서 설정메뉴로 들어가기 그러면 왼쪽과 같은 화면이 뜨게 됩니다. 여기서 "바로 가기" 메뉴에 있는 인쇄 화면 키 어쩌구..를 눌러서 설정으로 들어가 줍니다. 그러면 오른쪽 창이 뜨게 되는데 이미지의 ②번 기능을 꺼줍니다. 여기까지 짧게 윈도우 기본 스크린..

안녕하세요 무택입니다 :) 오늘은 폰트 검색 기능에 대해 써보려고 합니다. 좋은 디자인에서 폰트는 중요한 역할을 합니다. 좋은 디자인을 봤을 때 폰트가 뭔지 궁금할 때가 있죠. 그럴 때 어떻게 폰트를 찾는지에 대해 써보도록 하겠습니다. AI 폰트 검색하기(한글) 1. 먼저 산돌 폰트 검색사이트에 들어가서 위 화면의 부분에 이미지를 등록해 줍니다. 드래그로 해도 등록이 되니 드래그로 편하게 등록하세요😊 2. 이미지를 등록하면 맨 위 화면처럼 어떤 폰트를 검색할 건지 영역 선택하는 부분이 나옵니다. 그러면 영역을 맞춰주시고 영역을 클릭해 주세요. 그러면 사용된 폰트와 비슷한 폰트들이 나오게 됩니다. 폰트가 나왔는데 유료면 곤란하기 때문에 비슷한 느낌의 폰트들이 나오니 그중에 무료 폰트가 있다면 검색해서 사용..

안녕하세요 무택입니다 :) 오늘은 티스토리에서 인라인코드를 코드블록으로 만드는 방법 + 간편하게 설정할 수 있는 방법에 대해 써보려고 합니다. 개발 관련 블로그를 운영하고 있고 운영할 생각이 있으신 분들이 보면 좋을 것 같은 글이니 아래 내용을 천천히 읽어주세요. 인라인 코드블록(이하 코드블록)이란? 노션 서비스를 보면 위 이미지처럼 텍스트를 코드블록으로 감싸서 상황에 따라 가독성을 높여줄 수 있는 툴이 있습니다. 위 이미지에서 `Notion` 부분이 그 예시입니다. 포스팅에 코드를 적어야 할 경우 [display : none;] 이런 식으로 써주는 것보다 `[display : none;]` 이런 식으로 쓰면 코드 가독성이 더 올라가기 때문에 코드블록은 개발 블로그에서 필수적으로 사용해야 한다고 생각합니..