코드펜(CodePen)코드펜(CodePen)은 웹 개발자들이 HTML, CSS 및 JavaScript 코드를 테스트하고 시연하는 데 사용되는 온라인 코드 편집기입니다. 사용자는 실시간으로 코드를 작성하고 수정하면서 결과를 바로 확인할 수 있습니다. 코트펜은 웹 개발에 관심이 있는 사람들이 코드를 공유하고 다른 사람들의 작업물을 참고하며 학습하는 데에도 활용됩니다.코트펜은 다음과 같은 주요 기능을 제공합니다.실시간 미리 보기: 코드를 작성하거나 수정할 때마다 결과를 실시간으로 확인할 수 있습니다.다양한 렌더링 옵션: HTML, CSS, JavaScript를 작성할 수 있는 세 개의 에디터 패널이 제공되며, 사용자는 필요에 따라 각각의 언어를 분리하여 작업할 수 있습니다.외부 라이브러리 및 프레임워크 지원:..

키보드 버튼을 아이콘으로 표현키보드 버튼을 아이콘으로 표현하는 것은 시각적인 효과를 높이고 사용자에게 직관적인 인터페이스를 제공할 수 있습니다. 아이콘을 사용하면 텍스트보다 더 간결하고 시각적으로 잘 구별되기 때문에 사용자들이 글을 더 쉽게 이해하고 읽을 수 있습니다. 특히, 기술적인 주제나 사용자 인터페이스 설명과 같은 경우 키보드 버튼 아이콘이 매우 유용하며, 사용자가 어떤 키를 눌러야 하는지 명확하게 알려줍니다. 또한, 키보드 단축키를 설명할 때나 튜토리얼을 작성할 때도 아이콘을 사용하면 작업이 더 간편해질 수 있습니다. 따라서 키보드 버튼을 아이콘으로 표현하는 것은 사용자 경험을 향상하고 글을 더욱 쉽게 읽히도록 만들어줄 수 있습니다.키보드 아이콘 CSS.keyboard { color: black..

티스토리 단축키글작성할 때 단축키를 사용하게 되면 글작성 시간을 단축할 수 있기 때문에 알아두면 좋은 정보입니다. windows에서도 사용가능하고 Mac에서도 간편하게 사용이 가능하기 때문에 참고하셔서 사용해 보도록 하세요.문단 스타일 단축키문단 스타일WindowsMach1Alt + Shift + 1⌃ + ⌥ + 1h2Alt + Shift + 2⌃ + ⌥ + 2h3Alt + Shift + 3⌃ + ⌥ + 3h4Alt + Shift + 4⌃ + ⌥ + 4h5Alt + Shift + 5⌃ + ⌥ + 5h6Alt + Shift + 6⌃ + ⌥ + 6pAlt + Shift + 7⌃ + ⌥ + 7divAlt + Shift + 8⌃ + ⌥ + 8addressAlt + Shift + 9⌃ + ⌥ + 9h1 문단 스타..

댓글에 미디어 첨부댓글에 이미지나 동영상을 첨부할 수 있는 기능을 사용하는 것에는 여러 가지 장점이 있습니다.시각적인 효과: 이미지나 동영상을 첨부하면 글의 내용을 더욱 시각적으로 풍부하게 만들어줍니다. 이로 인해 댓글이 눈에 더 잘 띄고 사용자들의 관심을 끌 수 있습니다.설명 보충: 이미지나 동영상을 사용하면 글의 내용을 더욱 명확하게 설명할 수 있습니다. 복잡한 개념이나 상황을 시각적으로 보여줌으로써 독자들이 쉽게 이해할 수 있도록 도와줍니다.상호 작용 및 참여 촉진: 이미지나 동영상을 첨부하는 것은 댓글을 작성하는 사용자들 사이의 상호 작용과 참여를 촉진할 수 있습니다. 다양한 콘텐츠를 공유함으로써 의견을 나누고 토론을 이끌어내는 데 도움이 됩니다.정보 공유: 이미지나 동영상을 통해 추가 정보나 관..

탭 형식 글작성탭 형식으로 글을 작성하는 것에는 몇 가지 장점이 있습니다.정돈된 레이아웃: 탭을 사용하면 여러 개의 섹션을 정돈된 형태로 구성할 수 있습니다. 이렇게 되면 글의 구조가 더 명확해지고 독자들이 내용을 쉽게 찾아볼 수 있습니다.공간 절약: 탭을 사용하면 여러 섹션을 단일 페이지에 효율적으로 표시할 수 있습니다. 이는 사용자가 여러 페이지를 이동할 필요 없이 모든 내용에 쉽게 접근할 수 있도록 도와줍니다.사용자 경험: 사용자가 필요한 정보에 빠르게 액세스 할 수 있도록 도와주므로 사용자 경험을 개선할 수 있습니다. 사용자는 필요한 정보에 따라 원하는 탭을 클릭하여 내용을 보고, 불필요한 내용을 건너뛸 수 있습니다.시각적인 흥미: 탭은 시각적인 요소로서 페이지에 다양한 요소를 추가할 수 있는 기..

괄호제거티스토리에 기본으로 표시되는괄호를 제거하고 자신이 원하는 스타일로커스텀하기 위해 괄호를 제거합니다.제거방법제가 사용하고 있는 프라치노 공간을기준으로 설명드리겠습니다.각 스킨마다 방법은 다를 수 있지만티스토리 치환자를 기본으로 하기 때문에방법은 똑같다고 보셔도 되겠습니다.괄호제거 스크립트const side_category = document.getElementById('sidebar');const c_cnt = side_category.getElementsByClassName('c_cnt');for (i = 0; i 이 스크립트는 다음과 같은 작업을 수행합니다.sidebar ID를 가진 요소를 찾아 side_category 변수에 할당합니다.side_category 요소 내부..