728x90 전체 글483 [SCSS/JS/React] 검색창 만들기 검색창 만들기 우선 js 파일에서 만들어줬다. 그리고 리액트로 옮겨줄 생각. 카테고리에 있는 Search 글자를 누르면검색창이 뜨고 검색창 프레임 밖 아무곳을 누르면 검색창이 사라지게끔 할 예정.HTML SEARCHWrapper 안 쪽 맨 위에 코드 짜줌.예전에 맥도날드 만들었을 때 만든 코드 참고해줬다.[CSS] 검색창 만들기 (tistory.com) [CSS] 검색창 만들기HTML 불투명한 검은 배경을 생성하기 위해search-overlay 라는 div태그를 하나 더 추가해줌.SCSS/*검색창*/.search-container { display: none; .search-overlay { positio.. 2024. 8. 30. [리액트] js 로 토글했던 메뉴바 수정하기 (삼항연산자 / 논리 AND 연산자) 참고할만 한 주소https://jamongsoda.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-%EB%8F%99%EC%A0%81%EC%9D%B8-UI-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B2%95-%EB%AA%A8%EB%8B%AC%EC%B0%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0 리액트 환경에서 동적인 UI 만드는 법 (모달창 만들기) jamongsoda.tistory.com 처음에 짠 오류코드= 메뉴바가 하나만 클릭해도 둘 다 동시에 열림. import { useState } from "react";import "./style/main.scss";function.. 2024. 8. 28. [CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover) hover 사용해서 마우스를 이미지에 올렸을 때가격하고 제목 띄우도록 만들기./* 정사각형 */.square-flex { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; .square { position: relative; width: 375px; height: 375px; border: 1px solid $main_color; margin: 20px; overflow: hidden; img { object-fit: cover; width: 100%; height: 100%; } &:hover .overlay-wrap { .. 2024. 8. 26. [CSS] 이미지 수정하기 ( object-fit: cover; ) 내가 원하는 것: 이미지 변형 안오게 하고 정사각형 안에 들어가게 하기 현재 상태의 html 햄버거 KRW 5,500 트리플 치즈버거 KRW 6,000 더블 치즈버거 KRW 6,000 .. 2024. 8. 26. [CSS] 검색창 만들기 HTML 불투명한 검은 배경을 생성하기 위해search-overlay 라는 div태그를 하나 더 추가해줌.SCSS/*검색창*/.search-container { display: none; .search-overlay { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); /* 검정색 투명 배경 */ z-index: 998; } .search { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /.. 2024. 8. 26. [Ajax] 맥도날드에다가 데이터 넣기 여기 칸칸이에 사진 띄울 예정.우선 html 최하단에 script 태그를 열어서console 창에 잘 실행되는 지 강의들었던 예시 갖고와서 확인.콘솔창에 잘 갖고와지는 거 확인되면 내 데이터 갖고올 준비하기.https://kku-git.github.io/Mcdonald_menu/product.json 내 데이터 넣어서 잘 나오나 확인.HTML CSS/* 정사각형 */.square { width: 375px; height: 375px; border: 1px solid $main_color; margin: 20px;}.square-flex { display: flex; justify-content: cente.. 2024. 8. 24. [깃] 맥도날드 데이터 깃허브에 넣기 repository 를 우선 public 으로 생성해줌그러면 이런 창이 뜬다.여기서 creating a new file 클릭해줌.상단에 이름 써주고품목 배열 데이터 넣어줌.그리고 녹색버튼 눌러주면 데이터가 올라온거 확인할 수 있다.추가로Settings 들어간 다음에Settings - pages 란에서 Branch 수정해주기위와 같이 수정해줌.json 파일 만들어주기Create new file 선택해주기이름 지정에 .json 을 붙여준다.그리고 녹색 버튼 눌러줌.이렇게 저장해줌.이미지 넣어주기upload files 클릭해서 이미지 넣어주기파란 글자 클릭한꺼번에 9개 사진 올려주고,하단의 녹색버튼 클릭잘뜨는거 확인 가능.https://kku-git.github.io/Mcdonald_menu/product.j.. 2024. 8. 24. [SCSS] scss 수정 및 캐러셀 수정 2024. 8. 24. [SCSS] 맥도날드 css 에서 scss 로 수정 @import url("https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@100..900&display=swap");/* CSS Reset - 기본 설정 */* { margin: 0; padding: 0; box-sizing: border-box;}/* body태그 기본 마진 삭제 */body { margin: 0px; cursor: url("banner/mcdonaldslogo 60.png"), default;}/* 전체 틀 */.wrapper { width: 100%;}/* 헤더 */.header { width: 100%; padding: 20px; background: rgb(255, 255, 255); border-top: 10.. 2024. 8. 20. 이전 1 2 3 4 5 6 7 ··· 54 다음 728x90
