분류 전체보기(1084)
-
Web/HTML, CSS
2023.06.27
[CSS] display : grid에 대하여(CSS Grid) - 그리드 레이아웃
그리드(grid)는 이전 포스팅에서 배웠던 플렉스(flex)와 같이 모던 CSS에서 레이아웃을 다루기 위해 사용되는 기능으로 반응형 웹 페이지 레이아웃을 효과적으로 만들기 위한 레이아웃 시스템입니다. 플렉스(flex)가 가로 또는 새로 단일 방향 레이아웃을 배치하는 데 적합하다면 그리드는 마치 표처럼 행과 열로 구성된 레이아웃을 배치하는데 더 적합한 기능이라고 할 수 있습니다. CSS 그리드는 행(row)과 열(column)로 구성된 2차원 그리드로 웹 요소를 배치하는 방법을 제공하며 그리드 아이템의 위치와 크기를 유연하게 조정할 수 있습니다. 이를 통해 반응형 레이아웃을 구현하는데 매우 유용합니다. ※ CSS Flexbox에 궁금하시다면 아래 글을 참고해 주세요. [CSS] display : flex에..
-
Web/HTML, CSS
2023.06.21
[CSS] display : flex에 대하여(Flexible Box) - 플렉스 박스 레이아웃
반응형 웹을 구현하는 가장 대중적인 방법은 flex box를 활용한 플렉스 박스 레이아웃으로 화면을 구성하는 것입니다. 플렉스 박스 레이아웃이란? 플렉스 박스(Flexbox) 레이아웃은 CSS의 display 속성 중 하나인 display: flex를 사용하여 요소들을 가로 또는 세로축을 따라 정렬하고 유연하게 배치하는 레이아웃 모델입니다. 이 플렉스 박스를 사용하면 여유 공간에 따라 너비나 높이, 위치 등을 자유롭게 변형할 수 있고 손쉽게 화면을 분할하여 필요한 HTML요소들을 배치할 수 있기 때문에 웹 페이지의 레이아웃을 쉽게 조정하고 정렬할 수 있습니다. 플렉스 박스의 구성요소 flex container : 웹 문서에 텍스트나 이미지, 표 등 웹 요소들을 플렉스 하게 사용하려면 플렉스 컨테이너로 묶..
-
Web/HTML, CSS
2023.06.18
2
[CSS] display : block, inline, inline-block 속성(블록 레벨, 인라인 레벨 요소)
블록 레벨 요소와 인라인 레벨 요소 HTML 태그들은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다. 위의 이미지를 보시면 블록 레벨 요소는 세로로 하나씩 배치되어 있는 반면 인라인 레벨 요소는 가로로 하나씩 배치되어 있는 모습을 보실 수 있습니다. 블록 레벨 요소에 대하여 태그를 사용하여 요소를 삽입했을 경우 혼자서 한 줄을 차지하는 요소입니다. 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 먼저 블록 레벨 요소는 좌측의 사진처럼 요소를 삽입 했을 때 혼자 한 줄을 차지합니다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소들이 올 수 없습니다. 대표적인 블록 레벨 HTML 태그들 , , , , ..
-
일상/제품리뷰
2023.06.07
[내돈내산] 애플 맥 미니 M2 구매 및 사용 후기(vs 맥북에어)
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 저에게 MAC OS로 개발을 해야 할 상황이 생겼습니다. 하지만 애플 제품의 가격대가 만만치 않은 만큼 어떤 제품을 구매해야 할지 고민이 많이 되더군요. 좋은 것을 산다고 해도 그렇게 많이 사용할 것 같지도 않고요. 아마 저와 같은 고민을 하는 분이 많을 것 같습니다. 그렇다면 가장 저렴하게 MAC OS를 사용하고 싶다면 어떻게 해야 할까요? 저와 같은 고민을 하는 분들에게는 이번에 소개해 드릴 맥 미니(MAC MINI) M2를 고려해 보시면 좋을 것 같습니다. ※ 맥 미니 M2는 아래 링크에서 쿠팡 최저가로 구매하실 수 있습니다. 맥북에어가 아닌 맥미니를 선택한 이유 항목맥미니맥북에어가격850,000 부터1,..
-
ETC./TextEditor
2023.05.31
3
[VS Code] 비주얼 스튜디오 코드 - 단축키 총정리
비주얼 스튜디오 코드(Visual Studio Code) - 자주 사용하는 단축키 주석 Ctrl + / : 한줄 or 블록 주석 처리 / 해제 (파일 확장자명에 따라 주석 형태는 달라짐) Ctrl + K, Ctrl + C : 한줄 or 블록 주석 처리 / 해제 (파일 확장자명에 따라 주석 형태는 달라짐) Ctrl + K, Ctrl + U : 주석 해제 파일 및 에디터 단축키 Ctrl + N : 새 파일 열기 Ctrl + O : 기존 파일 열기 Ctrl + S : 파일 저장 Ctrl + Shift + S : 다른 이름으로 저장 Ctrl + W : 파일 닫기 Ctrl + Shift + T : 이전에 닫았던 파일 다시 열기 Ctrl + L : 현재 라인 블록처리 Ctrl + Alt + 위(↑) or 아래(↓)..
-
ETC./TextEditor
2023.05.29
[VS Code] 비주얼 스튜디오 코드 - 깃허브(GitHub) 연동 방법
비주얼 스튜디오 코드(Visual Studio Code)에서 깃 허브(Git Hub)를 연동하는 방법은 매우 간단합니다. 단순히 확장 프로그램 하나만 추가해 주면 되는데요. 이번 포스팅에서는 비주얼 스튜디오 코드(Visual Studio Code)에서 깃 허브(Git Hub)를 연동하는 방법에 대해 알아보도록 하겠습니다. 비주얼 스튜디오 코드 - 깃허브(GitHub) 연동 방법 1. 키보드 [F1]을 눌러 명령어창을 켠 뒤 git clone을 입력하여 실행합니다. 여기서 git clone를 입력했는데 no matching commands라고 뜬다면 깃허브 설치가 안되어 있는 것이기에 깃허브를 먼저 설치해주셔야 합니다. 깃허브는 아래 링크에서 설치가 가능합니다. 깃허브 설치 후 VS Code를 재실행해주세..
-
ETC./TextEditor
2023.05.28
1
[VS Code] 비주얼 스튜디오 코드 - 설치 / 다운로드 방법
비주얼 스튜디오 코드(Visual Studio Code)란? 비주얼 스튜디오 코드(줄여서 VS Code)는 Microsoft에서 개발한 소스 코드 편집기입니다. VS Code는 다양한 프로그래밍 언어를 지원하며 특히 프론트엔드 코드 작성, 편집 및 디버깅을 위한 환경을 제공합니다. 또한 구문 강조 표시, 지능형 코드 완성, 버전 관리 통합, 확장 기능을 위한 광범위한 마켓플레이스와 같은 다양한 기능을 제공합니다. 이와 같은 특징으로 현재 VS Code는 가장 인기가 좋은 프론트엔드 개발툴로 사랑받고 있습니다. 비주얼 스튜디오 코드의 주요 기능 크로스 플랫폼: Windows, macOS 및 Linux 운영 체제에서 사용할 수 있으므로 개발자가 선호하는 플랫폼에서 작업할 수 있습니다. 확장 기능: VS Co..
-
Web/HTML, CSS
2023.05.27
1
[CSS] 미디어 쿼리(media query) 사용법 (반응형 웹)
웹 사이트에 접속할 수 있는 다양한 디바이스들이 있습니다. 그리고 디바이스마다 화면의 크기가 다르죠. 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹 사이트를 표현한다면 굉장히 비효율적일 것입니다. 그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해주어야 하며 이는 CSS의 미디어 쿼리를 활용해서 각각의 디바이스의 크기에 맞는 최적의 UI들을 따로 설정해 줄 수 있습니다. 미디어 쿼리란? @media [only | not] 미디어 유형 [and 조건] * [and 조건] 미디어 쿼리(Media Query)는 웹 개발에서 사용되는 CSS 기술로써 반응형 웹 디자인(Responsive Web Design)의 핵심 요소로 사용됩니다. 미디어 쿼리는 미디..
-
Web/HTML, CSS
2023.05.21
[CSS] 반응형 웹 사이트 레이아웃 만들기 - 가변 그리드(Grid System)
웹 사이트의 레이아웃을 구성하는 방법이 여러 가지가 있겠지만 최근에는 그리드 시스템을 많이 사용합니다. 그리드 시스템은 웹 페이지의 레이아웃과 구성 요소를 조정하기 위한 구조적인 시스템으로 그리드를 사용하면 웹 페이지의 구성 요소를 일관되고 조화롭게 배치할 수 있습니다. 일반적으로 웹 사이트의 그리드 시스템은 열(column)과 행(row)으로 구성됩니다. 각 열은 일정한 너비를 가지고 있고, 이를 기준으로 콘텐츠를 배치합니다. 웹 그리드 시스템 웹 그리드 시스템은 주로 Column, Margin, Gutter로 구성되며 이 세 가지 요소의 비율을 조절하여 원하는 그리드를 구성할 수 있습니다. Margins 여백(Margins)은 콘텐츠 영역의 양 끝에 있는 공간으로, 여백의 넓이는 일정한 값으로 설정되..
-
Web
2023.05.20
[Web] 반응형 웹 사이트를 만드는 다양한 방법
요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많습니다. 그런데 PC와 스마트폰의 화면 크기가 다르기 때문에 데스크톱 PC용으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시됩니다. 데스크톱에서 보여주던 내용을 스마트폰 화면 안에 다 보여줘야 하기 때문이죠. 이러한 문제점 때문에 과거에는 모바일용으로 사이트를 별도로 제작하였습니다. 하지만 브라우저의 환경이 점차 다양해지는데 매번 PC와 모바일 사이트를 별도로 매번 유지보수하기는 쉽지 않습니다. 그래서 반응형 웹의 중요성이 대두되었습니다. 반응형 웹이란? 반응형 웹(Responsive web)은 다양한 기기와 화면 크기에 자동으로 적응하는 웹 디자인 방식을 의미합니다. 반응형 웹은 사용자가 웹사이트를 모바일..
-
Web/HTML, CSS 2023.06.27[CSS] display : grid에 대하여(CSS Grid) - 그리드 레이아웃 그리드(grid)는 이전 포스팅에서 배웠던 플렉스(flex)와 같이 모던 CSS에서 레이아웃을 다루기 위해 사용되는 기능으로 반응형 웹 페이지 레이아웃을 효과적으로 만들기 위한 레이아웃 시스템입니다. 플렉스(flex)가 가로 또는 새로 단일 방향 레이아웃을 배치하는 데 적합하다면 그리드는 마치 표처럼 행과 열로 구성된 레이아웃을 배치하는데 더 적합한 기능이라고 할 수 있습니다. CSS 그리드는 행(row)과 열(column)로 구성된 2차원 그리드로 웹 요소를 배치하는 방법을 제공하며 그리드 아이템의 위치와 크기를 유연하게 조정할 수 있습니다. 이를 통해 반응형 레이아웃을 구현하는데 매우 유용합니다. ※ CSS Flexbox에 궁금하시다면 아래 글을 참고해 주세요. [CSS] display : flex에..
-
Web/HTML, CSS 2023.06.21[CSS] display : flex에 대하여(Flexible Box) - 플렉스 박스 레이아웃 반응형 웹을 구현하는 가장 대중적인 방법은 flex box를 활용한 플렉스 박스 레이아웃으로 화면을 구성하는 것입니다. 플렉스 박스 레이아웃이란? 플렉스 박스(Flexbox) 레이아웃은 CSS의 display 속성 중 하나인 display: flex를 사용하여 요소들을 가로 또는 세로축을 따라 정렬하고 유연하게 배치하는 레이아웃 모델입니다. 이 플렉스 박스를 사용하면 여유 공간에 따라 너비나 높이, 위치 등을 자유롭게 변형할 수 있고 손쉽게 화면을 분할하여 필요한 HTML요소들을 배치할 수 있기 때문에 웹 페이지의 레이아웃을 쉽게 조정하고 정렬할 수 있습니다. 플렉스 박스의 구성요소 flex container : 웹 문서에 텍스트나 이미지, 표 등 웹 요소들을 플렉스 하게 사용하려면 플렉스 컨테이너로 묶..
-
Web/HTML, CSS 2023.06.18 2[CSS] display : block, inline, inline-block 속성(블록 레벨, 인라인 레벨 요소) 블록 레벨 요소와 인라인 레벨 요소 HTML 태그들은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다. 위의 이미지를 보시면 블록 레벨 요소는 세로로 하나씩 배치되어 있는 반면 인라인 레벨 요소는 가로로 하나씩 배치되어 있는 모습을 보실 수 있습니다. 블록 레벨 요소에 대하여 태그를 사용하여 요소를 삽입했을 경우 혼자서 한 줄을 차지하는 요소입니다. 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 먼저 블록 레벨 요소는 좌측의 사진처럼 요소를 삽입 했을 때 혼자 한 줄을 차지합니다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소들이 올 수 없습니다. 대표적인 블록 레벨 HTML 태그들 , , , , ..
-
일상/제품리뷰 2023.06.07[내돈내산] 애플 맥 미니 M2 구매 및 사용 후기(vs 맥북에어) "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 저에게 MAC OS로 개발을 해야 할 상황이 생겼습니다. 하지만 애플 제품의 가격대가 만만치 않은 만큼 어떤 제품을 구매해야 할지 고민이 많이 되더군요. 좋은 것을 산다고 해도 그렇게 많이 사용할 것 같지도 않고요. 아마 저와 같은 고민을 하는 분이 많을 것 같습니다. 그렇다면 가장 저렴하게 MAC OS를 사용하고 싶다면 어떻게 해야 할까요? 저와 같은 고민을 하는 분들에게는 이번에 소개해 드릴 맥 미니(MAC MINI) M2를 고려해 보시면 좋을 것 같습니다. ※ 맥 미니 M2는 아래 링크에서 쿠팡 최저가로 구매하실 수 있습니다. 맥북에어가 아닌 맥미니를 선택한 이유 항목맥미니맥북에어가격850,000 부터1,..
-
ETC./TextEditor 2023.05.31 3[VS Code] 비주얼 스튜디오 코드 - 단축키 총정리 비주얼 스튜디오 코드(Visual Studio Code) - 자주 사용하는 단축키 주석 Ctrl + / : 한줄 or 블록 주석 처리 / 해제 (파일 확장자명에 따라 주석 형태는 달라짐) Ctrl + K, Ctrl + C : 한줄 or 블록 주석 처리 / 해제 (파일 확장자명에 따라 주석 형태는 달라짐) Ctrl + K, Ctrl + U : 주석 해제 파일 및 에디터 단축키 Ctrl + N : 새 파일 열기 Ctrl + O : 기존 파일 열기 Ctrl + S : 파일 저장 Ctrl + Shift + S : 다른 이름으로 저장 Ctrl + W : 파일 닫기 Ctrl + Shift + T : 이전에 닫았던 파일 다시 열기 Ctrl + L : 현재 라인 블록처리 Ctrl + Alt + 위(↑) or 아래(↓)..
-
ETC./TextEditor 2023.05.29[VS Code] 비주얼 스튜디오 코드 - 깃허브(GitHub) 연동 방법 비주얼 스튜디오 코드(Visual Studio Code)에서 깃 허브(Git Hub)를 연동하는 방법은 매우 간단합니다. 단순히 확장 프로그램 하나만 추가해 주면 되는데요. 이번 포스팅에서는 비주얼 스튜디오 코드(Visual Studio Code)에서 깃 허브(Git Hub)를 연동하는 방법에 대해 알아보도록 하겠습니다. 비주얼 스튜디오 코드 - 깃허브(GitHub) 연동 방법 1. 키보드 [F1]을 눌러 명령어창을 켠 뒤 git clone을 입력하여 실행합니다. 여기서 git clone를 입력했는데 no matching commands라고 뜬다면 깃허브 설치가 안되어 있는 것이기에 깃허브를 먼저 설치해주셔야 합니다. 깃허브는 아래 링크에서 설치가 가능합니다. 깃허브 설치 후 VS Code를 재실행해주세..
-
ETC./TextEditor 2023.05.28 1[VS Code] 비주얼 스튜디오 코드 - 설치 / 다운로드 방법 비주얼 스튜디오 코드(Visual Studio Code)란? 비주얼 스튜디오 코드(줄여서 VS Code)는 Microsoft에서 개발한 소스 코드 편집기입니다. VS Code는 다양한 프로그래밍 언어를 지원하며 특히 프론트엔드 코드 작성, 편집 및 디버깅을 위한 환경을 제공합니다. 또한 구문 강조 표시, 지능형 코드 완성, 버전 관리 통합, 확장 기능을 위한 광범위한 마켓플레이스와 같은 다양한 기능을 제공합니다. 이와 같은 특징으로 현재 VS Code는 가장 인기가 좋은 프론트엔드 개발툴로 사랑받고 있습니다. 비주얼 스튜디오 코드의 주요 기능 크로스 플랫폼: Windows, macOS 및 Linux 운영 체제에서 사용할 수 있으므로 개발자가 선호하는 플랫폼에서 작업할 수 있습니다. 확장 기능: VS Co..
-
Web/HTML, CSS 2023.05.27 1[CSS] 미디어 쿼리(media query) 사용법 (반응형 웹) 웹 사이트에 접속할 수 있는 다양한 디바이스들이 있습니다. 그리고 디바이스마다 화면의 크기가 다르죠. 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹 사이트를 표현한다면 굉장히 비효율적일 것입니다. 그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해주어야 하며 이는 CSS의 미디어 쿼리를 활용해서 각각의 디바이스의 크기에 맞는 최적의 UI들을 따로 설정해 줄 수 있습니다. 미디어 쿼리란? @media [only | not] 미디어 유형 [and 조건] * [and 조건] 미디어 쿼리(Media Query)는 웹 개발에서 사용되는 CSS 기술로써 반응형 웹 디자인(Responsive Web Design)의 핵심 요소로 사용됩니다. 미디어 쿼리는 미디..
-
Web/HTML, CSS 2023.05.21[CSS] 반응형 웹 사이트 레이아웃 만들기 - 가변 그리드(Grid System) 웹 사이트의 레이아웃을 구성하는 방법이 여러 가지가 있겠지만 최근에는 그리드 시스템을 많이 사용합니다. 그리드 시스템은 웹 페이지의 레이아웃과 구성 요소를 조정하기 위한 구조적인 시스템으로 그리드를 사용하면 웹 페이지의 구성 요소를 일관되고 조화롭게 배치할 수 있습니다. 일반적으로 웹 사이트의 그리드 시스템은 열(column)과 행(row)으로 구성됩니다. 각 열은 일정한 너비를 가지고 있고, 이를 기준으로 콘텐츠를 배치합니다. 웹 그리드 시스템 웹 그리드 시스템은 주로 Column, Margin, Gutter로 구성되며 이 세 가지 요소의 비율을 조절하여 원하는 그리드를 구성할 수 있습니다. Margins 여백(Margins)은 콘텐츠 영역의 양 끝에 있는 공간으로, 여백의 넓이는 일정한 값으로 설정되..
-
Web 2023.05.20[Web] 반응형 웹 사이트를 만드는 다양한 방법 요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많습니다. 그런데 PC와 스마트폰의 화면 크기가 다르기 때문에 데스크톱 PC용으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시됩니다. 데스크톱에서 보여주던 내용을 스마트폰 화면 안에 다 보여줘야 하기 때문이죠. 이러한 문제점 때문에 과거에는 모바일용으로 사이트를 별도로 제작하였습니다. 하지만 브라우저의 환경이 점차 다양해지는데 매번 PC와 모바일 사이트를 별도로 매번 유지보수하기는 쉽지 않습니다. 그래서 반응형 웹의 중요성이 대두되었습니다. 반응형 웹이란? 반응형 웹(Responsive web)은 다양한 기기와 화면 크기에 자동으로 적응하는 웹 디자인 방식을 의미합니다. 반응형 웹은 사용자가 웹사이트를 모바일..