이런 이야기, 낯설지 않으신가요?코딩을 배우기로 결심했습니다! 새로운 커리어를 찾은 설렘에 마음이 가득 차서, Udemy 강의에 빠르게 등록하고 freeCodeCamp도 가입합니다.낙관적이고 의욕 넘치는 마음으로 그날 저녁부터 앉아서 학습 자료를 살펴보기 시작합니다.그 후 몇 주 동안 밤늦게까지 코딩을 공부하고, 다음 날 아침 일찍 일어나 출근하는 패턴에 빠져듭니다. 하지만 점점 개념들이 헷갈리기 시작하고, 물어볼 사람도 곁에 없습니다.소중한 여가 시간을 희생했고, TV로 푹 쉬며 긴장을 풀어본 지도 오래됐습니다. 친구들과의 모임에
안녕하세요! 코딩을 배우고 있거나 커리어 전환에 성공한 개발자들의 이야기를 들어보는 새로운 인터뷰 시리즈를 시작합니다. 첫 번째 주인공은 인스타그램 프로그래머 커뮤니티에서 활동 중인 오웬(Owen)입니다.오웬은 정규직으로 일하면서 어린 아들을 키우고 있는데요, 바쁜 일상 속에서도 꾸준히 코딩을 공부하며 개발자의 꿈을 좇고 있습니다. 같은 상황에 놓인 분들에게 그의 솔직한 이야기가 큰 힘이 될 것 같아 인터뷰를 진행했습니다.저 역시 많은 영감을 받았는데요, 여러분도 그의 이야기에서 좋은 에너지를 얻어 가시길 바랍니다!현재 하는 일은
안녕하세요, 여러분! 오늘은 독학으로 성장한 게임 개발자 만디(Mandy)님을 소개해 드리려고 합니다. 그녀는 커리어를 완전히 바꾸고 스스로 게임 제작을 배웠으며, 현재 남편과 함께 게임 개발 스튜디오를 운영하고 있습니다. 자신의 삶을 새롭게 재정의하고 자신만의 사업을 꾸려가는 사람의 이야기를 찾고 계셨다면, 바로 여기가 답입니다!자기소개간단히 본인 소개와 현재 하시는 일에 대해 말씀해 주시겠어요?저는 만디(Mandy)이며, 독학으로 프로그래밍을 익힌 개발자이자 텍사스주 오스틴에서 남편과 함께 운영하는 인디 게임 스튜디오 블랙 하이
혼자 힘으로 코딩을 배우기 시작하면 처음에는 답보다 궁금증이 더 많아지기 마련입니다.무엇부터 배워야 할까요? 버그는 어떻게 고쳐야 할까요? 그리고 모든 것이 불가능해 보일 때는 어떻게 동기를 유지할 수 있을까요?코딩에서 성공할 수 있을지 걱정된다면, 아래의 10가지 팁이 여러분에게 용기와 동기를 불어넣어 줄 것입니다!1. 시작하기 전에 구체적인 목표를 세우세요개발자를 꿈꾸는 사람들에게 가장 자주 받는 질문 중 하나가 바로 어떤 언어를 배워야 하나요?입니다.충분히 이해되지만, 사실 이것은 출발점으로 삼기엔 잘못된 질문입니다.먼저 스스
이 Gulp 4 튜토리얼에서는 워크플로우에 Gulp를 설정하여 Sass와 JavaScript 파일을 컴파일하는 방법을 단계별로 자세히 설명합니다. 아직 Gulp를 사용해 보지 않았다면 꼭 사용해 볼 것을 추천합니다! Gulp를 활용하면 Sass 파일을 CSS로 컴파일하거나, JavaScript 파일을 처리하고, 각종 파일을 최적화하는 등 유용한 작업들을 자동화할 수 있습니다. 이 튜토리얼에서 다룰 Gulp 설치 및 실행의 기본 단계는 다음과 같습니다: 명령줄에서 npm install gulp-cli -g 명령어로 gulp-cl
z-index란 무엇일까요? z-index는 HTML 요소를 서로 겹쳐서 층층이 쌓아 올릴 수 있게 해주는 CSS 속성입니다. 처음에는 아주 간단해 보이지만, 사실 그 단순함은 함정입니다. 직관에 어긋나는 기묘한 규칙들이 있어서, z-index를 999999로 설정했는데도 원하는 대로 동작하지 않는 경우가 종종 발생합니다. 이 글에서는 z-index가 의도대로 작동하지 않는 가장 흔한 네 가지 원인을 자세히 설명합니다. CSS를 활용해 요소를 맨 앞으로 가져오거나, 다른 요소 뒤로 보내는 방법까지 함께 배워보세요. 1. 같은
HTML 요소에 배경색을 추가하려면 CSS의 background-color 속성을 사용하면 됩니다.예를 들어 다음과 같은 HTML 마크업이 있고, <body> 요소에 배경색을 지정하고 싶다고 가정해 보겠습니다.<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Changing background color in HTML/CSS</title> </head> <body>
HTML 요소 안에서 텍스트를 들여쓰고 싶으신가요? CSS를 활용하면 단락의 첫 줄을 아주 간단하게 들여쓸 수 있습니다.지금부터 그 방법을 하나씩 살펴보겠습니다.text-indent로 단락 첫 줄 들여쓰기먼저, 다음과 같은 단락 텍스트가 있다고 가정해 보겠습니다.<p class="indent"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa sit aperiam deserunt quae excepturi fugit, consequun
CSS를 활용하면 HTML의 div 요소 두 개를 손쉽게 나란히 배치할 수 있습니다. 이 글에서는 가장 많이 사용되는 세 가지 방법을 코드 예제와 함께 자세히 살펴보겠습니다.Float(플로트) 방식Flexbox(플렉스박스) 방식CSS Grid(CSS 그리드) 방식1. Float 방식Float 방식에서는 아래와 같은 HTML 마크업을 사용합니다.<div class=float-container> <div class=float-child> <div class=green>Float Column
이번 튜토리얼에서는 HTML과 CSS를 사용해 상단 네비게이션 바를 제작해 보겠습니다. Flexbox 방식과 CSS Grid 방식, 두 가지 접근법을 모두 다뤄 그 차이점을 비교하고 자신에게 더 잘 맞는 방법을 찾아보실 수 있습니다. 완성된 네비게이션 바 미리보기 데스크톱 환경에서는 모든 링크가 한 줄에 배치되며, Home은 왼쪽에, 나머지 링크들은 오른쪽에 정렬됩니다. 모바일 환경에서는 Home이 첫 번째 행에, 나머지 링크들이 두 번째 행에 중앙 정렬되어 배치됩니다. 파일 설정 index.html 파일과 style.sc
CSS와 HTML을 사용해 블록(block) 또는 인라인 블록(inline-block) 버튼 요소를 가운데 정렬하려면 어떻게 해야 할까요? 다소 까다로워 보일 수 있지만, 요소의 종류에 상관없이 버튼을 가운데 정렬할 수 있는 핵심 팁들을 상황별로 정리했습니다. 인라인 블록(inline-block) 버튼 요소 버튼(<button>)과 링크(<a>) 요소는 기본적으로 display: inline-block으로 설정되어 있습니다. inline-block이 적용된 요소는 문서의 일반적인 흐름 안에서 왼쪽에서 오른
HTML에서 앵커(<a>) 링크를 사용하면 다른 페이지나 다른 웹사이트로 연결할 수 있습니다. 그렇다면 웹페이지의 특정 부분으로 바로 이동하려면 어떻게 해야 할까요? 그 답은 바로 점프 링크(Jump Link)입니다. 점프 링크는 단순히 페이지를 불러오는 데 그치지 않고, 페이지 내 특정 위치로 화면을 즉시 이동시켜 주는 링크입니다. 사이트 내부의 다른 페이지로 연결할 때도 사용할 수 있고, 소셜 미디어나 이메일 등으로 외부에 공유할 때도 활용할 수 있습니다. 이러한 링크는 방문자가 어디서 접속했는지에 관계없이 항상
코드에 주석(comment)을 추가하면 나중에 자신이나 다른 개발자가 코드의 용도를 쉽게 이해할 수 있어 매우 유용합니다. 주석으로 처리된 코드나 텍스트는 브라우저가 완전히 무시하기 때문에 화면에 표시되지 않습니다.이 글에서는 HTML, CSS, JavaScript에서 주석을 작성하는 방법을 하나씩 살펴보겠습니다.HTML에서 주석 작성하는 방법HTML 한 줄 주석HTML 코드 한 줄을 주석 처리하려면 해당 텍스트나 코드를 주석 태그인 <!-- --> 사이에 넣으면 됩니다.실제 코드에서는 아래와 같이 작성합니다:<!-
Gulp를 실행할 때 Cannot find module gulp-sass(모듈 gulp-sass를 찾을 수 없음)와 같은 오류 메시지가 표시되는 경우가 있습니다.이 오류는 Gulp가 gulp-sass 패키지의 함수를 실행하려고 했지만, 해당 패키지를 찾지 못했다는 의미입니다.이 번거로운 오류가 발생했다면, 아래에서 소개하는 몇 가지 해결 방법을 통해 쉽게 문제를 해결할 수 있습니다.1. node_modules 폴더 확인하기npm으로 패키지를 설치하면 프로젝트 루트에 node_modules 폴더가 생성되고, 설치된 패키지 정보가 pa
터미널에서 gulp 명령어를 실행했는데 gulp: command not found(명령을 찾을 수 없음) 오류가 발생한 적이 있으신가요? Gulp로 작업(task)을 실행하려다 이런 오류를 만나면 당황스러울 수 있습니다. 다행히 원인은 명확하고, 몇 가지 간단한 방법으로 금방 해결할 수 있습니다. 오류가 발생하는 이유 이 오류의 원인은 간단합니다. 어떤 디렉터리에서든 패키지를 명령줄에서 실행하려면 해당 패키지가 컴퓨터에 전역(globally)으로 설치되어 있어야 하기 때문입니다. 프로젝트 폴더에만 로컬로 설치되어 있다면 터미널은 g
Windows 시스템에서 Gulp를 전역적으로 설치하는 방법을 단계별로 정리했습니다. 대부분의 과정은 Mac에서도 동일하게 적용되지만, 일부 명령어 문법은 운영체제에 따라 조금씩 다를 수 있습니다. 1단계: Node.js와 npm 다운로드 및 설치 가장 먼저 컴퓨터에 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. Node 설치 여부가 확실하지 않다면 명령 프롬프트(cmd)나 PowerShell을 열고 아래 명령어를 입력해 보세요. node -v 또는 node --version Node가 이
CSS에서 배경 이미지를 다루는 일은 생각보다 까다로울 수 있습니다. 코드에 배경 이미지를 제대로 설정했더라도, 다른 요인들 때문에 화면에 나타나지 않는 경우가 종종 있기 때문입니다. 이 글에서는 HTML과 CSS를 활용해 배경 이미지가 표시되지 않는 문제를 해결하는 네 가지 방법을 소개합니다. 1. HTML 파일에 CSS 파일이 올바르게 연결되어 있는지 확인하세요 웹사이트에 CSS 스타일이 적용되려면 HTML 파일 안에 <link> 태그를 추가해야 합니다. 이 태그는 <head></head>
npm을 사용하다 보면 Please run npm cache clean과 같은 이상한 오류 메시지를 만나는 경우가 있습니다. 이럴 때는 npm 캐시를 정리하거나 새로고침해야 할 수 있습니다. 가장 먼저 시도해 볼 수 있는 방법은 npm cache clean 명령어를 실행하는 것입니다. npm 버전 5 이상에서는 npm cache verify 실행하기 다만 npm v5 이상을 사용 중이라면 상황이 조금 다릅니다. npm v5부터는 캐시가 자가 복구(self-healing)되도록 설계되었기 때문에, npm cache clean을 실행하
Gulp으로 개발 작업을 하다 보면 다음과 같은 오류 메시지를 마주하게 될 때가 있습니다. The following tasks did not complete... Did you forget to signal async completion? 오류의 원인 이 오류는 Gulp 4에서 모든 태스크(task)가 자동으로 비동기(asynchronous) 방식으로 처리되기 때문에 발생합니다. 동기(synchronous) 함수는 하나가 완료된 후에야 다음 함수가 실행되며, 각 함수는 반드시 이전 함수의 작업이 끝나기를 기다려야 합니다. 반
명령줄에서 gulp를 실행했을 때 다음과 같은 오류 메시지가 나타나나요?gulp은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다PowerShell 환경에서는 다음과 같이 표시됩니다.gulp 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램의 이름으로 인식되지 않습니다.이러한 오류는 대개 두 가지 원인 때문에 발생합니다. 컴퓨터에 Gulp CLI가 전역적으로 설치되어 있지 않거나, npm 디렉터리가 Path 환경 변수에 등록되어 있지 않은 경우입니다. 아래 순서대로 따라 하면