Feeds
그럼 아래의 코드를 하나하나 살펴보겠습니다. 처음 볼때는 외계어 같던 HTML코드가 점점 쉽고 사용하기 편리하도록 만들어진 언어라는것을 알게 될 거예요. <!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="utf-8"> </head> <body> <!-- Page Content --> Hello Wo...
Published 2 years ago
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title> <style> [x-cloak] { display: none !important; } </style> <script src="https://cdn.tailwindcss.com"></script> <...
Published 2 years ago
웹페이지를 만들기 위해서 가장 먼저 하는 일은 페이지의 뼈대가 될 HTML 코드를 입력하는 것입니다. 글을 쓰거나 그림을 그리기 위해 종이를 준비해야 하듯이, 웹페이지는 파일을 만들고 기본 HTML 코드를 넣어 페이지의 내용을 만들 준비를 합니다. 시작할 기본적인 HTML 웹페이지는 다음과 같습니다. <!DOCTYPE html> <html> <head> <!-- Page Head --> <title>My First Webpawwwefwefwege<...
Published 2 years ago
모바일 메뉴로 주로 사용하는 왼쪽에서 샤샥~ 하고 나오는 슬라이드 사이드바 예제입니다. 슬라이드 메뉴의 움직임을 보다 쉽게 표현하기 위해서 알파인JS(AlpineJS)와 UnoCSS 에서 Tailwind CSS reset 와 함께 만들었습니다. Essepage 에서 주로 사용하는 코드라서 Essepage 에 복사해서 사용할 수 있도록 기록합니다. 1. 라이브러리 설치 알파인js와 UnoCSS를 테일윈드css로 리셋해서 사용할 수 있게 essepage-head 를 이용해 Essepage 에 불러옵니다. <essepage&...
Published 2 years ago
사이드바 메뉴 Open 👈 클릭해보세요 - Menu Item- Menu Item- Menu Item- Menu Item- Menu Item- Menu Item- Menu Item- Menu Item 모바일 메뉴로 주로 사용하는 왼쪽에서 슥~ 하고 나오는 슬라이드 사이드바 예제입니다. 슬라이드 메뉴의 움직임을 보다 쉽게 표현하기 위해서 AlpineJS와 UnoCSS로 만들었습니다. Essepage 에서 주로 사용하는 코드로 쉽게 Essepage에 복사해서 사용할 수 있습니다. 1. 라이브러리 설치 Alpinejs와 UnoCSS를 e...
Published 2 years ago
모바일 메뉴 등에서 자주 사용하는 햄버거 메뉴 버튼 예제입니다. 버튼의 움직임을 보다 쉽게 표현하기 위해서 알파인JS(AlpineJS)와 UnoCSS 에서 Tailwind CSS reset 와 함께 만들었습니다. Essepage 에서 주로 사용하는 코드라서 Essepage 에 복사해서 사용할 수 있도록 기록합니다. 1. 라이브러리 설치 알파인js와 UnoCSS를 테일윈드css로 리셋해서 사용할 수 있게 essepage-head 를 이용해 Essepage 에 불러옵니다. <essepage-head> <l...
Published 2 years ago
Rainbows are a universal symbol of beauty and wonder, inspiring awe across cultures and continents. While the phenomenon is the same worldwide, the word for "rainbow" varies from language to language, reflecting the rich diversity of human expression. In this blog post, we'll explore how different c...
Published 2 years ago
Essepage 에서 AlpineJS로 작업을 많이 하는데, x-data 안에 여러가지 변수들과 함수들을 적게되면 보기도 불편하고 관리도 어려워서 Essepage 의 @x-data로 파일을 따로 만들어서 사용한다. 파일을 만들 때 항상 입력하는 기본 코드를 복사해서 사용하려고 늘 사용하는 기본 코드를 정리해둔다. 참고로, Essepage 에서 따로 파일로 만든 x-data 코드는 @x-data 로 입력한다. <div x-data="{{@x-data: 파일경로 :@}}"> .....
Published 2 years ago
개발 노트에 마크다운으로 글을 쓸 때 코드 블록에 하이라이트를 쉽게 적용할 수 있는 highlight.js 를 추가하면서 그 방법을 기록해둔다. 이 블로그를 만들고 있는 Essepage 에서 적용하는 방법으로 기록한다. Essepage 에서 highlight.js 적용하는 방법 highlight.js 홈페이지에서 적용하고 싶은 테마를 고른다. https://highlightjs.org/examples 고른 테마의 css 파일을 github 에서 가져온다. 링크를 cdnjs.com 페이지에서 복사한다. https://cdnjs.com...
Published 2 years ago
Rainbows are one of nature's most captivating phenomena, often seen as a symbol of beauty, hope, and wonder. But how exactly are these mesmerizing arcs of color formed in the sky? The creation of a rainbow involves a fascinating interplay of light and water, combined with the principles of optics. I...
Published 2 years ago