[Javascript] URL 인코딩, 디코딩 방법

URL 인코딩은 웹 개발에서 매우 중요한 작업 중 하나입니다. 브라우저는 URL에서 일부 문자를 특정 형식으로 변환하여 서버가 정확하게 이해할 수 있도록 처리합니다. 자바스크립트에서는 URL을 인코딩하거나 디코딩하는 데 사용할 수 있는 다양한 내장 함수들이 있습니다. 이 글에서는 자바스크립트를 사용하여 URL을 인코딩하는 방법과 각각의 함수가 어떤 상황에서 유용한지 알아보겠습니다.  1. encodeURI 함수encodeURI는 전체 URL을 인코딩하는 데 사용됩니다. 이 함수는 URL의 구성 요소(예: :, /, ?, &)를 유지하면서 나머지 문자를 인코딩합니다.See the Pen encodeURI 함수 by saladent (@saladent) on CodePen.특징URL 전체를 인코딩할 때 적..

• format_list_bulleted javascript
• · 2025. 1. 24.
• textsms

[JavaScript] 사용자 브라우저 체크하기

사용자 브라우저를 체크하는 기능은 웹 개발에서 중요한 부분 중 하나입니다. 브라우저에 따라 기능 지원 여부가 다를 수 있기 때문에, 사용자 경험을 개선하려면 이를 파악하는 것이 필요합니다. 이번 글에서는 JavaScript를 사용해 사용자 브라우저 정보를 확인하는 방법을 알아보겠습니다.  1. Navigator 객체 활용하기JavaScript에서 브라우저 정보를 가져오는 가장 기본적인 방법은 navigator 객체를 사용하는 것입니다. navigator.userAgent 속성을 활용하면 브라우저 정보 문자열을 확인할 수 있습니다.See the Pen Navigator 객체 활용하기 by saladent (@saladent) on CodePen.위 코드로 출력된 문자열은 사용자의 브라우저와 관련된 다양한..

• format_list_bulleted javascript
• · 2025. 1. 23.
• textsms

[CSS] 이미지 투명도 설정하기

웹사이트 디자인에 있어서 투명 효과는 깔끔하고 세련된 느낌을 줍니다. 특히 이미지에 투명도를 적용하면 디자인 요소가 조화롭게 어우러질 수 있습니다. 이번 포스팅에서는 CSS를 사용하여 이미지를 투명하게 만드는 다양한 방법을 소개합니다.  1. opacity 속성 사용하기opacity 속성은 요소의 불투명도를 조절할 수 있는 CSS 속성입니다. opacity 값은 0에서 1 사이의 값을 가지며, 0은 완전히 투명하고, 1은 완전히 불투명합니다.See the Pen Untitled by saladent (@saladent) on CodePen.위 예제에서는 opacity: 0.5;를 적용하여 이미지가 50% 투명해집니다.  2. filter: opacity() 사용하기CSS filter 속성도 투명도를 조..

• format_list_bulleted CSS
• · 2025. 1. 12.
• textsms

[CSS] 가로, 세로 가운데 정렬하는 방법

1. 텍스트를 가로 중앙 정렬하는 방법text-align 속성 사용text-align 속성을 사용하면 블록 요소 안의 텍스트를 가로로 가운데에 정렬할 수 있습니다..container { text-align: center;}다음은 예제입니다.See the Pen 텍스트를 가로 중앙 정렬하는 방법 by saladent (@saladent) on CodePen.  2. 요소를 가로 중앙 정렬하는 방법margin 속성 사용 (수평 가운데 정렬)margin: auto;를 사용하면 block 요소를 가로 중앙에 정렬할 수 있습니다..box { width: 50%; margin: 0 auto;}다음은 예제입니다.See the Pen 요소를 가로 중앙 정렬하는 방법 by saladent (@saladent) ..

• format_list_bulleted CSS
• · 2025. 1. 12.
• textsms

[CSS] 폰트 굵기 변경하기 - font-weight

웹사이트 디자인에서 텍스트 스타일링은 사용자 경험과 가독성을 높이는 데 중요한 요소입니다. 특히 강조하고 싶은 단어나 문장은 글자를 두껍게 표시하여 시각적인 강조를 줄 수 있습니다. 이번 포스팅에서는 CSS를 사용하여 글자를 두껍게 만드는 다양한 방법을 소개하겠습니다.  1. font-weight 속성 사용하기CSS에서 글자를 두껍게 표시할 때 가장 많이 사용하는 방법은 font-weight 속성을 사용하는 것입니다..bold-text { font-weight: bold; /* 또는 700 */} font-weight 값 설명normal (기본값): 보통 두께 (일반적으로 400)bold: 두꺼운 글자 (일반적으로 700)숫자 값 (100 ~ 900): 폰트의 두께를 세밀하게 조정할 수 있습니다. ..

• format_list_bulleted CSS
• · 2025. 1. 11.
• textsms

[CSS] 글자 폰트 색상 바꾸는 방법

1. 기본 문법CSS에서 글자 색상을 변경하려면 color 속성을 사용합니다.selector { color: 색상값;}예제 코드See the Pen Untitled by saladent (@saladent) on CodePen.   2. 색상 지정 방법color 속성의 값으로 다양한 형식을 사용할 수 있습니다. 2.1 색상 이름 (Color Name)CSS는 red, blue, green 등 색상 이름을 제공합니다.color: red;2.2 HEX 코드16진수 코드로 색상을 지정합니다.color: #ff5733; /* 오렌지색 */2.3 RGB 및 RGBARGB는 Red, Green, Blue 값을 0~255 범위로 지정합니다. RGBA는 투명도를 추가할 수 있습니다.color: rgb(255, 99..

• format_list_bulleted CSS
• · 2025. 1. 11.
• textsms

옵시디언(Obsidian)에서 줄간격 조절하는 방법

옵시디언(Obsidian)은 다양한 기능과 사용자 정의 옵션을 제공하여 효율적인 메모 작성과 관리를 돕는 강력한 도구입니다. 그러나 기본적인 편집 환경 설정에서 줄간격 조절을 바로 찾기 어려워하는 경우가 많습니다. 본 가이드에서는 옵시디언에서 줄간격을 조절하는 방법을 단계별로 설명하겠습니다.  기본 설정 확인하기옵시디언에서는 기본적으로 CSS를 활용하여 메모 작성 화면의 스타일을 사용자 정의할 수 있습니다. 줄간격을 조절하기 위해서는 사용자 스타일 시트를 편집해야 합니다.  사용자 스타일 시트(Custom CSS) 적용하기옵시디언은 사용자가 스타일을 커스터마이징할 수 있도록 snippets 기능을 제공합니다. 다음 단계에 따라 스타일 조정 파일을 만들어 보세요. 단계 1: snippets 폴더 생성옵시디..

• format_list_bulleted 기술팁
• · 2025. 1. 11.
• textsms

[CSS] 이미지 동그랗게 원형으로 만들기

이미지의 모서리를 둥글게 처리하면 더 세련된 디자인을 만들 수 있습니다. CSS를 사용하여 이미지를 둥글게 만드는 방법을 단계별로 설명하겠습니다.  원형 이미지 만들기이미지를 동그랗게 원형으로 만들려면 border-radius 값을 50%로 설정합니다. 이 경우 가로와 세로가 같은 비율일 때 완벽한 원형이 됩니다.See the Pen 원형 이미지 만들기 by saladent (@saladent) on CodePen.  타원형 이미지 만들기타원형 이미지를 만들기 위해서는 border-radius를 50%로 설정하면서 가로와 세로 비율을 다르게 지정합니다.See the Pen 타원형 이미지 만들기 by saladent (@saladent) on CodePen.위 코드를 적용하면 가로가 더 긴 타원형 이미..

• format_list_bulleted CSS
• · 2025. 1. 9.
• textsms

[CSS] 이미지에 그림자 효과 넣기

이미지에 그림자 효과를 적용하면 시각적으로 깊이감을 주고, 디자인을 보다 돋보이게 할 수 있습니다. CSS의 box-shadow 속성을 사용하면 다양한 그림자 스타일을 적용할 수 있습니다. 이번 글에서는 box-shadow의 기본 사용법과 다양한 응용 예제를 소개합니다.  box-shadow 기본 사용법box-shadow 속성은 요소에 그림자를 추가하는 속성입니다.See the Pen box-shadow 기본 사용법 by saladent (@saladent) on CodePen.위 코드에서는 이미지에 x축 5px, y축 5px으로 그림자를 설정했으며, 블러 반경은 10px로 흐림 효과를 주었습니다. rgba(0, 0, 0, 0.5)는 반투명한 검은색을 의미합니다.  다양한 box-shadow 설정그림자..

• format_list_bulleted CSS
• · 2025. 1. 9.
• textsms

[CSS] 이미지 테두리 둥글게 만들기

이미지의 모서리를 둥글게 만들면 부드러운 디자인을 연출할 수 있습니다. CSS에서는 border-radius 속성을 사용하여 모서리의 둥글기 정도를 쉽게 조절할 수 있습니다. 이번 글에서는 다양한 border-radius 설정 방법과 응용 예제를 소개합니다.  border-radius 기본 사용법border-radius 속성은 요소의 각 모서리를 둥글게 만드는 데 사용됩니다.아래 예제에서는 이미지의 모든 모서리를 10픽셀 반경으로 둥글게 설정했습니다.See the Pen Untitled by saladent (@saladent) on CodePen.  특정 모서리만 둥글게 만들기각 모서리를 개별적으로 조정하려면 border-radius 속성에 네 가지 값을 지정할 수 있습니다.아래 설정에서는 이미지의 ..

• format_list_bulleted CSS
• · 2025. 1. 8.
• textsms