jonbeo 님의 블로그

1. Visual Studio Code 첫 화면 살펴보기처음 VS Code를 실행하면 깔끔한 화면이 딱 나타나요.너무 복잡해 보일 수도 있지만, 핵심 구성만 알면 금방 익숙해질 수 있어요! 2. 기본 구성요소 설명🔹 사이드바(Side Bar)왼쪽에 위치하며 프로젝트를 탐색하거나, Git, 확장 프로그램 등을 사용해요.탐색기(Explorer): 폴더/파일 구조를 한눈에검색(Search): 전체 프로젝트 내에서 키워드 검색소스 제어(Git): Git 상태 확인 및 커밋 가능확장(Extensions): 유용한 플러그인 설치🔹 에디터(Editor)화면 가운데에 위치하며 실제 코드를 작성하는 공간이에요.파일을 더블 클릭하면 탭 형식으로 열려요.🔹 상태 표시줄(Status Bar)하단에 위치하며 현재 언어, ..

💬 GitHub Desktop으로 커밋과 푸시, 브랜치 만들기까지– 마우스 클릭만으로도 실전 깃 사용법 완성!🌱 들어가며이제 우리는 GitHub Desktop에서저장소도 만들고, 복제도 해봤죠?이제부터는 진짜 실전 작업에 돌입해요!오늘은✅ 커밋(Commit)✅ 푸시(Push)✅ 브랜치 만들기와 전환까지 GitHub Desktop으로 쉽게 해볼 거예요! 🚀📄 1. 파일 변경 후 커밋하기1. 저장소에 파일 추가 or 기존 파일 수정→ 파일이 변경되면 GitHub Desktop이 자동 감지해요 2. 커밋 메시지 작성Summary: 변경 내용을 짧게 요약Description: (선택사항) 좀 더 자세한 설명3. Commit to main 버튼 클릭! ✅ 이걸로 로컬(내 컴퓨터)에 변경 사항이 저장된 거예..

이전 포스팅 에서는 HTML이 뭔지, 누가 쓰는지 알아봤습니다!이번 포스팅에서는 HTML 문서의 기본 뼈대를 설명 해드리겠습니다.앞으로 작성할 HTML은 모두 이 기본 구조 안에서 만들어집니다!🧱 HTML 문서의 기본 구조란?HTML 문서는 웹페이지의 기본 설계도예요.아래는 가장 기본적인 HTML 문서 구조예요: 안녕하세요! 이것은 나의 첫 HTML 문서예요. 🔍 태그 하나하나 알아보기✅ 이 문서는 HTML5로 작성되었다는 걸 브라우저에게 알려주는 선언이에요.한 번만 쓰면 되고, 항상 맨 위에 있어야 해요!✅ ~ 전체 HTML 문서를 감싸는 가장 바깥 태그예요.모든 내용은 이 안에 들어가야 해요.✅ 웹페이지에 직접 보이진 않지만 중요한 정보들을 담는 공간이에요.예: 페이지 제목(..

📁 GitHub Desktop으로 저장소 만들기와 복제하기– 내 컴퓨터에서 깃허브까지, 첫 프로젝트를 시작하겠습니다!🌱 들어가며이제 GitHub Desktop도 설치했고, 로그인도 완료했죠?그럼 본격적으로 저장소(Repository) 를 만들어서내 프로젝트를 GitHub에 연결해볼 차례예요! 🎉오늘은✅ 내 컴퓨터(Local)에서 새 저장소 만들기✅ GitHub에 올리기(Push)✅ 다른 저장소를 복제해서 가져오기(Clone)까지 실습해볼 거예요.🆕 새 저장소 만들기 (로컬 → 깃허브)1. GitHub Desktop 실행 후→ 좌측 상단 File 메뉴 → New Repository 클릭2. 저장소 정보 입력Name: 저장소 이름 (예: my-first-repo)Description: 설명은 선택Lo..

🧑‍💻 GitHub Desktop이란?– 설치부터 첫 실행까지, 깃허브 데스크탑 입문 가이드🌱 들어가며“명령어 너무 어렵다...”“Git 배우고 싶은데 뭔가 복잡해 보여...”이런 생각 한 번이라도 해봤다면,GitHub Desktop이 여러분을 위한 최고의 도구일지도 몰라요!오늘은 GitHub Desktop이 뭔지, 왜 쓰는지, 그리고처음 설치하고 실행하는 방법까지 친절하게 안내해드릴게요 🙌🧩 GitHub Desktop이란?GitHub Desktop은 Git과 GitHub을 더 쉽고, 더 눈에 보이게 사용할 수 있도록 만든 무료 데스크톱 앱이에요. 명령어 한 줄도 몰라도✅ 저장소 만들기✅ 파일 변경 추적✅ 커밋하고 푸시하기✅ 브랜치 만들기이 모든 걸 마우스 클릭만으로 할 수 있어요!💻 GitH..

1. Visual Studio Code 설치 준비하기Visual Studio Code(이하 VS Code)는 Windows, macOS, Linux 모두 지원해요.설치를 위해 아래 공식 사이트에 접속해주세요.👉 https://code.visualstudio.com/2. Windows에서 설치하는 방법홈페이지 접속 후 Windows 버튼 클릭다운로드가 시작되면 .exe 파일 실행설치 마법사가 실행되면 다음(next) → 동의 → 설치 → 완료3. macOS에서 설치하는 방법홈페이지 접속 후 macOS 버튼 클릭.zip 파일이 다운로드됨압축 해제 후, Visual Studio Code.app을 응용 프로그램 폴더에 드래그4. Linux에서 설치하는 방법홈페이지에서 Linux 탭 클릭사용하는 배포판에 맞는 ..

1. Visual Studio Code란?Visual Studio Code는 마이크로소프트에서 만든 무료 코드 편집기예요.처음 개발을 시작하는 분들부터, 현업 개발자까지 널리 사용하는 대표적인 툴이죠.다양한 프로그래밍 언어 지원가볍지만 강력한 기능Git, GitHub과 쉽게 연동 가능확장 프로그램을 통한 무한한 기능 추가Visual Studio Code2. 누가 사용할까?VS Code는 아래와 같은 사람들에게 정말 유용해요.코딩 입문자: HTML, CSS, JavaScript 공부할 때웹/앱 개발자: 프로젝트 관리와 협업에 필수데이터 분석가: Python, Jupyter Notebook 사용 가능GitHub 사용자: 깃과 깃허브를 연동해서 편하게 커밋/푸시3. 공식 사이트로 이동하기아래 링크를 클릭하면 ..

웹페이지를 만드는 기초 언어인 HTML과 CSS를 아주 쉽게 하나씩 설명 해보는 포스팅을 할까 합니다 😊첫 번째 포스팅은 HTML이란 무엇인지, 누가, 어떤 상황에서 사용하는지를 천천히 알아보도록 할게요!✅ HTML이란?HTML은 HyperText Markup Language의 줄임말이에요. 말 그대로, 하이퍼텍스트를 작성하기 위한 마크업 언어랍니다! 📌 여기서 잠깐!하이퍼텍스트란?👉 다른 페이지나 정보로 연결되는 문서예요. 우리가 인터넷에서 링크를 클릭해서 다른 페이지로 이동하잖아요? 그게 하이퍼텍스트예요!✅ HTML은 왜 필요할까?우리가 보는 모든 웹사이트는 결국 HTML로 구성되어 있어요.예를 들어, 네이버, 유튜브, 구글, 인스타그램 같은 사이트도 처음에는 HTML로 기본 뼈대를 만들어요.H..

✅ GitHub에서 Pull Request로 기여하기– 실습으로 배우는 오픈소스 협업의 첫걸음✨ 들어가며GitHub에서 오픈소스 프로젝트에 기여하는 방법 중가장 핵심적인 기능이 바로 Pull Request(PR) 에요.“PR 좀 보내주세요~”라는 말, 한 번쯤 들어봤죠?오늘은 초보자도 이해할 수 있도록실습 중심으로 차근차근 Pull Request 과정을 알려드릴게요!🧩 1. Pull Request란?Pull Request는 내가 수정한 코드를 원래 프로젝트에 반영해달라고 요청하는 것!오픈소스 프로젝트는 수많은 사람이 함께 작업하기 때문에,직접 수정하는 게 아니라 "이런 수정 했는데 확인해줄래요?" 하고리뷰를 요청하는 방식으로 기여해요.🛠️ 2. Pull Request 실습 흐름 한눈에 보기다른 사람의..

✅ GitHub에서 프로젝트 협업 시작하기– Fork, Issues, Discussions 이해하기✨ 들어가며GitHub는 단순한 코드 저장소가 아니에요.전 세계 개발자들이 협업하고 소통하는 커뮤니티 플랫폼이기도 하죠!이번 포스트에서는 GitHub에서 협업할 때 꼭 알아야 할Fork, Issues, Discussions 기능들을차근차근 쉽게 설명해드릴게요 😊🍴 1. Fork – 다른 사람의 프로젝트를 내 것으로 복사하기❓ Fork란?"Fork는 다른 사람의 저장소를 내 계정으로 복사하는 것"내가 직접 수정하거나 실험해볼 수 있는 나만의 사본을 만드는 거예요!📌 언제 사용하나요?오픈소스 프로젝트에 기여하고 싶을 때실험용으로 코드 구조를 바꿔보고 싶을 때협업을 위해 원본을 훼손하지 않고 수정하고 싶을 ..