피드
그럼 아래의 코드를 하나하나 살펴보겠습니다. 처음 볼때는 외계어 같던 HTML코드가 점점 쉽고 사용하기 편리하도록 만들어진 언어라는것을 알게 될 거예요. <!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="utf-8"> </head> <body> <!-- Page Content --> Hello Wo...
Published 2 years ago
이 글의 예제는 Tailwindcss를 이용하였습니다. Tailwindcss를 처음 보시는분은 https://tailwindcss.com 를 함께 확인해 주세요. div등 블럭 요소에서 작업을 할 때, border를 주게 되면 1px을 차지하게 되는데 차지하지 않으면서 또는 미세하게 Border Line을 조정하고 싶을 때가 있다. 오른쪽 border line을 기준으로 바깥에 추가 <div class="w-[100px] bg-green-100 shadow-[10px_0px_0px_0px_...
Published 2 years ago
const showAbsoluteBg = () => { AbsoluteDivEl.classList.add(..."absolute inset-0".split(" ")); } const hideAbsoluteBg = () => { AbsoluteDivEl.classList.remove(..."absolute inset-0".split(" ")); }
Published 2 years ago
If you're starting a new project and want a minimal, modern HTML template that's ready for today's frontend tools, this one's for you. Just copy the code below into a .html file, save it, and open it in your browser. If you see “Hello Modern World!” on the screen, it’s working! <!DOCTYPE html>...
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
웹페이지를 만들기 위해서 가장 먼저 하는 일은 페이지의 뼈대가 될 HTML 코드를 입력하는 것입니다. 글을 쓰거나 그림을 그리기 위해 종이를 준비해야 하듯이, 웹페이지는 파일을 만들고 기본 HTML 코드를 넣어 페이지의 내용을 만들 준비를 합니다. 시작할 기본적인 HTML 웹페이지는 다음과 같습니다. <!DOCTYPE html> <html> <head> <!-- Page Head --> <title>My First Webpawwwefwefwege<...
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