지식루프

GitHub에 있는 프로젝트를 내 컴퓨터로 가져와서 실행하는 과정은 개발을 시작할 때 반드시 익혀야 하는 기본 단계입니다. 하지만 처음 접하시는 분들은 “어디서부터 시작해야 하는지”, “왜 폴더가 두 개 생기는지”, “연결은 제대로 된 건지” 등 여러 부분에서 혼란을 겪는 경우가 많습니다.이 글에서는 GitHub에 있는 프로젝트를 로컬 환경에 가져오는 과정을 초보자 기준에서 단계별로 정확하게 설명드리겠습니다.1. 목표이번 작업의 목표는 다음과 같습니다.GitHub에 있는 프로젝트를내 컴퓨터로 가져오고실행까지 확인하는 것즉, 단순히 파일을 다운로드하는 것이 아니라, GitHub 저장소와 연결된 상태로 프로젝트를 가져오는 것이 핵심입니다.2. 전체 흐름 이해하기전체 과정은 크게 세 단계로 나눌 수 있습니다...

웹페이지 기획과 사용자 경험(UX) 디자인, 그리고 실제 구현 과정에서 자주 쓰이는 핵심 용어들을 기능별로 분류하여 정리해 드립니다.1. 콘텐츠 탐색 및 배치 (Navigation & Layout)페이지네이션 (Pagination): 콘텐츠를 여러 페이지로 나누어 배치하고, 하단에 숫자 버튼(1, 2, 3...)을 두어 이동하게 하는 방식입니다. 게시판이나 검색 결과에서 흔히 볼 수 있습니다.무한 스크롤 (Infinite Scroll): 사용자가 페이지 하단에 도달할 때마다 새 콘텐츠를 자동으로 불러오는 방식입니다. 인스타그램이나 유튜브처럼 끊김 없는 탐색이 중요할 때 사용합니다.CTA (Call To Action): '구매하기', '회원가입'처럼 사용자의 클릭이나 특정 행동을 유도하는 버튼이나 문구를 ..

border-radius 값에 따라 테두리가 어떻게 변화하는지 바로 테스트해보세요. 아래 링크에서 확인https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Properties/border-radius

Part 2: DOM 트리 구조 이해하기DOM은 트리(Tree) 구조입니다왜 트리 구조를 알아야 할까요? DOM의 구조를 이해해야 요소들 사이를 이동하고, 원하는 요소를 찾고, 관계를 파악할 수 있기 때문입니다.HTML 예시 html 제목 문단 1 문단 2 ```#### DOM 트리로 표현```Document (최상위) │ └─── html (루트 요소) ├─── head │ └─── title │ └─── "내 웹사이트" (텍스트 노드) │ └─── body ├─── h1 │ └─── "제목" (텍스트 노드) ..

JavaScript DOM 완벽 가이드: 웹페이지를 살아있게 만드는 기술들어가며: 왜 DOM을 배워야 할까요?지금까지 JavaScript의 기본 문법을 배웠습니다. 변수, 함수, 객체, 배열... 하지만 솔직히 말하면, 이것들만으로는 웹페이지를 움직이게 할 수 없습니다.질문을 던져봅시다:버튼을 클릭하면 텍스트가 바뀌게 하려면?사용자가 입력한 값을 읽어오려면?화면에 새로운 요소를 추가하려면?스타일을 동적으로 바꾸려면?답은 DOM입니다! DOM을 이해하지 못하면, JavaScript는 그저 콘솔에 로그만 찍는 언어로 끝나버립니다. DOM을 이해하면, 웹페이지를 살아있는 인터랙티브한 애플리케이션으로 만들 수 있습니다.이제 DOM의 세계로 들어가 봅시다.Part 1: DOM이란 무엇인가? (개념 이해)DOM의 ..

JavaScript console.log(): 개발자의 필수 도구지금까지 우리가 사용한 방법의 문제점은?지금까지 우리는 값을 출력하기 위해 alert()를 사용해 왔습니다. javascriptlet age = 32;let adultYears = age - 18;alert(adultYears); // 팝업창으로 출력alert()의 장단점장점:✅ 화면에 바로 결과를 볼 수 있습니다✅ 사용하기 간단합니다단점:❌ 매번 확인 버튼을 클릭해야 합니다❌ 여러 개를 출력하면 하나씩 닫아야 합니다❌ 작업 흐름이 중단됩니다❌ 코드를 테스트할 때 불편합니다실제로 경험해 보셨나요? javascriptalert("첫 번째 값"); // 확인 클릭alert("두 번째 값"); // 또 확인 클릭alert("세 번째 값"..

JavaScript 메서드(Method): 객체 안의 함수 활용하기지금까지 배운 것들을 다시 정리해 볼까요?여러분은 이제 JavaScript의 핵심 개념들을 배웠습니다:✅ 값(Values): 문자열, 숫자, 배열, 객체✅ 변수(Variables): 값을 저장하는 상자✅ 함수(Functions): 재사용 가능한 코드 블록✅ 매개변수(Parameters): 함수의 입력값✅ 반환값(Return values): 함수의 출력값✅ 객체(Objects): 라벨과 값을 쌍으로 묶은 데이터 구조이제 이 모든 개념을 연결하는 새로운 개념을 배워볼 시간입니다!객체에 대해 다시 떠올려 볼까요?지금까지 객체는 관련된 데이터를 그룹화하는 데 사용했습니다. javascriptlet job = { title: "developer..

웹에서 가운데 정렬을 할 때, 초보자가 가장 많이 헷갈리는 부분이 바로margin: auto와 text-align: center의 차이입니다.1. margin: auto의 원리 – 블록 요소를 가운데 정렬main { width: 700px; margin: 32px auto;} main 같은 블록 요소는 기본적으로 왼쪽부터 쌓임.그런데 width를 주면 요소가 화면 전체를 차지하지 않고 남는 공간이 생김.margin-left: auto; margin-right: auto;는 남는 공간을 좌우로 균등하게 분배해서, 블록 요소 자체가 화면 가운데로 이동함.👉 즉, 블록 요소 자체를 정렬하는 방법이에요.2. text-align: center의 원리 – 내부 텍스트/인라인 요소 정렬main { text-a..

1. 인라인 요소의 두 종류✅ 대체 인라인 요소 (Replaced Inline Elements)의미: 내부 콘텐츠가 브라우저가 직접 렌더링하지 않고 외부에서 불러와 대체되는 요소예요.예시: : 이미지를 불러옴, : 영상·음성을 불러옴 : 다른 문서를 불러옴 : 브라우저가 렌더링하는 입력창👉 이 요소들은 "내용이 외부에 의해 대체"되기 때문에 width, height 같은 수직·수평 크기 속성 적용 가능해요.예를 들어 는 width: 100px; height: 200px; 적용이 됩니다.✅ 비대체 인라인 요소 (Non-replaced Inline Elements)의미: 요소 안의 텍스트를 브라우저가 직접 렌더링하는 요소.예시:, 등👉 이들은 기본적으로 줄(line) 안에 텍스트처럼 배치돼요.그래서 ..

1. margin collapse란?HTML에서 블록 요소(예: , , 등)는 위아래로 쌓이면서 페이지를 구성합니다.이때, 두 블록 요소가 만나면 위쪽 margin과 아래쪽 margin이 합쳐지지 않고, 더 큰 값 하나만 적용됩니다.이 현상을 **margin collapse (마진 겹침)**이라고 합니다. 예시:첫 번째 두 번째👉 두 요소 사이의 간격은 20px + 30px = 50px이 아니라, 30px만 적용됩니다. 2. 왜 이런 규칙이 생겼을까?CSS는 "문서 레이아웃을 단순화"하기 위해 이런 규칙을 만들었어요.만약 margin을 다 더한다면, 문단(p)마다 기본 margin이 있어서 줄 간격이 불필요하게 과도하게 넓어질 수 있습니다.따라서 겹치는 margin은 가장 큰 값만 남기자는 규칙이 도..