강상원의 IT 블로그

본문 바로가기

Contents

Recent Posts

Trending Posts

Web (HTML, CSS) 블로그 다크 모드 토글 스위치 만들기 이번 포스팅에서는 블로그에 다크 모드를 적용하고, 다크/라이트 모드를 전환할 수 있는 토글 스위치를 만드는 방법을 알아보자.특히, 사용자 기기의 기본 모드 설정을 우선으로 하고, 이후 사용자가 설정한 다크 모드 선택을 저장하여 브라우저에 기록하는 기능도 포함시킨다.다크 모드 기본 설정 및 Font Awesome 아이콘 불러오기먼저 다크 모드 구현을 위해 필요한 설정을 적용하고, 토글 스위치 아이콘에 사용할 Font Awesome 아이콘을 불러오자. 아이콘을 추가하기 위해서는 Font Awesome의 CDN 링크를 추가해야 한다. 이번에는 `fa-sun`과 `fa-moon` 아이콘을 사용할 것이다.Font Awesome CDN 추가Font Awesome을 통해 태양과 달 모양의 아이콘을 사용하면 사용자가 ..
Network 네트워크 개요 (프로토콜, 회선/패킷 교환, LAN, WAN) 네트워크의 정의와 그 구성요소컴퓨터와 컴퓨터가 데이터를 주고받는 것이 네트워크이고 그것을 실행하는 방법이 데이터 통신이다. 컴퓨터 네트워크는 컴퓨터와 통신 매체, 데이터로 이루어진다.데이터 통신을 통해 정보를 주고받으려면 데이터를 가진 컴퓨터, 데이터를 받는 컴퓨터, 이 둘을 연결하는 통신 매체가 필요하다.인터페이스, 프로토콜데이터가 지나는 통신 매체와 컴퓨터를 연결할 때 필요한 접속구를 인터페이스(Interface)라고 부른다. 데이터를 주고받을 때 규칙이 필요한데, 데이터를 보내는 쪽과 받는 쪽이 동일한 규칙을 사용해야 데이터가 올바르게 전달될 것이기 때문이다. 이 규칙을 프로토콜(Protocol)이라 한다.프로토콜은 데이터를 다루는 방법이나 주고받는 순서 등을 결정한다.사람 대화와 네트워크 ..
Web (HTML, CSS) 티스토리 블로그 상단바(메뉴바) 애플 홈페이지 느낌 내기 1. Apple 홈페이지 메뉴바 둘러보기애플사 홈페이지는 화려한 전환 효과와 다채로운 애니메이션으로 유명하다. 그중에서도 특히 나의 블로그에 적용하고 싶었던 부분은 애플 특유의 반투명 블러 이펙트(뿌연 느낌?)가 적용된 고정 상태바이다. 티스토리의 HTML / CSS 편집 기능을 통해 블로그에 이러한 느낌을 내는 방법을 알아보자. 2. Tistory CSS 수정하기 티스토리 블로그에서 상단바를 담당하는 CSS 코드는 `#header` 부분이다. 이 부분에 상단바의 위치, 너비, 높이, 색상 등 속성이 서술되어 있다. 이 CSS 코드를 수정하기 위하여 블로그 관리 홈으로 들어간다.티스토리에서 HTML / CSS 소스 코드를 수정하는 방법은 대부분 알고 있으리라 생각하지만 혹시 모르는 분들을 위해 서술하겠다..

티스토리툴바