HTML／CSS85 [HTML/CSS] Tailwind로 비밀번호 일치 여부 확인하기 안녕하세요 오늘은 Tailwind로 회원가입 비밀번호 일치 여부 확인해보겠습니다. 해당 회원가입 폼은 입력 값에 대한 유효성 검사를 실시간으로 수행하고 유효성 검사가 통과되면 제출 버튼이 활성화됩니다. index.html 파일에 다음과 같이 코드를 작성합니다. 회원 가입 이름 유효한 이름을 입력하세요. 이메일 유효한 이메일 주소를 입력하세요. 비밀번호 비밀번호가 너무 짧습니다. 비밀번호 확인 비밀번호가 일치하지 않습니다. 제출 다음과 같은 결과를 얻을 수 있습니다. 2024. 4. 24. [HTML/CSS] @keyframes 활용 마우스 클릭 이벤트 오늘은 HTML/CSS 자바스크립트를 활용하여 마우스 클릭 이벤트를 만들어보겠습니다. @keyframes @keyframes 을 사용하면 웹 페이지에 동적인 시각 효과를 추가할 수 있습니다. 이를 통해 사용자의 주의를 끌거나, 인터페이스의 상호작용성을 향상시킬 수 있습니다. 예를 들어, 버튼에 마우스를 올렸을 때 부드럽게 색상이 변하는 효과나, 페이지 로딩 시 요소가 점진적으로 나타나는 효과 등을 구현할 수 있습니다. 기본사용법 @keyframes animation-name { from { /* 시작 상태 스타일 */ } to { /* 끝 상태 스타일 */ } } 퍼센트 사용법 @keyframes animation-name { 0% { /* 시작 상태 스타일 */ } 50% { /* 중간 상태 스타일 *.. 2024. 4. 20. [HTML/CSS] Tailwind로 유효성 검사 기능이 들어한 회원가입 만들기 안녕하세요 오늘은 Tailwind로 유효성 검사 기능이 들어한 회원가입 만들어보겠습니다. 해당 회원가입 폼은 입력 값에 대한 유효성 검사를 실시간으로 수행하고 유효성 검사가 통과되면 제출 버튼이 활성화됩니다. index.html 파일에 다음과 같이 코드를 작성합니다. 회원 가입 이름 유효한 이름을 입력하세요. 이메일 유효한 이메일 주소를 입력하세요. 제출 다음은 위에 대한 시연 영상입니다. 2024. 4. 15. [HTML/CSS] Bootstrap의 Toast 기능 사용하기 안녕하세요. 이번 시간에는 Bootstrap에 있는 토스트(Toast) 기능을 사용해보겠습니다. 1. 토스트(Toast) 기능이란? 토스트(Toast) 기능은 사용자에게 메시지나 알림을 간단하게 표시하는 기능입니다. 일반적으로 페이지의 상단이나 하단에서 작은 팝업 창으로 나타나며, 일시적인 정보나 알림을 표시하는 데 사용됩니다. 2. Bootstrap 불러오기 이 예제에서는 CDN으로 Bootstrap을 불러오겠습니다. 3. 전체 코드 토스트 보여주기 Bootstrap 시간 정보 안녕하세요. 토스트 메시지. 4. 실행 결과 2024. 4. 8. [HTML/CSS] 레이아웃 만들기 안녕하세요 이번 게시글에서는 기본 레이아웃을 만들어보겠습니다. Header, Sidebar, Content, Footer 가 있는 기본 레이아웃입니다. 1. Header 로고와 페이지 이동을 위한 소메뉴를 배치했습니다. 2. Sidebar 페이지 이동을 위한 소메뉴를 배치했습니다. 3. Content 원하는 콘텐츠를 추가할 수 있습니다. 4. Footer 기본적인 footer ui로 구성했습니다. 우선 시연영상입니다. 다음은 전체 코드 입니다. Logo 메뉴1 메뉴2 메뉴3 홈 자유게시판 마이페이지 설정 콘텐츠 © 2023 Stickcode™. All Rights Reserved. About Privacy Policy Licensing Contact 2024. 3. 16. [HTML/CSS] Bootstrap으로 아코디언 만들기 이번 시간에는 Bootstrap으로 아코디언을 만들어보겠습니다. 1. 아코디언이란? 아코디언(Accordion)은 웹 디자인에서 자주 사용되는 UI 패턴 중 하나입니다. 아코디언은 섹션을 축소 및 확장할 수 있는 상호작용 컴포넌트로, 사용자가 특정 섹션을 선택하면 해당 섹션이 펼쳐지고, 다른 섹션들은 축소됩니다. 2. Bootstrap 불러오기 이 예제에서는 CDN으로 Bootstrap을 불러오겠습니다. 3. 전체 코드 자주하는 질문 인공지능과 머신러닝의 차이는 무엇인가요? 인공지능은 인간의 지능적인 특성을 컴퓨터 시스템에 구현하는 더 큰 개념이며, 머신러닝은 그 중에서도 데이터 학습을 강조하는 특별한 기술이라고 볼 수 있습니다. 즉, 모든 머신러닝은 인공지능이지만, 모든 인공지능이 머신러닝은 아닙니다... 2024. 3. 12. [HTML/CSS] CTA 만들기 안녕하세요 이번 게시글에서는 HTML, CSS를 활용해서 CTA를 만들어보겠습니다. CTA란 Call to action의 약자로 유저의 즉각적인 반응을 유도하거나 즉각적인 판매를 장려하기 위한 마케팅 용어입니다. 보통 메인 페이지에 서비스를 설명할 수 있는 페이지로 이동하게끔 하는 버튼을 놓거나 사진을 배치하는 편입니다. 우선 구현하려고하는 CTA 예시입니다. 다음은 전체 코드입니다. Mother earth hosts your travel The state of Utah in the United States is home to lots of beautiful National Parks, Bryce National Canyon Park ranks as three of the most magnificent .. 2024. 3. 7. [HTML/CSS] Bootstrap으로 네비게이션 드로어 만들기 이번 시간에는 Bootstrap으로 웹페이지에서 네비게이션 드로어를 만드는 예제를 진행하겠습니다. 1. 준비 Bootstrap은 프론트엔드 툴킷으로, 프론트엔드를 빠르고 예쁘게 만드는데 유용합니다. 이 예제에서는 CDN 링크로 Bootstrap을 사용해보겠습니다. 아래의 CDN 링크를 HTML 스틱코드 네비게이션 바 테스트 네비게이션 바 홈 링크 서랍 정보 1 정보 2 다른 것들 Search 3. 실행 결과 2024. 2. 24. [HTML/CSS] 슬라이드쇼 만들기 안녕하세요 오늘은 흔히 볼수 있는 광고 이미지와 같은 HTML과 CSS, 자바스크립트를 사용하여 간단한 자동 이미지 슬라이드쇼를 구현해보겠습니다. 코드입니다. DOCTYPE html> /* CSS 스타일을 내장시키는 태그입니다. */ .Slidesbackground { margin: 0; padding: 0; /* .Slidesbackground 클래스에 대한 스타일을 정의합니다. 여백(margin)과 내부 여백(padding)을 0으로 설정합니다. */ } .slideshow-image { border-radius: 3%; width: 100%; height: 100%; overflow: hidden; /* .slideshow-image 클래스에 대한 스타일을 정의합니다. 이미지의 모서리를 둥글게 하고.. 2024. 2. 16. 이전 1 2 3 4 ··· 10 다음
