본문 바로가기

HTML／CSS85

[HTML/CSS] Tailwind로 캘린더 만들기 안녕하세요 이번시간에는 Tailwind를 사용하여 캘린더를 만들어 보겠습니다. October 2023 Sun Mon Tue Wed Thu Fri Sat 2023. 12. 4.
[HTML/CSS] Tailwind로 사용자 선택 이미지 카드 뷰어 만들기 안녕하세요 오늘은 Tailwind로 사용자 선택 이미지 카드 뷰어 만들어 보겠습니다 test.html 의 코드는 다음과 같습니다. 이미지 제목 여기에 선택한 이미지의 설명을 추가할 수 있습니다. 위 예제를 통해 다음과 같은 결과물을 얻을 수 있습니다. 2023. 12. 1.
[HTML/CSS]카드 컴포넌트 캐러셀 구현 안녕하세요 이번 시간에는 이미지와 같은 컨텐츠를 표시할 때, 여러 개의 아이템을 한 번에 보여주는 캐러셀을 구현해보겠습니다. Swiper 라이브러리와 Tailwind CSS 를 활용하여 만들어보겠습니다. https://stickode.tistory.com/982 위 블로그를 참고해서 먼저 카드 컴포넌트를 만들어 줍니다. 그리고 스와이퍼 사용을 위한 코드를 조금 수정하겠습니다. 이미지 타이틀 1 제목 1 여기에 설명을 작성하세요. 더 보기 이미지 타이틀 2 제목 2 여기에 설명을 작성하세요. 더 보기 이미지 타이틀 3 제목 3 여기에 설명을 작성하세요. 더 보기 2023. 11. 26.
[HTML/CSS]간단한 메모장 만들기 안녕하세요 이번시간에는 메모를 저장하고 확인할 수 있는 간단한 메모장 앱을 만들어보겠습니다. 이 튜토리얼을 통해 기본적인 DOM 조작 방법과 이벤트 리스너 사용 방법을 알아볼 수 있습니다. 먼저 폴더 구조는 다음과같습니다. /memo-app index.html css/ styles.css js/ script.js [index.html] Save Memo [css/styles.css] /* 기본 텍스트 스타일 및 배경색을 설정합니다. */ body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; } /* 메모장 .. 2023. 11. 16.
[HTML/CSS]TailwindCSS 카드 컴포넌트 만들기 안녕하세요 이번시간에는 TailwindCSS로 카드 컴포넌트를 만드는 예제를 작성해보겠습니다. 1. 프로젝트 초기화 및 TailwindCSS 설치 npm init -y npm install tailwindcss 2. TailwindCSS 설정 파일 생성 npx tailwindcss init - 위 명령어 결과로 tailwind.config.js 파일 생성 3. tailwind.config.js 파일 수정 module.exports = { content: ['./**/*.html'], // 프로젝트의 HTML 파일을 대상으로 합니다. // 다른 설정들... } 4. TailwindCSS 스타일 파일 생성 styles.css 파일을 생성한 후, 이 파일 안에 아래의 내용을 추가합니다 @import 'tail.. 2023. 11. 7.
[HTML/CSS] Tailwind로 Mac Terminal 만들기 안녕하세요 이번 게시글에서는 Css 프레임워크인 tailwind로 mac terminal을 만들어 보겠습니다. 먼저 구현하고자 하는 ui는 다음과 같습니다. 다음은 코드 입니다. Terminal Last login: Wed Sep 25 09:11:04 on ttys002 HI!!!! This is Stickcode Example ! 다음은 사용된 tailwind 속성에 대해서 설명드리겠습니다. 1. 전체 구조 ... 이 div는 전체 터미널 창을 중앙에 배치하는 역할을 합니다. w-1/2는 너비를 부모 요소의 50%로 설정합니다. mx-auto는 좌우 마진을 자동으로 설정하여 가운데 정렬합니다. 2. 터미널 창 ... 이 div는 터미널 창의 바깥 테두리를 나타냅니다. w-full은 너비를 100%로 설.. 2023. 11. 5.
[HTML/CSS] 다양한 hover effect를 가진 버튼 만들기 안녕하세요. 이번 게시글에서는 다양한 hover effect를 가지는 button을 Tailwind를 사용해서 만들어 보겠습니다. Tailwind를 처음 접해보시는 분들은 아래의 게시글 먼저 보시는 걸 추천드립니다. https://stickode.tistory.com/541 [ HTML / CSS ] Tailwind CSS 사용해보기 안녕하세요, 오늘은 Tailwind CSS 를 사용해보겠습니다. Tailwind 는 CSS 프레임워크 중 하나로, HTML 안에서 CSS 스타일을 쉽고 빠르게 만들 수 있게 도와줍니다. 스타일 코드가 HTML 안에 있기 때문에 HTML stickode.tistory.com 우선 시연영상입니다. 이렇게 마우스 hover 시 버튼에서 표현해줄 수 있는 다양한 방법이 있습니다. .. 2023. 10. 30.
[HTML/CSS]스켈레톤 UI: 로딩 애니메이션 이번 포스팅에서는 간단한 스켈레톤 UI를 구현하는 방법을 소개하고자 합니다. 스켈레톤 UI는 웹 페이지나 앱에서 콘텐츠가 로딩되는 동안 사용자에게 표시되는 임시 로딩 플레이스홀더입니다. 이는 사용자 경험을 향상시키기 위한 방법 중 하나로, 사용자에게 콘텐츠가 준비 중임을 알리면서 동시에 페이지의 레이아웃을 미리 보여줍니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius.. 2023. 10. 27.
[HTML/CSS] Tailwind 사용해서 indications 있는 input 폼 만들기 https://stickode.tistory.com/541 [ HTML / CSS ] Tailwind CSS 사용해보기 안녕하세요, 오늘은 Tailwind CSS 를 사용해보겠습니다. Tailwind 는 CSS 프레임워크 중 하나로, HTML 안에서 CSS 스타일을 쉽고 빠르게 만들 수 있게 도와줍니다. 스타일 코드가 HTML 안에 있기 때문에 HTML stickode.tistory.com HTML과 Tailwind CSS 를 사용해 indications이 있는 Input 폼을 만들어 보겠습니다. tailwind 사용방법은 위의 게시글로 확인해주세요. 우선 결과물 먼저 보여드리겠습니다. 다음은 전체 코드입니다. DOCTYPE html> Password * Valid password 사용한 Tailwind.. 2023. 8. 29.

티스토리툴바