본문 바로가기

CSS18

엠비티아이 검사 자바스크립트 엠비티아이 검사 자바스크립트웹사이트 방문자가 자신의 성격 유형을 간편하게 파악할 수 있는 MBTI 검사는 사용자 참여 도구로서 블로그 트래픽 유입과 체류 시간 증대에 효과적입니다. 특히 워드프레스 포스팅 내에서 바로 실행 가능한 스크립트를 삽입하면 별도 페이지 이동 없이 독자 경험을 높일 수 있습니다. 본 가이드에서는 순수 HTML/CSS/JavaScript만으로 구성된 MBTI 검사 위젯을 워드프레스 포스트 안에 직접 삽입하는 방법을 단계별로 설명합니다.목표: 워드프레스 포스트 본문에 복사·붙여넣기만으로 작동하는 MBTI 검사 스크립트 코드를 제공대상: 프론트엔드 개발자, 블로거, 워드프레스 운영자요구사항: 워드프레스 에디터의 텍스트(HTML) 모드에서 스크립트 태그를 허용하는 환경이어야 함엠비티아이 .. 2025. 4. 27.

bootstrap selectpicker multiple js 수정: 전체 선택이 체크 되어 있는 상태에서 다른 옵션이 하나라도 체크 해제될 경우 전체 선택도 같이 체크 해제 되게 bootstrap selectpicker multiple js 수정: 전체 선택이 체크되어 있는 상태에서 다른 옵션이 하나라도 체크 해제될 경우 전체 선택도 같이 체크 해제되게Bootstrap은 웹 개발에서 많이 사용되는 프론트엔드 프레임워크로, 다양한 UI 컴포넌트와 스타일을 제공해 개발자들이 쉽고 빠르게 웹사이트를 구축할 수 있도록 돕습니다. 그중에서도 bootstrap-select는 기본 HTML 요소를 더욱 세련되게 보이도록 커스터마이징하는 데에 사용됩니다. 특히 selectpicker는 사용자가 여러 개의 옵션을 선택할 수 있는 멀티 셀렉트(dropdown) 기능을 제공합니다. 그러나 이 멀티 셀렉트 기능을 사용할 때, "전체 선택(Select All)" 옵션과 관련된 기능을 구현하는 과정에서.. 2024. 8. 23.

자바스크립트로 근로기준법 연차일수 계산기 만들기 자바스크립트로 근로기준법 연차일수 계산기 만들기자바스크립트를 사용하여 근로기준법 연차일수 계산기를 만드는 방법에 대해 알아보겠습니다. 연차휴가 계산기는 근로자의 입사일, 근로기간, 그리고 출근율을 기준으로 연차휴가일수를 자동으로 계산해주는 도구입니다. 이 글에서는 간단한 자바스크립트 코드를 통해 연차휴가일수를 계산하는 방법을 단계별로 설명하겠습니다.근로기준법 연차일수 계산기필요한 준비물연차휴가 계산기를 만들기 위해서는 다음과 같은 준비물이 필요합니다:HTML 파일: 사용자 인터페이스를 만들기 위한 HTML 코드CSS 파일: 스타일링을 위한 CSS 코드자바스크립트 파일: 연차휴가일수를 계산하는 로직을 포함한 자바스크립트 코드HTML 코드 작성먼저, HTML 파일을 작성합니다. 이 파일에는 사용자 입력을 받.. 2024. 6. 16.

JavaScript RGB 색상표 JavaScript RGB 색상표웹 퍼블리싱과 디자인 작업을 할 때 RGB 색상 코드를 사용하는 경우가 많습니다. 이러한 작업을 효율적으로 하기 위해 JavaScript로 RGB 색상표를 구현하면 편리합니다. 이 글에서는 JavaScript로 RGB 색상표를 구현하는 방법과 그 활용 방안에 대해 설명하겠습니다.RGB 색상 이해하기RGB는 Red(빨강), Green(초록), Blue(파랑)의 약자로, 이 세 가지 색상의 조합으로 다양한 색상을 표현할 수 있습니다. 각 색상은 0에서 255까지의 값을 가지며, 이를 조합하여 16,777,216가지의 색상을 만들 수 있습니다. 예를 들어, (255, 0, 0)은 순수한 빨간색을 나타내고, (0, 255, 0)은 순수한 초록색을, (0, 0, 255)은 순수한 .. 2024. 5. 19.

부트스트랩 width grid incorrect 부트스트랩을 활용한 웹 디자인에서 가로 폭 조절 부트스트랩은 반응형 웹 디자인을 쉽게 만들어주는 프레임워크입니다. 그런데 때때로, 특히 새로 시작하는 분들에게는 그리드 시스템이나 컨테이너 사용에 있어 혼란을 줄 수 있습니다. 여기서는 부트스트랩의 가로 폭(width) 관련 문제를 해결하는 방법에 대해 설명하고자 합니다. 부트스트랩의 그리드 시스템 이해 부트스트랩의 그리드 시스템은 컨테이너, 행(row), 그리고 열(column) 세 가지 주요 구성 요소로 이루어져 있습니다. 이들은 반응형 레이아웃을 만들기 위해 서로 함께 작동합니다. 기본적으로, .row 클래스는 가로 방향의 여백을 만들어내는데, 이는 열들이 적절한 간격을 유지할 수 있도록 합니다. 그러나 이 여백은 .row가 부모 요소의 경계를 벗어나.. 2023. 10. 22.

CSS 텍스트 네온사인 만드는 방법 CSS 텍스트 네온사인 만드는 방법 네온 텍스트는 웹 사이트에 멋진 미래적인 느낌을 추가할 수 있습니다. CSS와 애니메이션을 활용하면 다양한 방법으로 텍스트에 빛나는 효과를 적용할 수 있습니다. 이 포스팅에서는 CSS 텍스트 네온사인 만드는 방법을 소개하고자 합니다. 텍스트에 글로우 효과 추가 먼저 텍스트에 글로우(빛나는) 효과를 추가하는 방법부터 알아보겠습니다. 이를 위해서는 CSS의 text-shadow 속성을 사용합니다. 다음과 같이 CSS를 작성하여 글로우 효과를 만들 수 있습니다. .neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px.. 2023. 10. 7.

썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 ✈ 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jQuery 가로세로 비율 웹사이트나 애플리케이션을 제작하면서 이미지의 비율이나 크기를 맞추는 것은 중요한 작업 중 하나입니다. 특히, 썸네일이나 대표 이미지와 같은 고정된 영역에 다양한 크기와 비율의 이미지를 표시해야 할 때, 그 이미지를 영역에 꽉 차게 보여주면서도 넘치는 부분을 잘라내야 할 필요가 있습니다. 이미지의 가로와 세로 비율을 고정된 영역에 맞추려면, 서버에서 이미지를 잘라내거나 리사이징하는 방법이 있습니다. 하지만 이 방법은 원본 이미지의 품질을 손상시킬 수 있기 때문에, CSS나 jQuery를 활용하여 원본 이미지를 그대로 유지하면서도 원하는 비율에 맞게 보여주는 방법을 찾아야 합니다. CSS를 활.. 2023. 10. 6.

✈ CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last 2014년에 작성했던 글입니다. 블로그를 옮기는 중이라... 쿨럭 text-align:justify; text-justify:~ 속성은 골 때리게도 CSS2에는 포함되지 않고, CSS3에는 포함이 되어 있고, IE 구버전들은 일부 지원을 하고, 9 이상에서는 지원이 되지 않는 웃긴 양상을 보이는 텍스트 속성이다. 더 귀찮은 것은 골 때리게도, 이 속성을 공무원님들이 너무 좋아라 하신다는 거다. -_-; 군정시대 습성들이 남아 계신 건지 글씨들이 각 맞춰서 열 맞춰서 서 있기를 바라는 분들이 간혹 있다. 그러면서 단어는 음절단위에서 개행하지 않게 해 달란다. 아하~ 나처럼 이런 갈굼을 당하는 퍼블리셔들이 많으신지, 의외로 검색 유입에 text-align:justify를 검색하는 사람들이 꽤 있다. 그분들의.. 2020. 9. 15.

📌[CSS] div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle css로 div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle 결론부터 말하자면, div인데 table의 cell처럼 동작을 시키기 위한 방법이다. div의 높이가 고정되어 있을 때 텍스트 를 세로의 중간에 정렬 시킬 필요가 있을 때가 있다. 테이블에서 valign을 center로 주었을 때처럼 보이게 한기 위한 것이다. https://youtu.be/6NkVYitGQDM 보통 css에서 수직정렬에서 가운데에 정렬시키고 싶을 때는 vertical-align:middle을 사용한다. 하지만 div에서는 vertical-align:middle만으로는 수직 가운데 정렬이 되지 않는다. 이 때 div의 display속성을 ta.. 2020. 9. 4.

이전 1 2 다음

티스토리툴바