JudithHopps JudithHopps

홍보 사이트 제작 5일차 - 2022.12.23 금 [오늘한 것] 1. 버튼 컴포넌트 개발 2. 캐로셋 [리팩토링] - 자동으로 캐로셋 전한 : active 속성을 추가 / 제거하는 것을 작성해야할 것으로 예상한다.

홍보 사이트 제작 4일차 - 2022.12.22 목 [오늘한 것] 1. grid로 컨텐츠 개발 2, 컨텐츠 제작 ------------------------------------------------------ 컨텐츠 나열 ------------------------------------------------------ 홍보 사이트 제작 5일차 - 2022.12.23 금 item-3과 5 변화

홍보 사이트 제작 3일차 - 2022.12.21 수 [오늘한 것] - ul 생성 : 컨텐츠와 active 이벤트 - 클릭 이벤트 : ppt로 이미지 ui 만들기 - api : postman으로 mockserver 만들기 [리팩토링할 것] - article 나열 height 조절 >> ul과 li에서 조절이 되지 않음 - script setup에서 api 받아오기 : 아래 코드에서 console창에 article이 출력되는 것까지는 확인함 import { ref } from 'vue'; const active= ref(0); // let articles=[]; // async function getList() { // articles = await this.$api( // "https://317063c7-..

홍보 사이트 제작 2일차 - 2022.12.20 화 - intro 페이지 화면 구성 - 스크롤 이벤트 [시도한 것] 1. div 영역의 레이아웃 grid로 설정 .container { display: grid; place-items: center; height: 100vh; max-width: 100%; position: relative; } 2. 텍스트 그라데이션 #raon{ background: -webkit-linear-gradient(-70deg,#e23a3a97 40%,orange 60%,rgba(233, 242, 102, 0.859)90% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: trans..

홍보 사이트 제작 1일차 2022.12.20 - 부트스트랩 적용 - 홈페이지 꾸미기 [의문점] 1. css에서는 :hover 효과가 적용이 되는데 template 안에서 background-color hover 효과를 주면 되지 않는다. 이유가 궁금하다. - hover 이벤트 작동되지 않음 (생략) button:hover { background-color: white; color:#ff7f00; } - hover 이벤트 작동됨 (생략) button{ font-size:0.8em; font-weight:bolder; background-color: #ff7f00; color:white; width:8em; } button:hover { background-color: white; color:#ff7f00; }

A. 헤더 1. 로고 사진 반응형으로 width 수정 .image-wrapper{ width:50%; } .logo { max-width: 100%; height: auto; } 2. 로그인 시 프로필 사진 표시 후 드롭다운 설정하기 My page 닉네임 수정 프로필 사진 수정 로그아웃 3. 헤더 화면 줄일 시 아이콘 밑으로 내려오는 것 수정 .headerDesign { max-width: 100%; margin: 0 auto; max-height:100%; } B. 헤더& 푸터 상관관계 1. 헤더 디자인 - 푸터 디자인 위치 맞추기 class="d-flex align-items-lg-center me-4" C. 푸터 1. 푸터 바닥으로 붙이기 .footer { position: absolute; bot..

구현 화면 : 구현 방법 : home 화면에서 input 태그를 form으로 감싼다. input name을 설정한다. url 파라미터 값을 받아온다. const url = new URL(window.location.href); const urlParams = url.searchParams; let query = urlParams.get('query'); 원하는 곳에 배치한다.

완성샷 : 알고리즘 : input 박스를 감싸는 태그(div)의 css는 position을 relative로 설정하기 input 박스를 감싸는 태그(div)의 css는 display를 inline-block으로 설정하기 img css의 position을 absolute로 설정하기 input의 padding과 img의 위치를 설정한다. 코드 : {{inputRestList[rest-1]}} .search{ position: relative; display: inline-block; } .icon{ position: absolute; top:20%; left:1%; width: 30px; padding:5px; opacity: 70%; }