word-break 종류

normal긴 문장이 줄바꿈 없이 부모 컨테이너 너비를 초과하지 않는 한 자연스럽게 문장이 다음 줄로 넘어갑니다기본 줄 바꿈 규칙(normal)은 CJK 언어의 중단점은 음절(일본어는 문자)이고, Non-CJK 언어의 중단점은 공백입니다  123456789 가나다라마바사아자차카타파하 abcdefghijklmnopqrstuvwxyz 일이삼사오육칠팔구십 자축인묘진사오미신유술해 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스break-all공백이 아닌 임의의 위치에서도 줄바꿈이 발생할 수 있습니다한국어 문장이 단어 중간에서 끊어져도 상관없는 경우 사용됩니다  123456789 가나다라마바사아자차카타파하 abcd..

티스토리 코드 박스 디자인 스타일 변경 (코드 수정 X)

티스토리 플러그인 수정티스토리 관리 창에서 플러그인 메뉴 선택 코드 문법 강조 플러그인 선택원하는 스타일 선택드롭다운 메뉴를 선택해서 원하는 스타일을 찾으세요

페이퍼로지 폰트 워드프레스 추가 (엘리멘토)

페이퍼로지 뿐만 아니라 원하는 폰트 다 가능한 방법입니다필요한 파일은 Variable 혹은 WOFF와 TTF 파일이에요 1. 페이퍼로지 폰트 WOFF2. TTF 파일 다운로드아래 두 파일 모두 다운로드 후 압축 파일 풀기 2. 폰트 업로드Elemtor 엘리멘토 메뉴 → Custom Fonts 커스텀 폰트 → ADD NEW 새로 추가 원하는대로 폰트 이름 지정하고 Add Static Font 클릭참고로 Variable 폰트가 있다면 하나만 올리면 됩니다 (예. 프리텐다드) 폰트 두께 지정하고 WOFF2 파일과 TTF 파일을 알맞게 업로드하기 처음 폰트 올릴 때, 9가지 다 선택하고 업로드 해놓으면 나중에 편해요이렇게 하나하나 콕콕 찍어서 업로드 올리고 나면 위에 확장명에 쓰여진 두께가 지정한 WE..

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 레이..

커스텀 체크박스 만들기

체크박스는 여러 선택지를 다중으로 선택할 수 있는 인터페이스입니다.  체크 박스 예시  좋아하는 음식 돈까스 제육볶음 상하이 디럭스 " 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 요소를 지정하고, 선언 블록은..

[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..