Development/Web (HTML, CSS) (8) 썸네일형 리스트형 나의 마크다운 블로그 포스트 작성 루틴 블로그 포스트를 작성할 때, 글의 구조와 가독성, 강조 효과 등을 적절히 표현하기 위해 Markdown을 활용한다. 키보드만으로 빠르게 콘텐츠를 구성할 수 있어 효율적이며, 작성한 글을 블로그에 복사해 붙여 넣었을 때 웹에서도 동일하게 볼 수 있는 장점이 있다. 여러 종류의 에디터 중 Typora를 선택한 이유와 이미지를 다루는 방법, 강조 스타일, 마크다운 다이어그램 등을 다루는 과정을 소개한다.마크다운 작성과 에디터 선택Notion은 개인적인 메모나 자료 정리에 탁월한 도구이지만, 블로그 포스트 작성에서는 Typora를 선택하였다. Typora는 실시간 미리보기를 제공하며, 작성 즉시 최종 모습을 확인할 수 있다는 장점이 있다. 또한 사진 자료의 자동 업로드를 지원해 이미지 경로 문제를 최소화하며, .. 블로그 다크 모드 토글 스위치 만들기 이번 포스팅에서는 블로그에 다크 모드를 적용하고, 다크/라이트 모드를 전환할 수 있는 토글 스위치를 만드는 방법을 알아보자.특히, 사용자 기기의 기본 모드 설정을 우선으로 하고, 이후 사용자가 설정한 다크 모드 선택을 저장하여 브라우저에 기록하는 기능도 포함시킨다.다크 모드 기본 설정 및 Font Awesome 아이콘 불러오기먼저 다크 모드 구현을 위해 필요한 설정을 적용하고, 토글 스위치 아이콘에 사용할 Font Awesome 아이콘을 불러오자. 아이콘을 추가하기 위해서는 Font Awesome의 CDN 링크를 추가해야 한다. 이번에는 `fa-sun`과 `fa-moon` 아이콘을 사용할 것이다.Font Awesome CDN 추가Font Awesome을 통해 태양과 달 모양의 아이콘을 사용하면 사용자가 .. 티스토리에서 백틱(`)으로 인라인 코드 블록 표시하기 블로그를 작성할 때 코드 스니펫을 공유하는 일이 빈번하다. 특히 인라인 코드 블록은 문장 중간에 코드를 강조하기 위해 사용되는데, Notion 등 사용이 익숙하면 백틱(`)으로 간단하게 인라인 코드를 표시할 수 있다. 그렇다면 티스토리(Tistory)나 다른 블로그 플랫폼에서도 동일하게 구현할 수 있을까? 이번 포스트에서는 백틱을 사용하여 인라인 코드 블록을 쉽게 표시하는 방법을 소개해 본다.1. 문제 상황티스토리에서는 기본적으로 백틱을 사용하여 인라인 코드를 표시하는 기능을 제공하지 않는다. 따라서 블로그 포스트 작성 시 `이와 같은` 인라인 코드 강조를 위해 매번 태그를 직접 입력해야 하는 불편함이 있다.2. 해결 방법백틱을 사용하여 인라인 코드를 쉽게 표시하기 위해 JavaScript를 활용할 수 .. Visual Studio Code Live Server 플러그인으로 웹 개발 쉽게 하자 HTML / CSS / JS 등으로 웹 개발을 할 때, 수정된 사항을 직접 확인하기 위해 VS Code에서 저장하고, 웹브라우저에서 새로고침하는 작업을 반복하는 경우가 많다.필자는 왼쪽에 에디터, 오른쪽에 브라우저를 띄워 놓고 작업하는데 계속해서 프로그램을 왔다갔다 하면서 조작하는 게 여간 귀찮은 일이 아니었다.이런 불편함을 해소해 줄 비주얼 스튜디오 코드의 플러그인을 소개한다. Live Server 플러그인은 Visual Studio Code 에디터에서 저장`(Ctrl + S || Cmd + S)`이 감지되면 자동으로 로컬 서버를 통해 웹브라우저에 수정사항을 반영해 보여준다.Visual Studio Code의 '확장' 탭에서 "Live Server"를 검색하여 설치한다. 설치된 후 확인할 html/ht.. Neumorphism (뉴모피즘) CSS로 만들기 1. 뉴모피즘 소개 디자인 커뮤니티인 Dribble에 한 디자이너가 새로운 형태의 UI 디자인을 올렸고, 이것이 큰 호응을 얻으면서 뉴모피즘은 2020년도에 주목받는 UI 트렌드 중 하나가 되었다. (New + Skeuomorphism = Neumorphism) 이를 웹사이트에 적용하기 위한 효과적이면서도 간단한 방법을 찾다 보니 box-shadow 속성을 이용하면 비교적 쉽게 구현 가능하다는 사실을 알게 되었다. 1-1. Neumorphism.io 사용 우선 슬라이더로 다양한 옵션을 조절해 복사 -붙여넣기 가능한 CSS 코드를 만들어주는 서비스인 Neumorphism.io를 소개하고자 한다. 이를 이용하면 손쉽게 원하는 뉴모피즘 효과에 해당하는 코드를 얻을 수 있다. Neumorphism/Soft UI.. 웹사이트 상단 진행바 넣기 / HTML 16진수 색상코드 쉽게 얻는 법 1. Progress Bar 적용하기스크롤이 있는 페이지에서, 페이지 상단에 현재 어느 정도까지 읽었는지 표시되는 Progress Bar를 적용하는 방법을 다뤄보고자 한다. 위 사진과 같이 읽은(스크롤한) 정도에 따라 차오르는 진행바는 다음과 같은 내용을 웹페이지의 `body` 태그 안에 넣어서 적용할 수 있다. 1-1. PrognRoll jQuery 플러그인 CDN으로 적용 height 우측에 있는 숫자를 수정해서 진행바의 굵기를 설정할 수 있디. 1-2. 색상코드 찾아서 넣기진행바의 색깔은 16진수 색상코드를 입력해서 설정하는데, 위 예시의 경우는 `#ab9bbf`으로, 연보라색이다.갓구글 검색을 이용하면 색상코드 값을 쉽게 구할 수 있는데, 구글에 위 예시인 `#ab9bbf`를 .. 스크롤에 따라 애니메이션 효과 적용해주는 간단 라이브러리: AOS 1. AOS(Animate On Scroll) 라이브러리 소개가끔 웹서핑을 하다 보면 스크롤 위치에 따라 글자, 사진 등의 컨텐츠가 나타나는 효과가 적용된 사이트를 볼 수 있다. 스크롤을 했을 때 요소에 나타나기 애니메이션 효과를 구현해주는 라이브러리를 소개하고자 한다.바로 `AOS(Animate On Scroll Library)`이다. 간단한 적용 예시와 설명은 라이브러리 홈페이지에서도 확인할 수 있다.https://michalsnik.github.io/aos/ AOS - Animate on scroll libraryAOS Animate On Scroll Library Scroll downmichalsnik.github.io 2. 준비 과정혹 JavaScript를 다루는 방법을 모르더라도, `div`.. 티스토리 블로그 상단바(메뉴바) 애플 홈페이지 느낌 내기 1. Apple 홈페이지 메뉴바 둘러보기애플사 홈페이지는 화려한 전환 효과와 다채로운 애니메이션으로 유명하다. 그중에서도 특히 나의 블로그에 적용하고 싶었던 부분은 애플 특유의 반투명 블러 이펙트(뿌연 느낌?)가 적용된 고정 상태바이다. 티스토리의 HTML / CSS 편집 기능을 통해 블로그에 이러한 느낌을 내는 방법을 알아보자. 2. Tistory CSS 수정하기 티스토리 블로그에서 상단바를 담당하는 CSS 코드는 `#header` 부분이다. 이 부분에 상단바의 위치, 너비, 높이, 색상 등 속성이 서술되어 있다. 이 CSS 코드를 수정하기 위하여 블로그 관리 홈으로 들어간다.티스토리에서 HTML / CSS 소스 코드를 수정하는 방법은 대부분 알고 있으리라 생각하지만 혹시 모르는 분들을 위해 서술하겠다.. 이전 1 다음
