728x90 > 포트폴리오/맥도날드16 [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. [CSS] flex 사용해서 상자 나열하기 네모박스 flex 써서 나열하기 HTML 정사각형 6개를 준비해준다. 그리고 flex 는 부모에다가 적용하는 것이므로 부모 태그(square-flex)도 하나 생성해줌. CSS /* 정사각형 */ .square { width: 375px; /* 너비 설정 */ height: 375px; /* 높이 설정 */ border-radius: 32px; /* 모서리 둥글게 처리 */ border: 2px solid #ffbe01; margin: 50px; } .square-flex { display: flex; /* justify-content: space-around; 정사각형들이 화면 전체에 고르게 분포하도록 함 */ justify-content: center; align-items: center; flex-.. 2024. 3. 29. [JS] 캐러셀 만들기 (4개 사진)* 캐러셀 만들기 (사진4개) - 버튼 클릭으로 이동 HTML CSS /* 캐러셀 */ .container { /* max-width: 1200px; */ width: 100%; /* height: 200px; */ /* padding: 0 20px 0 20px; */ } .slide-container { width: 400vw; overflow: hidden; justify-content: center; } .slide-box { width: 100vw; float: left; /* 왼쪽으로 치우치게 해준다. */ text-align: center; padding: 0 20px; /* border-radius: 5vw; */ } .slide-box img { /* 사진 조금 잘리는 걸 아래의 코드로 해결... 2024. 3. 26. 이전 1 2 다음 728x90
