최홍식입니다

querySelector 란?

최홍식입니다 — Sat, 9 Aug 2025 22:04:31 +0900

querySelector

querySelector는 DOM에서 CSS 선택자를 사용해서 요소를 찾는 메서드이며, 브라우저가 제공하는 Document API 입니다.

CSS 선택자를 인자로 넣으면, 문서에서 처음 매칭되는 하나의 요소를 반환합니다.
- CSS 선택자: #id, .class, tag, div > p
매칭되는 요소가 없으면 null 을 반환합니다.

document.querySelector(선택자)

왜 undefined 가 아닌 null 을 반환할까?
null 은 값이 없다는 명시적인 의미를 갖고 있고, undefined 는 변수에 값이 할당되지 않았거나 정의되지 않은 경우를 의미한다.

예시

HTML:

<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>
<p id="message">안녕하세요</p>

JavaScript:

// ID 선택자
const msg = document.querySelector("#message");
console.log(msg.textContent); // "안녕하세요"

// 클래스 선택자
const firstBox = document.querySelector(".box");
console.log(firstBox.textContent); // "첫 번째 박스"

// 태그 선택자
const pTag = document.querySelector("p");
console.log(pTag.textContent); // "안녕하세요"

.box 처럼 여러 개가 있어도 첫 번째 요소만 가져옵니다.

querySelectorAll 은 뭘까?

CSS 선택자를 사용해서, 조건에 맞는 모든 요소를 한 번에 찾는 메서드입니다.

querySelector → 매칭되는 첫 번째 요소만 반환합니다.
quertySelectorAll → 매칭되는 모든 요소를 반환합니다.

장점

CSS 선택자를 그대로 사용하기 때문에 직관적입니다.
각각의 선택자에 맞는 함수 사용 없이 querySelector로 통일할 수 있습니다.
- getElementsById, getElementsByClassName 등
복잡한 구조도 쉽게 찾을 수 있습니다.
- document.querySelector("div > p.red")

Git 셋팅하기 (Windows)

최홍식입니다 — Sun, 3 Aug 2025 23:39:38 +0900

Windows 운영체제를 사용하는 PC에서 Git을 사용하기 위해 설치하는 방법을 정리한 글입니다.

Git 설치

아래 링크에 접속하여 Windows 설치 파일을 다운로드 받습니다.

Git 다운로드 링크

Git 다운로드 페이지

Git for Windows/x64 Setup 다운로드 받기.
- PC에 탑재된 CPU가 Intel 또는 AMD 인 경우 위 파일로 다운로드 받습니다. 일반적으로 Intel 또는 AMD 입니다.

Git 설치 단계

다운로드한 설치 파일 실행을 실행하면 아래 이미지와 같은 창이 확인됩니다. 이후 [Next] 버튼을 클릭합니다.

설치 프로그램 실행 시 초기 화면

설치 경로를 설정하는 부분인데 기본 경로를 사용하기 때문에 [Next] 버튼을 클릭합니다.

Git 설치 경로는 기본 설정된 경로로 설치합니다.

설치 과정에서 Git Bash는 반드시 포함하여 설치해 주세요.
- macOS/리눅스에서 사용하는 명령어를 Windows 에서도 사용하기 위해 꼭 필요합니다.
- 기본 설정으로 포함되어 설치되기 때문에 그대로 설치하시면 됩니다.

이후 나머지 설정도 모두 기본 설정으로 진행 후 맨 마지막 단계에서 [Install] 버튼을 눌러주면 설치됩니다.

Git 설치 마무리 단계 화면

키보드에서 Windows 키를 누르고, git bash 를 검색하면 이미지와 같은 프로그램을 확인할 수 있습니다.

Cursor/VSCode 기본 터미널 설정

Cursor와 VSCode 는 단축키 및 UI가 비슷하여 Cursor 에서 설정한 이미지를 사용하겠습니다.

Cursor 또는 VSCode를 실행하고, Ctrl + Shift + P 를 동시에 누르고 "Select Default Profile" 을 입력합니다.

Cursor 전체화면

Cursor 전체화면에서 강조한 부분을 확대한 이미지

이후 Git Bash 를 클릭하면 기본 터미널로 Git Bash 가 선택됩니다.

기본 터미널로 Git Bash 선택하기

이미지와 같이 우측 상단에 있는 가로로 화면이 분할된 버튼을 클릭하면, Cursor 하단에서 실행된 터미널 창을 확인할 수 있습니다.
- git --version 을 입력하여 정상 동작하는지 테스트도 해봅니다.

CLI vs GUI

최홍식입니다 — Sun, 3 Aug 2025 18:27:26 +0900

CLI vs GUI

CLI (Command Line Interface)

정의

텍스트 기반 명령어를 입력하여 컴퓨터와 상호 작용하는 인터페이스를 말합니다.

사용 방법

Windows: 명령 프롬프트(CMD), PowerShell
macOS/Linux: shell

예시 명령어

# 현재 디렉터리 파일 목록 보기
ls

# 현재 위치 확인하기
pwd

맥북에서 터미널 실행 및 명령어 입력 결과 확인

특징

빠르고 효율적인 작업 가능
컴퓨터 자원(리소스)을 적게 사용함
반복 작업을 스크립트로 자동화할 수 있음
명령어에 대한 학습이 필요함

⭐️ 추가적인 용어 설명
- 리소스(Resource)
컴퓨터의 성능이나 자원(메모리, CPU)을 의미합니다.

- 스크립트(Script)
컴퓨터가 이해할 수 있는 언어로 작성된 명령어의 묶음을 의미합니다.

GUI (Graphical User Interface)

정의

사용자가 마우스나 터치 등을 사용해, 눈에 보이는 버튼이나 아이콘 같은 시각적 요소로 쉽게 컴퓨터와 상호작용할 수 있는 인터페이스를 말합니다.

예시

일반적인 컴퓨터 사용 환경은 대부분 GUI로 되어 있습니다.

파일 삭제
- 삭제할 파일을 마우스로 끌어 (드래그해서) 휴지통 아이콘 위에 놓으면 파일이 삭제됩니다.
프로그램 실행
- 바탕화면의 프로그램 아이콘을 두 번 연속 클릭(더블 클릭)하면 프로그램이 실행됩니다.

GUI 환경에서 파일 삭제 및 프로그램 실행 방법

특징

직관적이고 사용하기 쉬움
복잡한 세부 작업을 조정하기 어려울 수 있음
화면 그래픽으로 인해 리소스를 비교적 많이 사용함

CLI와 GUI 비교하기

CLI
- 서버 관리, 개발, 시스템 관리와 같이 전문적이고 반복적인 작업에 사용
- 자동화 및 빠른 처리가 필요한 경우
GUI
- 일반 사용자들이 일상적으로 컴퓨터를 사용할 때
- 직관적이고 시각적으로 명확한 처리가 필요한 경우

HTML 기초 개념 정리

최홍식입니다 — Thu, 31 Jul 2025 20:41:47 +0900

HTML(HyperText Markup Language)

HTML 은 웹 페이지의 구조를 정의하는 마크업 언어입니다.

하이퍼 텍스트(HyperText)

하이퍼 텍스트란 다른 문서나 웹 페이지로 연결되는 텍스트를 의미합니다. 흔히 어떤 텍스트를 누르면 특정 링크로 이동되는 것을 볼 수 있는데, 이걸 하이퍼 텍스트라고 합니다.

아래 예시의 MDN HTML 문서를 클릭하면, 특정 페이지로 이동되는 걸 확인할 수 있습니다.

더 자세한 정보는 MDN HTML 문서에서 확인하세요.
실제 HTML 로 작성된 코드는 아래와 같습니다.

// HTML 작성 예시
<p>더 자세한 정보는 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML 문서</a>에서 확인하세요.</p>

정보의 연결성

하이퍼텍스트 덕분에 웹은 단순한 문서의 모음이 아닌 정보가 서로 연결된 네트워크로 형성될 수 있습니다.

웹의 뼈대는 하이퍼 텍스트다 !
최초에 웹을 만든 팀 버너스 리는 문서들을 서로 연결하는 방식으로 웹을 구상했고, 하이퍼텍스트는 이 아이디어의 뼈대입니다.

마크업(Markup)

마크업은 텍스트에 의미나 구조를 부여하는 표시를 말합니다. 평범한 텍스트에 “이건 제목이야”, “이건 문단이야”, “이건 이미지야” 등 의미를 부여해서 브라우저가 이해할 수 있도록 만드는 것입니다.

마크업 예시

아래 예시에서 <h1> 은 “이건 제목(heading)이야 !” 라고 알려주는 마크업 태그라고 합니다.

<h1>이건 제목이야</h1>

이처럼 마크업은 평범한 텍스트에 태그라는 것으로 감싸면 의미를 갖는 텍스트가 된다는 것을 배웠습니다.

태그 (Tag)

태그는 위에서 설명한 것 처럼 콘텐츠를 감싸서 의미를 정의하는 것입니다.

태그의 종류

쌍태그 (Paired Tags)

쌍태그는 두 개의 태그로 하나의 콘텐츠를 감싸는 구조입니다.

<p>문단 내용</p>

<p> : 열림 태그 (Opening Tag) - 태그의 시작
문단 내용 : 콘텐츠 - 사용자에게 보여지는 정보
</p> : 닫힘 태그 (Closing Tag) - 태그의 끝
- 태그 이름 앞에 / 가 붙으면 닫는 것을 의미합니다.

빈 태그 / 단일 태그 (Self-closing Tags)

단일 태그는 콘텐츠를 감싸지 않고, 열림 태그만 있고 닫힘 태그는 없는 구조입니다.

<img src="cat.jpg" alt="고양이 사진"> // 이 태그 하나로 이미지를 삽입하는 역할을 한다.
<br>
<hr>
<input type="text">

쌍태그와 달리, 콘텐츠 없이 태그 하나만으로 의미를 전달합니다. 이런 태그들은 태그 자체에 의미가 부여되어 있고, 콘텐츠가 필요하지 않습니다.

빈 요소(Void Elements)
콘텐츠를 포함하지 않고, 태그 자체로 의미가 있는 요소를 의미합니다.
- 콘텐츠가 없기 때문에 불필요한 닫힘 태그는 생략됩니다.
- MDN 참고 링크

자주 사용하는 태그

태그	의미	예시
<h1>~<h6>	제목 (숫자가 작을수록 중요)	<h1>제목</h1>
<p>	문단	<p>문단입니다</p>
<a>	하이퍼링크	링크
<img>	이미지	<img src="img.jpg" alt="이미지">
<ul>, <li>	리스트 (순서 없음)	<ul><li>아이템</li></ul>
<div>	구역 (의미 없음)	<div>묶음</div>
<span>	인라인 요소 묶음	<span>강조</span>

요소 (Element)

요소는 태그가 콘텐츠를 감싸면서 의미를 부여한 하나의 단위입니다. 기본적으로 열림 태그 + 콘텐츠 + 닫힘 태그로 구성되며, 이 전체 구조를 요소라고 부릅니다.

<p>나는 문단입니다.</p>

또한 콘텐츠가 필요 없는 단일 태그도 하나의 요소로 간주됩니다.

<input type="text">

요소의 중첩 (Elements Nesting)

HTML 요소는 또 다른 요소를 내부에 포함할 수 있습니다. 이를 중첩이라고 하며, 올바른 순서로 열고 닫는 것이 굉장히 중요합니다.

<p>문단 중 <strong>강조된 내용</strong>이 있습니다.</p>

<strong> 요소는 <p> 요소 안에 중첩되어 있습니다.
중첩된 태그는 열린 순서의 역순으로 닫아야 합니다.

아무 태그나 막 중첩할 수 있을까?

HTML에서는 콘텐츠 카테고리에 따라, 어떤 요소 안에 어떤 태그를 사용할 수 있는지가 명확히 정의되어 있습니다.

예를 들면, 아래와 같이 <ul> 태그 안에는 반드시 <li> 태그만을 사용할 수 있습니다.

<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>

만약, 아래와 같이 코드를 작성한다면 HTML 문법 오류가 발생합니다.

<ul>
  <p>문단</p>  <!-- ❌ ul 안에는 p 불가 -->
</ul>

이번 글에서는 간단하게 이런게 있다는 것 정도만 인지해 주시고, 콘텐츠 카테고리와 관련된 내용은 따로 글을 작성하도록 하겠습니다.

HTML 콘텐츠 카테고리란?
HTML 요소는 단순히 나열만 하는 것이 아니라, 어떤 종류의 콘텐츠인지, 어디에 사용해야 하는지에 따라 정해진 카테고리로 분류됩니다. 의미 있고 문법적으로 올바른 HTML을 작성하기 위해서는 이 카테고리 구분을 정확히 이해하는 것이 매우 중요합니다.
- MDN 참고 링크

마무리 용어 요약

하이퍼텍스트: 다른 문서로 연결되는 텍스트
마크업: 텍스트에 의미/구조를 부여하는 표시
태그: 콘텐츠를 감싸는 마크업 구문
요소: 열림 태그 + 콘텐츠 + 닫힘 태그로 구성된 HTML의 기본 단위
단일 태그: 콘텐츠 없이 역할(출력 또는 기능)만 수행하는 태그이며, 이 또한 하나의 요소입니다.

MST(Multi-Stream Transport), 데이지 체인(Dasiy Chain)

최홍식입니다 — Wed, 9 Jul 2025 19:47:32 +0900

IT 문의 중 “지급받은 모니터로 데이지 체인 구성이 가능한지”에 대한 질문을 받았습니다. 이 과정에서 MST와 데이지 체인이라는 개념을 처음 접하게 되어 내용을 정리해보는 시간을 갖고자 합니다.

MST란?

MST는 Multi-Stream Transport의 약자로, DisplayPort 1.2 표준에 도입된 기술입니다.
이 기능을 사용하면 하나의 DP(DisplayPort) 포트로 여러 대의 모니터를 직렬(데이지 체인) 방식으로 연결할 수 있습니다.

일반적으로는 모니터 한 대당 노트북/PC에 각각 케이블을 연결해야 하지만, MST를 활용하면 한 대의 모니터만 노트북/PC에 연결한 뒤, 모니터들끼리 연속적으로 연결하여 다중 화면 출력을 구성할 수 있습니다.

참고: MST를 사용하려면 노트북과 모니터가 모두 DP 1.2 이상 버전의 포트를 탑재하고 있어야 합니다.

데이지 체인(Daisy Chain)이란?

데이지 체인은 여러 하드웨어 장치들이 연속적으로 연결된 구성을 뜻합니다.

MST를 사용하면 모니터들을 하나의 사슬처럼 연결하여 다중 화면 출력을 구현할 수 있습니다.

데이지 체인 구성 방식에는 두 가지 유형이 있으며, 아래와 같은 출력 포트를 통해 구성할 수 있습니다.

DP(DisplayPort) 1.2 이상
Thunderbolt

우리 회사는 어떤 모니터를 지급할까?

현재 회사에서 지급되는 기본 모니터는 Dell 2725QE와 Dell 2723QE입니다. (이외에도 다양한 모델이 있지만, 생략하겠습니다.)

Dell 2723QE

Dell 2723QE는 DP 1.2 출력 포트를 탑재하고 있어 MST 기능을 활용해 데이지 체인 구성이 가능합니다.

단점으로, 맥북은 Thunderbolt를 통한 데이지 체인만 지원하기 때문에, 해당 모델은 윈도우 노트북만 MST를 활용할 수 있습니다.

아! 물론, 윈도우 노트북도 Thunderbolt 4 포트를 탑재하고 있어 DP 1.4를 지원하기 때문에 MST 기능을 통해 다중 모니터 연결이 가능합니다.

Dell 2725QE

Dell 2725QE는 Thunderbolt 4 출력 포트를 탑재하고 있어 MST 기능을 활용해 데이지 체인 구성이 가능합니다.

그래서 맥북도 해당 모니터를 통해 데이지 체인 구성이 가능합니다.

심지어 이 모델은 Dock 기능도 내장하고 있어 포트 확장이 필요할 때 별도의 허브나 CalDigit 독을 지급하던 기존 방식보다 훨씬 편리합니다.

그리고 CalDigit 독을 구매하지 않아도 되기 때문에 금액까지 아낄 수 있는 것 같지만 많은 기능을 제공하는 만큼 모니터가 비싸긴 합니다.

그래도 기업에서 대량으로 구매한다면 가격을 어느정도 맞출 수 있지 않을까 싶네요.

다만, Dell 2725QE는 무게가 상당하고, 모니터를 살짝만 건드려도 흔들림이 다소 크게 느껴집니다. 비싸기도 하죠.

갑자기 모니터 품평을 하게 되었는데, 아무튼 데이지 체인 방식으로 구성하니 케이블 관리가 훨씬 깔끔하고, 포트 연결이 줄어드는 점이 노트북을 사용하는 사람들에게는 정말 효율적인 것 같습니다.

최홍식입니다

querySelector 란?

querySelector

예시

querySelectorAll 은 뭘까?

장점

Git 셋팅하기 (Windows)

Git 설치

Git 설치 단계

Cursor/VSCode 기본 터미널 설정

CLI vs GUI

관련 용어 설명

인터페이스 (Interface)

터미널 (Terminal)

예시

정리

CLI (Command Line Interface)

정의

사용 방법

예시 명령어

특징

GUI (Graphical User Interface)

정의

예시

특징

CLI와 GUI 비교하기

HTML 기초 개념 정리

HTML(HyperText Markup Language)

하이퍼 텍스트(HyperText)

정보의 연결성

마크업(Markup)

마크업 예시

태그 (Tag)

태그의 종류

쌍태그 (Paired Tags)

빈 태그 / 단일 태그 (Self-closing Tags)

자주 사용하는 태그

요소 (Element)

요소의 중첩 (Elements Nesting)

아무 태그나 막 중첩할 수 있을까?

마무리 용어 요약

MST(Multi-Stream Transport), 데이지 체인(Dasiy Chain)

MST란?

데이지 체인(Daisy Chain)이란?

우리 회사는 어떤 모니터를 지급할까?

Dell 2723QE

Dell 2725QE