CSS 썸네일형 리스트형 [CSS] Antd CSS 수정하기 Ant Design - The world's second most popular React UI framework Ant Design - The world's second most popular React UI frameworkAn enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprisesant.design Antd에서 기능을 import해서input, button, Modal 심지어 Dropdown까지 모던한 디자인의 요소들을 사용할 수 있습니다.그런데 색깔이나 크기가 마음에 안든다면 CSS를 수정해야.. 더보기 [jQuery] jQuery의 CSS를 이용한 기능 jQuery를 사용하면 무궁무진한 기능들을 만들 수 있습니다.제가 만든 낚시 게임의 메인 기능은 낚시, 상점, 캐스팅인데그 외에 시각적으로 재미있는 요소들을 몇 개 넣어봤습니다.메인 기능을 소개하기 앞서, 그 부분을 먼저 리뷰해볼까 합니다. 오른쪽에 메뉴들이 보이시나요? 그 중에서 6개의 모드 먼저 리뷰해보겠습니다.각각 지정된 지정키가 있는데이 부분은 jQuery의 키 이벤트를 사용해서해당 키를 눌렀을 때 어떤 이벤트가 발생하게 구현했습니다.키 이벤트를 사용하는 코드를 살펴보겠습니다. C키를 누르면 상태창의 배경색을 변경하려고 했습니다. $(document).keydown(function(e) { if (e.keyCode === 67) { //C키 let randomColor = Math.f.. 더보기 [jQuery] CSS jQuery의 css메소드를 써서선택자에 따른 css를 부여할 수 있습니다.이때 jQuery문의 구조는 $("선택자").css("속성명", "값") 형태입니다.예제 코드를 살펴보겠습니다. script type ="text/javascript" src ="jQuery.js">script>script type ="text/javascript">$(function(){ // $("선택자").css("속성명", "값"); $("#btn1").click(()=>{ $("h1").css("color", "teal"); $("h1").css("background-color", "pink"); });}); #btn1이라는 선택자.. 더보기 [CSS] Animation 실습을 진행하다가강사님께서 대뜸 처음 보는 HTML코드를 쓰셨는데효과가 나타나서 신기했다. marquee behavior = "alternate">숫자만 3자리, 중복숫자 Xmarquee> 좌우로 움직이는 효과인데 GPT에게 CSS로 해당 코드를 짜려면 어떻게 하는지 물어봤다. !DOCTYPE html>html lang="en">head>meta charset="UTF-8">meta name="viewport" content="width=device-width, initial-scale=1.0">title>Marquee Alternate Effecttitle>style>.marquee-alternate {width: 300px; /* 컨테이너 너비 */height: 50px; /* 컨테이너 높이 */ma.. 더보기 [HTML] 로그인 페이지 구현 이번 시간에는 HTML과 CSS를 사용해서로그인 페이지를 구현해보겠습니다.코드를 보면서 설명해드리겠습니다. html>head>meta charset="UTF-8"> link rel = "stylesheet" href = "css/whitepage.css"> head 태그 안에 link태그로 css를 불러와 줘야 css를 적용할수있습니다. head>body> div class = "title"> 회원가입 div> img src = "dust.png" class = "dust"> 이미지 태그를 사용해서이미지를 불러옵니다. div class = "input-section">form action = "http://localhost/Jan13_1_Servlet/Output2?">ID : input name = ".. 더보기 [React] Nutriguide Landing Page 코드 리뷰 안녕하세요! 오늘 부터는 완성된 Nutriguide의 페이지 코드를 하루에 하나씩 리뷰해보려고 합니다. 그럼 시작하겠습니다 : ) NutriGuide는 3일치의 식단을 입력받고 사용자에게 부족한 영양소 정보를 추출해서 영양제를 추천해주는 사이트입니다. LandingPage에는 간단히 각 페이지의 정보를 보여줍니다. AI 건강 상담 버튼을 누르면 AI 건강 상담 페이지로, AI 영양제 추천 버튼을 누르면 식단 인풋 페이지로 이동합니다. import React from 'react';import { Link, useNavigate } from 'react-router-dom';import { Button } from 'antd';import myImage from '../img/logo.png'; i.. 더보기 이전 1 2 3 다음 목록 더보기
