jonbeo 님의 블로그

웹사이트를 만들어서 열어보면, 내가 설정하지 않았는데도 폰트 크기가 다르거나 마진이 들어간 경우를 본 적 있으시죠?이건 브라우저마다 **기본으로 적용하는 스타일(유저 에이전트 스타일 시트)**이 다르기 때문이에요.이 차이를 없애기 위해 사용하는 게 바로 reset.css입니다.✅ reset.css란?reset.css는 브라우저 기본 스타일을 없애고,모든 요소를 똑같은 기준에서 시작하게 만들어주는 CSS 파일이에요. 예를 들어, 대부분의 브라우저는 태그에 기본적으로 큰 폰트와 마진을 적용합니다.이걸 그대로 두면 브라우저마다 디자인이 달라 보이게 되죠.✅ 기본 reset 예시/* 가장 단순한 reset.css */* { margin: 0; padding: 0; box-sizing: border-box..

웹사이트를 만들다 보면 CSS가 점점 길어지고 복잡해지는 경우가 많아요.이럴 땐 스타일 파일을 기능별로 나눠서 관리하면 훨씬 편해요.이번 글에서는 CSS 파일을 분리해서 @import로 불러오는 방법을 설명할게요.어디서 어떻게 불러오는 게 좋은지, 어떤 점에 주의해야 하는지도 함께 살펴보자구요!✅ 왜 CSS 파일을 나눠서 관리해야 할까?처음엔 하나의 style.css 파일로 시작하지만,헤더푸터버튼폼 스타일등이 점점 많아지다 보면 수십, 수백 줄이 되죠.이때 CSS를 역할별로 나누고,메인 파일에서 @import로 불러오면유지보수가 쉬워지고협업도 편해지고필요할 땐 개별 파일만 수정하면 됩니다!🛠 기본 문법: @import "파일경로";CSS에서 다른 파일을 불러올 때는 @import를 사용해요.@impor..

React를 공부하다 보면 fetch로 JSON 데이터를 가져온다, props로 JSON 넘긴다 이런 말들을 자주 보게 됩니다.처음엔 “그 JSON이라는 게 도대체 뭐지?” 하고 막막하셨을 거예요.이번 포스팅에서는 JSON이 뭔지, 왜 React에서 자주 쓰이는지, 그리고 실제로 어떻게 사용하는지 예제를 통해 하나씩 살펴보겠습니다.✅ JSON이란?**JSON(JavaScript Object Notation)**은 데이터를 주고받을 때 사용하는 가벼운 텍스트 형식입니다.간단하게 말하면, 정보를 담기 위한 약속된 문장 구조예요.{ "name": "홍길동", "age": 28, "isStudent": false} 위처럼 중괄호 {} 안에 "key": value 쌍으로 이루어진 데이터 구조를 JSON이라고..

포토샵으로 작업하다 보면 글자 크기 단위가 pt로 되어 있어서“어? 난 px로 보고 싶은데 왜 이게 포인트지?” 하는 순간이 있죠.특히 웹디자인이나 모바일 UI 작업할 땐 픽셀(px) 단위가 더 익숙하고 정확하니까,단위를 pt에서 px로 바꿔주는 게 훨씬 편해요!✅ pt가 뭐고 px는 뭔가요?pt는 포인트 단위예요. 인쇄 기반 디자인에서 자주 쓰이는 단위죠.px는 픽셀 단위예요. 웹에서는 이게 기본 단위예요.💡 인쇄(포토샵 기본 설정) = pt💡 화면(Web) 작업 = px 🛠 단위를 px로 바꾸는 방법📍 1단계. 환경설정 열기윈도우: 편집(Edit) → 환경설정(Preferences) → 단위 및 눈금자(Units & Rulers)맥: Photoshop → Preferences → Units &..

웹 레이아웃을 만들다 보면 display: flex와 display: grid,둘 중에 어떤 걸 써야 할지 고민될 때가 많죠?둘 다 정말 강력한 CSS 레이아웃 도구지만,방식이 완전히 다르고, 잘 쓰면 작업 효율이 확 달라져요.이번 글에서는 Flexbox와 CSS Grid의 차이점, 언제 어떤 상황에서 쓰면 좋은지 쉽게 정리해볼게요!✅ 둘 다 레이아웃 도구예요! 그런데 구조가 달라요항목FlexboxGrid정렬 방식1차원(한 줄 또는 한 열)2차원(행과 열 동시에)사용 목적콘텐츠 흐름대로 정렬정확한 영역 배치배치 기준아이템 순서 중심위치 중심 (그리드 영역 지정)대표 용도메뉴바, 버튼 정렬, 카드 나열 등전체 페이지 레이아웃, 포털형 구성 등 🧭 Flexbox가 잘 어울리는 상황은?Flexbox는 콘텐츠..

1. 디버깅(Debugging)이란?디버깅은 프로그램 속의 오류(Bug)를 찾아 고치는 과정이에요.VS Code는 아주 강력한 디버깅 기능을 갖추고 있어서, 오류 위치를 직접 확인하고 변수 상태도 볼 수 있어요.2. VS Code에서 디버깅 시작하기왼쪽 사이드바의 벌레 아이콘(🐞) 또는 실행 및 디버그 클릭→ 언어에 맞는 디버거가 없으면 VS Code가 자동으로 설치 안내를 해줘요.3. launch.json 파일 설정 (자동 생성 가능)디버깅 환경을 세팅하면 .vscode/launch.json 파일이 만들어져요.(자동으로 생성되기 때문에 초보자는 설정 없이 시작해도 OK!)예시 (JavaScript 디버깅 설정):{ "version": "0.2.0", "configurations": [ { ..

1. 터미널이란?**터미널(Terminal)**은 컴퓨터와 대화하는 방법 중 하나예요.명령어를 직접 입력해서 프로그램을 설치하거나 파일을 관리할 수 있어요.그래픽 버튼 없이도 모든 걸 조작할 수 있는 도구!2. VS Code에서 터미널 여는 방법단축키: Ctrl + (백틱)또는 상단 메뉴에서[터미널 > 새 터미널] 클릭3. 기본 명령어 실습 (Git Bash 기준)✅ 현재 위치 확인pwd ✅ 폴더 안 파일 목록 보기ls ✅ 새 폴더 만들기mkdir test-folder ✅ 폴더 이동cd test-folder ✅ 상위 폴더로 이동cd .. 4. 자주 쓰는 꿀팁Tab 키: 자동완성 기능! 디렉토리 이름 입력 시 매우 유용방향키 ↑↓: 이전에 입력했던 명령어 불러오기clear: 화면 깨끗하게 정리5. 명령어 ..

1. Git 설치 여부 확인먼저 Git이 설치되어 있어야 VS Code에서도 Git을 사용할 수 있어요!VS Code 터미널 열기 (단축키: `Ctrl + ``)아래 명령어 입력git --version 설치되어 있다면 버전 정보가 출력됩니다. 없다면 Git 공식 사이트에서 설치하세요.2. GitHub 계정 만들기 (이미 있다면 생략 가능)https://github.com/ 접속우측 상단 Sign up 클릭이메일, 비밀번호 입력 후 계정 생성3. 로컬 Git 저장소 만들기VS Code에서 만든 웹 프로젝트 폴더 열기터미널에서 다음 명령어 실행git init 3. 변경된 파일을 Git이 추적할 수 있도록 스테이징git add . 4. 커밋 메시지와 함께 첫 커밋git commit -m "처음 ..

공개로 만든 저장소, 비공개로 바꾸고 싶다면 이렇게 하세요!✅ Public과 Private의 차이점 먼저 알아볼까요?구분 Public 저장소 Private 저장소 접근 권한누구나 접근 가능초대된 사람만 접근 가능검색 노출GitHub 검색 및 Google 검색 가능검색에 노출되지 않음오픈소스 공유누구나 포크, 이슈, PR 가능초대한 사람만 협업 가능보안민감 정보 노출 주의 필요민감한 내용 보호에 유리💡 Tip:팀 협업이나 오픈소스를 위한 저장소는 Public이 적합하지만, 개인 프로젝트나 민감한 정보를 담고 있는 경우에는 Private으로 설정하는 게 좋아요.🔁 Public 저장소를 Private으로 바꾸는 방법GitHub에 로그인 후, 비공개로 바꾸고 싶은 저장소로 이동해요.👉 GitHub 접속 ..

1. 새로운 폴더 만들기바탕화면이나 원하는 위치에 새 폴더 생성이름 예: my-first-websiteVS Code 실행 후 [파일 > 폴더 열기] 클릭 → 방금 만든 폴더 선택 2. 새 파일 만들기폴더가 열리면 왼쪽 사이드바에서우클릭 > 새 파일 선택다음 3개의 파일을 만듭니다:index.html style.css script.js 3. HTML 기본 구조 작성index.html 파일에 다음 코드 입력: Hello, VS Code! 눌러보세요 4. CSS로 디자인 추가style.css 파일에 다음 코드 입력:body { font-family: 'Arial'; text-align: center; padding-top: 100px; background-color: #f0f8ff;}h1 ..