JudithHopps JudithHopps

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%; }

목적 : 인풋값과 맞는 테이터 리스트를 출력하기 코드 실행 : {{inputRestList[rest-1]}} const inputRestList = computed(() => { return highwayDataArray.filter((data) => data.includes(inputRest.value)); }); 실행 코드를 완성하기 전, 1. data.startsWith(inputRest.value))로 작성했을 때는 인풋값으로만 시작하는 검색어만 떠서 삭제했다. 2. data.match(inputRest.value))로 작성한 적이 있는데, 입력칸에 "("를 작성하려 할 때 콘솔창에 이런 에러창이 떴다.

목적 : 사용자 input한 데이터로 시작하는 list의 값만 출력하기 구현 : 1. input값에 v-model을 이용한다. 2. v-model 값을 ref로 작성한다. 3. 검색창에 뜰 Array를 작성해준다. - 서버에서 데이터 받을 경우에는 부모 컴포넌트에서 suspense를 작성해준다. 4. input할 때마다 list가 달라지게 computed로 작성해준다. 5. filter와 starsWith를 작성해서 restList를 작성해준다. - (필터하고 싶은 array).startsWith("시작해야하는 문구") 식으로 작성해주면 된다. 아래 스크립트 참고. import { ref, computed,defineProps,defineEmits } from "vue"; import axios from..

script setup부분에서 emit을 어떻게 사용하는지가 관건이다. 사용 방법 : 1. 자식 컴포넌트에서 defineEmits을 import해준다. import { defineEmits } from "vue"; 2. emit을 선언해준다. const emit = defineEmits(['select']); emit('select', { selectedHighway: selectedHighway.value, selectedRestarea: selectedRestarea.value }); 3. 부모 컴포넌트에서 자식 컴포넌트를 import할 때 emit을 받아온다. @뒤에 있는 문구는 자식 컴포넌트의 emit 변수명이다. 함수는 아래 부모 컴포넌트에서 값을 받아올 함수명이다. 4. 부모 컴포넌트에서 아래..

에러 : 해결 방법 : 컴포넌트를 따로 생성한 후 부모 컴포넌트에서 suspense를 사용해준다 ==> 즉 자식 컴포넌트가 준비 될 때까지 부모 컴포넌트에서 대기하게 한다. 코드 : But...로드하는 과정이 자연스럽지 않아 #fallback문을 작성하는 것이 좋다. 아래 코드를 참고하길 바란다. 카테고리 :

완성화면 : 배운 것 : 1. style에서 데이터바인드를 이용하려면 :를 앞에 붙여야 한다. 2. 별점을 체크할 때는 빈 별과 채워진 별을 만들어 겹치는 부분을 hidden 처리하는 것이다. 3. 상위 div에서 위치를 relative로 설정하고 하위 div의 위치를 absolute로 설정하면 위 span과 위치가 같아진다. 4. 기본적으로 &star, &hearts 등 유니코드를 지원해준다. 코드 : ☆ ★ .star-rating{ position: relative; color:gold; display: inline-block; } .star-rating_check{ position: absolute; top:0; color:gold; overflow: hidden; white-s..