728x90 > 포트폴리오/nff20 [CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover) 참고[Ajax] 맥도날드에다가 데이터 넣기 (tistory.com) [Ajax] 맥도날드에다가 데이터 넣기여기 칸칸이에 사진 띄울 예정.우선 html 최하단에 script 태그를 열어서console 창에 잘 실행되는 지 강의들었던 예시 갖고와서 확인.콘솔창에 잘 갖고와지는 거 확인되면 내 데이터 갖고올 준비하jamongsoda.tistory.com[CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover) (tistory.com) [CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover)hover 사용해서 마우스를 이미지에 올렸을 때가격하고 제목 띄우도록 만들기./* 정사각형 */.square-flex { display: flex; justify-content: center; al.. 2024. 8. 31. [CSS] 리액트 적용 전 서브 페이지 만들기 (1) 메인 중앙 container 만 수정해줘서안에 아이템들을 채워줄 예정.- grid 사용해주기- hover 시 효과1차 HTML 만들어주기HTML 우선 이렇게 html 을 짜줬다. 3개씩 3줄을 만들어줄 예정이므로flex 보다는 grid 를 쓸 예정.CSS// 서브페이지 아이템.item-container { display: grid; grid-template-columns: repeat(3, .. 2024. 8. 30. [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. [리액트] will-change: transform; 속성 사용하기 밑줄 크기 조정 중,각 메뉴에 있는 밑줄 굵기가 들쭉날쭉하게 나타나는 현상이 발생.- js 로 만든 코드에서는 들쭉날쭉하길래 vw 로 바꿔줬더니 해결돼서그대로 리액트에 코드를 옮겼는데 들쭉날쭉 현상이 다시 생겼다. li { margin-bottom: 1.1875rem; a { position: relative; &::after { content: ""; position: absolute; height: 0.2vw; //px 로 하니까 밑줄 크기 들쭉날쭉했음. width: 0%; left: 0; bottom: -5px; background-colo.. 2024. 8. 18. [리액트] js 로 짠 코드에서 리액트로 옮길 때 나타나는 css 차이 수정 .container { display: flex; flex: 1; min-height: 100vh; // 리액트 추가min-height 추가 - 화면 창 끝까지 aside 와 content 가 내려가지 않는 모습이어서 추가해줬다 2024. 8. 18. [리액트] 작성한 코드 리액트로 옮기기 (SCSS 사용) 참고 글이미지 넣는 법 & public 폴더 이용하기 (tistory.com) 이미지 넣는 법 & public 폴더 이용하기 jamongsoda.tistory.com기존에 짠 코드 리액트로 옮기기. 1. 우선 리액트로 만들 폴더 생성.리액트 React 설치와 개발환경 셋팅 (tistory.com) 리액트 React 설치와 개발환경 셋팅개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - 남자답게 숫자 높은 최신버전 써도 되는데 그로 인한 버그와 배포시 에러는 알아서 감수해야함 - 설치 경로는 C드라jamongsoda.tistory.com해당 코드 보면서 만듦.다 따라해주고,visual studio code 로 해당 파일안에 있는 nff 파일을 열어주기.(파일 안에 또 .. 2024. 8. 12. [CSS] news ticker 만들기 보호되어 있는 글 입니다. 2024. 8. 11. [SCSS] aside 꾸미기 HTML SEARCH SHOP for hair for neck for fingers BOARD notice q / a SCSS// 사이드 바.sidebar { text-align: center; font-size: 1.3vw; font-weight: bold.. 2024. 8. 1. 이전 1 2 3 다음 728x90
