フィード
Tailwind CSSを使って作業する際、JavaScriptで複数のクラス名を制御する必要があることがあります。しかし、JavaScriptのclassListプロパティのaddやremoveメソッドでは、それぞれのクラス名を個別の文字列として入力する必要があるため、不便です。 const myDivElement = document.querySelector(".myDiv"); const showAbsoluteBg = () => { myDivElement.classList.add("absolute", "inse...
Published 6 months ago
ウェブページ制作は、ウェブブラウザがインストールされているコンピュータがあればすぐに始められます。普段ウェブページを見るために使っているブラウザを、今度は自分で作成したウェブページを確認するためのツールとして利用できるのです！ ブラウザ 代表的なブラウザには、次のようなものがあります： Google Chrome Microsoft Edge Firefox Safari すでにこれらのブラウザのどれかを使っているでしょう。また、BraveやArcなど他のブラウザを試してみても構いません。自分に合ったブラウザを選びましょう。 コードエディター ウェブページを作成するには、ファイルを編集するため...
Published 6 months ago
MANGCHI 2024 Don’t feel small. 기죽지 않는 위풍당당 강아지 망치. 우즈스튜디오의 마스코트인 망치를 캐릭터화하여 디자인에 활용한 굿즈 브랜드입니다. 주황색을 포인트 컬러로, 블랙과 화이트, 그레이를 서브 컬러로 잡아 통통튀는 무드를 전달합니다. Creative direction Seoyoung Choi Art direction Seoyoung Choi Design Via Im Client MANGCHI Year 2024
Published 6 months ago
5H 2024 완벽한 내차 관리 솔루션. The perfect solution for car management. 내 차가 생기는 순간부터 자동차 관리의 여정은 시작됩니다. 5H는 이 모든 여정에서 당신이 더 편해질 수 있도록 최고의 솔루션을 제시합니다. 우리는 자동차 광택제품, 세차제품은 물론 자동차 유지·보수를 위한 모든 제품과 서비스를 선보입니다. 자동차 관리는 끝이 없습니다. 하지만 5H와 함께라면 훨씬 쉬워질 수 있습니다. 시작해보세요. 완벽한 내차 관리 솔루션, 5H Creative direction Seoyoung Ch...
Published 6 months ago
ウェブページを作るには、HTMLを知っておく必要があります。 でも安心してください。ウェブを発明したティム・バーナーズ＝リー（Tim Berners-Lee）は、誰でも簡単にウェブページを作れるようにHTMLを設計しました。だから、難しく感じるかもしれませんが、実はシンプルで覚えやすいものです。 例えば、基本的なHTMLコードは次のようになります。 <!DOCTYPE html> <html> <head> <title> My First Webpage </title> <meta charset="utf-...
Published 6 months ago
この例では、Tailwind CSSを使用しています。Tailwind CSSに不慣れな方は、https://tailwindcss.com をご確認ください。 div などのブロック要素に border スタイルを追加すると、1pxのスペースが必要になります。しかし、1pxも取らずに細いラインでボーダーラインを調整したい場合もあります。 このような場合は、シャドウ（Shadow）プロパティを使用することができます。 右ボーダーラインの外側に追加 <div class="shadow-[10px_0px_0px_0px_rgba(0,75,255,0.95)] w...
Published 6 months ago
블로그를 만들다가 파티클 애니매이션을 추가하려다 보니, SCSS 로 작업해야하는 부분이 있어서 Essepage 에서 SCSS 를 사용하는 방법에 대해 기록해둡니다. 자바스크립트로 브라우저에서 SCSS 를 컴파일하는 방법으로, SASS 팀의 블로그에서 소개한 방법을 참조했습니다. https://sass-lang.com/blog/sass-in-the-browser/ 테스트를 위한 코드 예제입니다. <div> <span class="colored-text">빨간색 글자</span>...
Published 9 months ago
Essepage 에서 여러 페이지로 이루어진 웹페이지를 만들 때, 헤더나 푸터 처럼 여러 페이지에 공통으로 사용되는 부분을 essepage-component 로 만드는 방법에 대해 포스팅합니다. 1. 푸터로 사용할 페이지 만들기 우선, 푸터로 사용할 페이지를 추가합니다. 여기서는 예제를 위해서 public 아래에 footer 라는 폴더를 만들고 그 안에 +page.essepage 파일을 만들겠습니다. 파일이 추가되었다면, 푸터로 사용할 페이지에 HTML 코드를 작업합니다. 예제가 필요한 분은 아래 코드를 이용해보세요^^ &l...
Published 9 months ago
alksjdalksjdlkasjdlaksd 블로그를 만들다가 파티클 애니매이션을 추가하려다 보니, SCSS 로 작업해야하는 부분이 있어서 Essepage 에서 SCSS 를 사용하는 방법에 대해 기록해둡니다. 자바스크립트로 브라우저에서 SCSS 를 컴파일하는 방법으로, SASS 팀의 블로그에서 소개한 방법을 참조했습니다. https://sass-lang.com/blog/sass-in-the-browser/ 테스트를 위한 코드 예제입니다. <div> <span class="colored-text"...
Published a year ago
구글 애드센스를 내 블로그에 연결하면서, 소유권 확인을 메타 태그로 하고 검토요청을 오후에 하고 다음날 오전에 승인이 되었다는 연락을 받았습니다. 그런데... ads.txt 가 없으면 수익 손실 위험이 있다면서 겁을 주네요^^;;; 그럼, 추가해보겠습니다. txt 파일과 같은 텍스트 포맷 파일들은 Essepage 의 베이직 플랜 이상의 유료 플랜에서만 텍스트 포맷으로 이용할 수 있습니다. 무료 플랜에서는 텍스트가 아닌 웹페이지로 표시되는 점 참고하세요. 추가할 구글 애드센스 ads.txt 내용 확인 Google Adsense 에 로...
Published a year ago