CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용할 수 있습니다. 이번 포스팅에서는 CSS의 선택자의 근간이 되는 기본 선택자에 대해서 알아보겠습니다. Type Selector CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector) 입니다. 타입 선택자를 사용하면 HTML 문서에서 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다. 예를 들어, 웹페이지 상의 모든 <strong> 요소의 글꼴 두께를 스
git switch는 브랜치를 전환하기 위해서 사용하는 Git 명령어입니다. Git 2.23 버전(2019년 8월)에서 처음 도입되었으며, 기존 git checkout 명령어의 브랜치 전환 기능을 좀 더 명확하고 안전하게 사용할 수 있도록 설계되었습니다. 레거시 명령어인 git checkout에 대해서는 별도 포스팅에서 다루고 있으니 참고 바랍니다. 브랜치 전환 가장 기본적인 사용법은 이미 존재하는 브랜치로 전환하는 것입니다. 예를 들어, main 브랜치로 전환하려면 다음과 같이 입력합니다. feature/user-auth라는 이름
HTML에는 모든 엘리먼트를 대상으로 사용할 수 있는 속성이 존재하는데요. 이를 전역 속성(global attribute)이라고 합니다. 이번 포스팅에서는 HTML에서 자주 사용되는 전역 속성에 대해서 알아보겠습니다. style 아무래도 많은 분들에게 가장 익숙한 HTML 전역 속성은 style일 것입니다. style 속성은 해당 엘리먼트에 인라인으로 CSS 스타일을 선언하고 싶을 때 사용합니다. class 두번째로 살펴볼 HTML 전역 속성은 class인데요. HTML 문서 상에서 여러 엘리먼트를 하나의 이름으로 묶고 싶을 때 사
모든 HTML 문서는 크게 head 영역과 body 영역으로 나누어 집니다. 이번 포스팅에서는 웹 개발을 하면서 간과하기 쉬운 head 영역에 대해서 살펴보려고 합니다. head 요소 HTML의 <head> 요소(element)는 <body> 요소와 함께 HTML 문서의 최상위 요소인 <html> 바로 아래 위치합니다. 브라우저 화면에 보여지는 영역을 감싸고 있는 <body> 요소와 달리 <head> 요소는 화면에 보여지지는 않지만 브라우저가 해당 HTML 문서에 대해서 알아야 할 정보를 감싸고 있습니다. 그럼, head 영역에는
Git으로 작업하다 보면 브랜치(branch)를 다룰 일이 정말 많죠. git branch 명령어를 사용하면 브랜치를 만들고 목록을 확인하고 이름을 바꾸거나 삭제할 수 있는데요. 이번 글에서는 git branch 명령어의 기본 사용법부터 실전 활용법까지 함께 살펴보겠습니다. 브랜치란? Git에서 브랜치는 특정 커밋을 가리키는 가벼운 포인터입니다. 새 커밋을 만들 때마다 현재 브랜치의 포인터가 자동으로 최신 커밋으로 이동하죠. 보통 Git 저장소를 처음 만들면 main(또는 master)이라는 기본 브랜치가 생성됩니다. 여기서 새로운
이번 포스팅에서는 터미널에서 간단한 명령어를 입력하여 웹 페이지나 API 데이터를 요청하고 받을 수 있는 HTTP 클라이언트 도구인 curl 커맨드에 대해서 알아보겠습니다. curl 커맨드 1998년에 만들어진 curl 커맨드는 Postman이나 Insomnia와 같이 다양한 기능과 화려한 UI를 제공하는 GUI 기반 HTTP 클라이언트가 계속해서 출시되는 와중에도 아직까지 꾸준히 사랑받고 있는 CLI 도구입니다. curl 커맨드는 리눅스나 macOS에 대부분의 경우 기본으로 탑재되어 있으며, 몇 가지 주요 옵션만 숙지하면 매우 간
팀 프로젝트를 하다 보면 동료가 올린 코드를 내 로컬에 반영해야 하는 상황이 자주 생기는데요. 이때 사용하는 명령어가 바로 git pull입니다. git pull은 원격 저장소(remote repository)의 최신 변경분을 가져와서 현재 브랜치에 합치는 과정을 한 번에 처리해줍니다. git fetch + git merge git pull은 사실 두 가지 명령어를 연달아 실행하는 것과 같습니다. 먼저 git fetch로 원격 저장소의 변경 내용을 로컬로 가져오고, 그 다음 git merge로 현재 브랜치에 합칩니다. 이 두 단계를
git fetch는 원격 저장소(remote repository)의 최신 변경분을 로컬로 가져오되, 현재 작업 중인 코드에는 영향을 주지 않는 명령어입니다. git pull과 혼동하기 쉬운데, git pull이 가져오기와 합치기를 한번에 하는 반면, git fetch는 가져오기만 하고 합치는 건 개발자에게 맡깁니다. git fetch vs. git pull 이 둘의 관계를 코드로 표현하면 다음과 같습니다. git fetch는 원격 저장소의 변경 내용을 origin/main 같은 원격 추적 브랜치(remote-tracking bran
아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 구성 요소인데요. 이번 포스팅에서는 웹에서 텍스트를 스타일하기 위해서 자주 사용되는 대표적인 CSS 속성을 정리해보겠습니다. 텍스트 색상: color CSS에서 정말 자주 사용되는 color 속성은 텍스트 색상을 지정하는데 사용됩니다. color 속성에는 여러 가지 타입의 값을 설정해줄 수 있는데요. 예를 들어, blue와 같은 명명된(named) 색상, #ff0000와 같은 색상 코드, 그리고 rgb(), hsl()과 같은 색상 함수도 사용할
git push는 원격 저장소(remote repository)에 코드 변경분을 업로드하기 위해서 사용하는 Git 명령어 입니다. git commit vs. git push git commit 명령어는 로컬 저장소(local repository)에 코드 변경 이력을 남기기 위해서 사용됩니다. 여기서 로컬 저장소란 git clone 명령어를 통해서 내 컴퓨터에 복제해둔 원격 저장소의 복사본을 의미합니다. 따라서, git commit를 통해 로컬 저장소에 아무리 많은 코드 변경 이력을 남기더라도 원격 저장소에서는 알 길이 없습니다. 반
웹 페이지의 레이아웃을 디자인할 때 CSS에서 요소의 너비를 정의하는 width 속성이 매우 중요한 역할을 하게 되는데요. 이번 포스팅에서는 CSS의 width 속성의 기본적인 사용법과 각 속성값에 따라 어떻게 너비가 결정되는지에 대해서 알아보겠습니다. width 속성 CSS의 width 속성은 HTML 요소의 너비를 제어하기 위해서 사용되는데요. 크게 절대값, 상대값, 키워드로 설정이 가능한데 이에 따른 너비가 어떻게 결정되는지 이해하는 것이 중요합니다. 절대값 px와 같은 절대 단위를 사용하여 width 속성값을 지정해주면 해당
Git은 분산 버전 관리 시스템이라서 하나의 프로젝트에 여러 원격 저장소(remote repository)를 연결할 수 있습니다. git remote 명령어는 이런 원격 저장소들을 관리하는 데 사용하는데요. 원격 저장소를 추가하거나, 연결 상태를 확인하거나, 더 이상 필요 없는 원격을 삭제할 때 모두 이 명령어를 씁니다. 원격 저장소 목록 확인 가장 기본적인 사용법은 현재 등록된 원격 저장소의 이름을 확인하는 것입니다. git clone으로 저장소를 복제하면 기본적으로 origin이라는 이름으로 원격 저장소가 자동 등록됩니다. -v
이번 포스팅에서는 fontsource를 사용하여 웹폰트를 직접 호스팅하는 방법에 대해서 알아보겠습니다. fontsource fontsource는 오픈 소스(open source) 웹폰트를 npm 패키지의 형태로 손쉽게 설치하고 직접 호스팅이 가능하게 해주는 라이브러리입니다. 웹폰트를 사용할 때 Google Fonts와 같은 외부 서비스를 통해서 웹폰트를 호스팅하는 경우가 많은데요. 하지만 다양한 웹폰트를 사용하거나 속도가 민감한 서비스의 경우에는 웹폰트를 직접 호스팅하면, 웹폰트 다운로드로 인한 지연을 최소화하여 사용자 경험을 개선
웹폰트(web font)를 사용하면 사용자의 컴퓨터에 설치된 폰트뿐만 아니라 웹에서 다양한 폰트를 불러와서 웹사이트에 적용할 수 있습니다. 뿐만 아니라, 사용자가 어느 플랫폼에서 웹사이트를 이용하든 항상 동일한 글꼴로 텍스트 컨텐츠를 보여줄 수는 있다는 장점도 있습니다. 이번 포스팅에서는 Google Fonts를 통해서 웹폰트를 웹사이트에 적용하는 방법에 대해서 알아보겠습니다. 웹폰트 선택하기 웹사이트에 웹폰트를 적용하려면 우선 사용하고 싶은 웹폰트를 골라야겠죠? 유료로 웹폰트를 구매할 수도 있겠지만 본 포스팅에서는 무료 웹폰트를
CSS 변수는 예전에는 Sass나, LESS, Stylus와 같은 CSS 전처리기(CSS preprocessor)를 통해서 접할 수 있었던 기능이었습니다. 하지만 최근에는 CSS 스펙 자체에 CSS 변수 개념이 추가되어 이제 CSS 전처리기 없이도 부담없이 CSS 변수를 사용할 수 있게 되었는데요. 이번 포스팅에서는 CSS 사용자 정의 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)에 대해서 알아보겠습니다. CSS 변수 정의 CSS 변수가 CSS 사용자 정의 속성이라고 불리는 이유는
CSS의 sticky position을 이용하여 항상 화면 상단에 항상 달라붙어 있는 헤더(header)를 만들어보겠습니다. sticky position의 특징 sticky position은 CSS에 비교적 최근에 추가된 포지셔닝 메커니즘인데요. 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 fixed position과 유사하게 동작합니다. position 속성을 sticky로 설정되어 있는 엘리먼트는 마치 position 속성이 static으로 설정되어 있는 것처럼 부모 엘리먼트 내부에서 공간을 차
웹사이트 레이아웃에서 사이드바(sidebar)는 목차, 광고 배너, 인기/신규 게시물 목록, 연관/추천 상품 목록과 같이 보조적인 컨텐츠를 배치하기 위해서 사용합니다. 이번 포스팅에서는 플렉스 박스(Flexbox)와 미디어 쿼리(Media Query)를 이용해서 화면의 너비에 알아서 반응하는 사이드바를 만들어보겠습니다. 웹페이지 마크업 예제로 목차 영역과 기사 영역으로 이루어진 간단한 웹페이지의 구조를 HTML로 작성해보겠습니다. <main> 엘리먼트 아래에 목차 영역을 <aside> 엘리먼트로 기사 영역을 <article> 엘리먼
다크 모드(dark mode)는 야간에 눈을 편안하게 하고 작업의 집중도를 높을 수 있도록 시스템 전반에 어두운 색생 체계를 적용해주는 운영 체제의 기능입니다. 2018년에 macOS Mojave에 처음으로 소개된 다크 모드는 현재 Windows 10을 비롯하여 많은 운영 체제에서 지원하는데요. 이에 따라 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가하고 있는 추세입니다. 라이트 모드 스타일링 예전에는 웹사이트를 스타일할 때 전반적으로 밝은 배경색에 어두운 글자색을 사용하는 것이
파이썬에서 리스트(list)를 콘솔에 출력할 때 보통 print() 함수를 사용하게 되는데요. 예를 들어, 10개의 숫자를 담고 있는 간단한 리스트는 다음과 같이 출력할 수 있습니다. 하지만 리스트가 많은 양의 데이터를 담고 있거나 리스트의 구조가 복잡할 경우에는 이런 식으로 출력하면 상당히 보기가 어려워지죠? 😵💫 예를 들어, 파이썬의 꽃이라고 불리우는 표현식(list comprehension) 문법을 사용해서, 100개의 숫자를 10개씩 이차원 리스트로 만들고 출력해보겠습니다. 이번 포스팅에서는 위와 같이 복잡한 리스트를
웹사이트에서 정말 흔하게 접할 수 있는 성배(Holy Grail) 레이아웃은 한 때 개발자 사이에서 제대로 구현하기 어렵기로 악명이 높았었는데요. Flexbox와 CSS Grid가 보편화되면서 이제는 옛말이 되어 가고 있는 것 같습니다. 이번 포스팅에서는 CSS의 최신 기술을 이용하여 어떻게 성배 레이아웃을 구현할 수 있는지 알아보도록 하겠습니다. 기본 구조 성배 레이아웃은 일반적으로 5개의 영역으로 구성이 되는데요. 회면 최상단에 각각 헤더(header)와 풋터(footer) 영역이 위치하고, 그 사이의 영역이 다시 네비게이션(n