본문 바로가기

HTML／CSS91

[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.
[HTML/CSS] bootstrap selectbox 안녕하세요. 부트스트랩을 이용하여 selectbox를 쉽게 만들어 보겠습니다. * 결과 * 준비 https://stickode.tistory.com/821 참고해서 부트스트랩을 사용할 수 있게 해주세요 * 코드 A B C D E F select 태그의 class = "form-select"값을 주었습니다. 셀렉박스의 윗 공간에 여백을 주기 위해 mt-4 속성값을 주었습니다. mt는 margin top에 해당됩니다. * 전체 코드 DOCTYPE html> A B C D E F * 기타 속성 글자 크기, 비활성화도 설정가능하니 공식사이트를 참고하여 적용하시길 바랍니다. https://getbootstrap.com/docs/5.3/forms/select/#default Select Customize the n.. 2023. 7. 12.
[HTML/CSS] table contenteditable 속성 사용하기 안녕하세요! Table로 수정 등의 input이 가능하게 하는 기능들을 구현 시에 이전에는 td안에 input 요소를 넣어, input 내에서 사용자가 글씨를 입력할 수 있도록 했었는데요. 오늘은 'contenteditable' 속성을 사용해서 바로 요소 내부에서 글자를 적고 수정할 수 있도록 해보겠습니다. disabled,required등의 속성 알지만, contenteditable은 대체 뭘까요? -The contenteditable global attribute is an enumerated attribute* indicating if the element should be editable by the user. If so, the browser modifies its widget to allow .. 2023. 6. 24.
[HTML/CSS] bootstrap Grid, border 안녕하세요. 오늘은 bootstrap을 이용하여 편리하게 공간을 분배해보겠습니다. - 완성 - bootstrap 셋팅 bootstrap을 쓸 수 있도록 추가해줍니다. - grid (class 속성) col-8 col-3 col-1 class 속성값으로 row, col을 사용합니다. row한 줄을 12칸으로 나눠 8칸, 3칸, 1칸을 차지한다는 뜻입니다. - border (class 속성) col-8 col-3 col-1 눈에 보이지 않으므로 테두리를 설정해봅니다. border-success는 저 이름의 색상이 정해져있습니다. 아래 border-danger도 마찬가집니다. 아래 테두리만할지, 전체테두리인지 등을 설정해줍니다. 자세한 값은 공식홈페이지를 참고해주세요 - Color and background .. 2023. 6. 12.

티스토리툴바