맥 Homebrew 홈브루 설치
Homebrew는 macOS와 Linux용으로 개발된 패키지 관리자입니다. 이 프로그램은 사용자가 시스템에 소프트웨어 패키지를 쉽게 설치하고 관리할 수 있도록 도와줍니다. Homebrew는 주로 명령줄 인터페이스를 통해 사용되며, 다양한 오픈 소스 소프트웨어를 간편하게 설치하고 업데이트할 수 있게 해줍니다. 같이 맥에서 홈브루를 설치해보아요!1. 웹 접속아래 링크로 들어갑니다. https://brew.sh/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh Install Homebrew 아래 코드를 복사합니다.2. 터미널에 복사한 링크 넣기고 엔터맥 터미널은 Dock의 Launchpad에서 검색하면 뜹니다. 복사한 코드를 넣고 엔터를 칩..
padding 속성으로 내부 여백 지정하기 (모든 경우의 수)
CSS에서 `padding`을 사용하여 요소의 내부 여백을 설정할 수 있습니다. `padding` 속성에는 네 개의 방향(위, 오른쪽, 아래, 왼쪽)에 대해 각각의 여백을 설정할 수 있습니다. 다양한 코드 조합을 통해 필요한 여백을 설정할 수 있으며, 그 조합들을 모두 정리해보았습니다! 1. 단일 값단일 값을 사용하면 모든 방향의 여백이 동일하게 설정됩니다.아래 코드는 요소의 모든 방향(위, 오른쪽, 아래, 왼쪽)에 20px의 여백을 설정합니다.padding: 20px; 2. 두 개의 값두 개의 값을 사용하면 첫 번째 값이 위와 아래 여백에, 두 번째 값이 왼쪽과 오른쪽 여백에 적용됩니다.아래 코드는 위와 아래 여백을 10px, 왼쪽과 오른쪽 여백을 20px로 설정합니다.padding: 10px 20px..
CSS Grid를 사용해 반응형 디자인을 구축하기
오늘은 CSS Grid를 사용해 반응형 디자인을 구축하는 방법에 대해 알아보려고 합니다. CSS Grid는 강력한 레이아웃 시스템으로, 복잡한 웹 페이지 레이아웃을 간단하게 만들 수 있도록 도와줍니다. 이 글에서는 CSS Grid의 기본 개념부터 시작해서, 실제 프로젝트에서 어떻게 활용할 수 있는지 구체적인 예제를 들어볼게요. CSS Grid란 무엇인가요?CSS Grid는 2차원 레이아웃 시스템으로, 행(row)과 열(column)을 사용하여 요소들을 배치할 수 있습니다. Flexbox가 1차원 레이아웃(단일 행 또는 열)을 다루는 데 비해, Grid는 2차원 레이아웃을 훨씬 쉽게 만들 수 있도록 도와줍니다.먼저, CSS Grid의 기본 개념을 알아볼까요? 그리드 컨테이너와 그리드 아이템 Grid 레이..
고퀄 일러스트 사이트(엔피쯔소자이, 언드로우)
엔피쯔소자이연필로 그린듯한 일러스트 사이트https://enpitsu-sozai.com/ えんぴつ素材商用利用可能！おしゃれで可愛いえんぴつ手描きのフリーイラスト素材サイトです。enpitsu-sozai.com 일본 웹사이트라 그런지 일본 갬성 낭낭 프리픽 Freepik이제는 너무나도 유명한 무료 일러스트, 벡터, 사진 사이트https://www.freepik.com/ https://www.freepik.com/search?format=search&last_filter=query&last_value=plants&query=plants&selection=1&type=vectorCopyright © 2010- 2024 Freepik Company S.L. All rights reserved .www.freepik.co..
커스텀 체크박스 만들기
체크박스는 여러 선택지를 다중으로 선택할 수 있는 인터페이스입니다. 체크 박스 예시 좋아하는 음식 돈까스 제육볶음 상하이 디럭스 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 1. 체크박스 위치와 나열 방법체크박스를 세로로 길게 나열하고, margin-bottom 속성으로 간격을 조정합니다./* 체크박스 컨테이너 스타일 */.checkbox-container { margin-bottom: 15px; /* 체크박스 ..
체크박스, 라디오 버튼, 토글 스위치의 차이점
설문조사를 만들 때, 가장 먼저 알아야 할 체크박스, 라디오 버튼, 토글의 차이점과 활용법에 대해 알아봅시다.체크박스, 라디오 버튼, 토글 스위치는 모두 웹 폼에서 사용자 인터페이스 요소로 사용되지만, 그 사용 목적과 동작 방식은 다릅니다. 1. 체크박스 (Checkbox)- 체크박스는 하나 이상의 옵션을 선택할 수 있는 경우에 사용- 각 체크박스는 독립적이므로 여러 개의 체크박스를 동시에 선택하거나 해제할 수 있음예시 질문: "관심 있는 주제를 모두 선택하세요."와 같은 질문에 여러 개의 답변을 제공할 때. 예시 코드:옵션 1 옵션 2 옵션 1 옵션 2 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 2. 라디오 버튼 (..
애니메이션 버튼 만들기
CSS 애니메이션을 활용하여 버튼에 다양한 효과를 주는 것은 사용자 경험을 향상시키고 웹 페이지의 인터랙티브 요소를 강화하는 좋은 방법입니다. 여기서는 버튼에 호버(hover) 및 활성(active) 상태에서 애니메이션 효과를 주는 방법을 자세히 살펴보겠습니다.1. button 스타일 지정background-color, border, color, padding 등을 사용해서 버튼의 평상 시 상태의 스타일을 작성합니다..button { background-color: #006769; /* 버튼의 기본 배경색 */ border: none; /* 테두리 없음 */ color: white; /* 텍스트 색상 */ padding: 15px 20px; /* 패딩: 상하 15px, 좌우 20px..
CSS 색상 활용법
CSS 색상 코드의 기초CSS에서 색상을 지정하는 방법은 크게 네 가지가 있습니다: 키워드, RGB, RGBA, HEX, HSL, HSLA입니다. 각각의 방법을 사용하여 원하는 색상을 정확하게 표현할 수 있습니다.1. 키워드(Keywords)가장 간단하고 직관적인 방법은 색상의 이름을 직접 사용하는 것입니다. 예를 들어, red, blue, green과 같이 일반적인 색상 이름을 사용할 수 있습니다.body { color: blue; background-color: lightgray;} 2. HEX 코드HEX 색상 코드는 # 다음에 6자리 또는 3자리의 16진수 값을 사용합니다. 이 방식은 웹 디자인에서 가장 널리 사용되며, 색상을 정확하게 지정할 수 있습니다.h1 { color: #F..
CSS 박스 모델
CSS 박스 모델은 웹 디자인에서 핵심적인 개념 중 하나로, 웹 페이지 내 모든 HTML 요소가 사각형 상자로 표현됩니다. 이 모델은 웹 페이지의 레이아웃을 구성하는데 필수적이며, 요소의 크기, 간격, 위치 등을 정밀하게 조정할 수 있게 해줍니다. 박스 모델을 이해하는 것은 효과적인 웹 페이지를 디자인하기 위한 기본이며, CSS를 활용한 깊이 있는 스타일링 능력을 배양하는데 도움을 줍니다. 박스 모델의 구성박스 모델은 네 가지 주요 구성 요소로 이루어져 있습니다: 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin).1. 콘텐츠(Content): 이는 요소의 실제 내용을 포함하는 영역으로, 텍스트, 이미지 또는 다른 요소들이 위치합니다. 이 영역의 크기는 `width..
CSS란 뭘까
CSS, 즉 Cascading Style Sheets는 웹 페이지의 레이아웃, 폰트, 색상 등을 조정하여 사용자에게 시각적으로 매력적인 경험을 제공하는 스타일시트 언어입니다. CSS가 중요한 이유웹 페이지를 만드는 데 HTML만으로도 충분할까요? 기술적으로는 가능하지만, 그 결과는 흰 배경에 검은 글자로 가득한 지루한 페이지일 것입니다. HTML은 웹의 골격을 구성하지만, CSS는 그 골격에 살을 붙이고 색을 입힙니다. 디자인은 사용자 경험의 핵심 요소이며, 매력적인 디자인 없이는 사용자의 관심을 끌기 어렵습니다. CSS는 이런 맥락에서 웹 페이지에 생명을 불어넣는 역할을 합니다. CSS 작동 원리CSS는 선택자와 선언 블록으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언 블록은..
색 조합 웹사이트 추천 (무료 웹사이트)
무료 컬러 팔레트 생성기 웹사이트 추천1. Coolorshttps://coolors.co/ Coolors - The super fast color palettes generator!Generate or browse beautiful color combinations for your designs.coolors.co연동되는 프로그램이 많은 것이 장점!사용자 정의 색상 팔레트 생성 및 저장 가능컬러 팔레트를 무작위로 생성하거나 특정 색상을 기반으로 생성다양한 팔레트를 찾고 공유할 수 있는 커뮤니티 기능 제공Adobe, Figma, Sketch와 같은 다른 디자인 도구와 호환 가능 2. Color Hunthttps://colorhunt.co/ Color Palettes for Designers and Art..
[css] 그라데이션 폰트 만들기
Gradient란?그라데이션(Gradient)은 CSS를 사용하여 요소에 부드러운 색상 변화를 적용하는 기술입니다. CSS 그라데이션은 다양한 색상을 블렌딩하여 그라데이션 효과를 만들어냅니다. 1. 선형 그라데이션(Linear Gradient)선형 그라데이션은 한 쪽 끝에서 다른 쪽 끝으로 색상이 서서히 변하는 효과를 만듭니다. 이는 linear-gradient() 함수를 사용하여 정의할 수 있습니다. 함수의 매개변수로는 그라디언트의 방향과 사용할 색상들을 지정합니다./* 위에서 아래로 그라데이션 */background: linear-gradient(to bottom, red, blue);/* 45도 각도로 그라데이션 */background: linear-gradient(45deg, red, blue);..
[css] CSS 속성의 종류 (display, font 등)
CSS에는 많은 속성이 있지만, 가장 일반적으로 사용되는 CSS 속성과 그에 대한 일반적인 값들을 적어봤습니다. 1. 색상과 배경 속성(Color and Background Properties) - color: 텍스트 색상 - background-color: 배경 색상 - background-image: 배경 이미지 - background-size: 배경 이미지 크기 조절 - background-position: 배경 이미지 위치 조절 2. 폰트와 텍스트 속성(Font and Text Properties) - font-family: 글꼴 - font-size: 글꼴 크기 - font-weight: 글꼴 두께 - font-style: 글꼴 스타일 - tex..
[css] CSS의 구조 (선택자, 요소, 값)
CSS는 Cascading Style Sheets의 약자로, HTML이나 XML과 같은 마크업 언어로 작성된 문서의 스타일을 정의하는 스타일 시트 언어입니다. CSS는 웹 페이지의 레이아웃, 디자인, 색상, 폰트 등을 다룹니다. 이를 통해 웹 페이지의 디자인을 더욱 멋지게 만들고, 사용자 경험을 향상시킬 수 있습니다. CSS는 기본적으로 다음과 같은 구조로 이루어져 있습니다.선택자(Selectors)CSS 규칙의 첫 번째 부분으로, 스타일을 적용할 HTML 요소를 선택합니다. 선택자는 요소의 이름, 클래스, 아이디 등으로 정의됩니다. 속성(Properties)스타일을 적용할 HTML 요소의 특성이나 스타일 속성을 지정합니다. 폰트, 색상, 너비, 높이 등 다양한 스타일 속성을 지정할 수 있습니다. 값(V..
[css] Display 종류와 예시
CSS의 display 속성은 다양한 값으로 요소를 표시하는 방법을 제어합니다.주요한 display 속성 값과 각각의 예시를 아래 HTML 코드에서 Display 요소만 변경하여 작성했습니다. 1. block블록 요소는 문단처럼 세로로 쌓이는 상자입니다.한 줄에 하나씩 있고, 너비를 지정할 수 있어요. block 예시 Block 1 Block 2 Block 3 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 2. inline인라인 요소는 문장 안에서 같은 줄에 들어가는 상자입니다.가로 너비는 내용의 크기에 따라 자동으로 결정돼요. ..
VScode 단축키 (맥용) Visual Studio Code
맥북에서 사용하는 Visual Studio Code의 단축키를 몇 가지 주요 카테고리로 나누어 보았다. 파일 및 편집파일 열기: Cmd + O 파일 저장: Cmd + S 파일 저장: Cmd + Shift + S열린 파일 모두 저장: Cmd + Option + S닫기: Cmd + W 전체 창 닫기: Cmd + K, W 되돌리기: Cmd + Z 재실행: Cmd + Shift + Z 잘라내기: Cmd + X 복사: Cmd + C 붙여넣기: Cmd + V 찾기: Cmd + F 찾기 및 바꾸기: Cmd + Option + F 다음 일치 항목 찾기: Cmd + G 이전 일치 항목 찾기: Cmd + Shift + G 창 및 탭새 창 열기: Cmd + N 사이드바 토글: Cmd + B 탭 사이 이동: Cmd + O..
[티스토리] 코드 블럭에 코드 복사 버튼 만들기
AligeJung님의 블로그를 참고하였는데, 일부 수정해서 올려본다!(원본글) 티스토리 코드 복사하는 버튼 만들기티스토리 스킨 편집하다가 검색 기능이랑 더 보기 기능이 눌리지 않아 티스토리 스킨을 복구하면서 기록을 남긴다. 혹시 모르니 이걸 보는 분들이 있다면 더 많은 기능을 추가하기 전에 보관 버agilejung.tistory.com 버튼 작동 방식코드 블럭 밖에 마우스 커서가 있을 때는 아래와 같이 반투명한 상태로 있다가, 코드 블럭 위로 커서가 올라오면 어두워지고, Copy 버튼 위로 커서가 올라오면 (Hover) 배경과 글씨의 색이 반전된다. 그리고 버튼을 클릭하면 Copied! 로 바뀌고 2초 뒤에 원래의 Copy 버튼으로 되돌아 온다.예시 1. clipboard.js 다운로드 2. CodeB..
3D 사람 캐릭터 리소스 사이트 (피그마 연동)
1) humans.wannathis.one무료 데모 버전도 있지만 더 다양한 포즈와 의상을 원한다면 유료 버전 구매가 필요하다 1회성 구매 $482 characters & dog82 different poses6 unique outfitsSuper Heroes12 short animationsFigma, Blender, PNG $10/월 정기 구독1회성 구매 혜택 + 1,200개 추가 에셋 + 매월 신규 디자인 증정 2) products.ls.graphics조금 더 몸이 동글동글하고 귀여운 그래픽사물 그래픽도 다수 있고, 일러스트 외 Mockup도 많으니까 꼭 한번 들려보시길 추천 1회성 구매 $5930+ Chacacters60+ Icons..
