본문 바로가기

분류 전체보기

 (108)
[해결][스타벅스 클론코딩] 다른 요소에 가려져(?) 버튼 hover이 안된다ㅎㅎㅎ - position과 z-index 자세히 보기 버튼의 hover기능이 작동하지 않는다....ㅠㅡㅠㅡㅠㅡㅠ 왜 그러는지 정확히는 모르겠지만 저 이미지에 가려서 그런게 아닐까 싶은데... 저 요소를 display:none 해서 지워보면 마우스를 올려보면 hover기능이 활성화 되어서 자세히 보기 버튼의 색이 변한것을 확인했다..!! 이제 저 컵 이미지 때문이란것은 알았따.... 조만간 해결책을 꼭 들....고... 오겠ㄸ r..................ㅠㅡㅠㅠㅠㅠㅠㅠㅠ ㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠ 버튼에 z-index : 1을 해줘도 안됐었는데.......... position : relative를 같이 써주니까 바로 해결이 되었다..ㅎㅎㅎㅎㅎㅎㅎㅎㅎ( 바보 ) position이 relative나 absolute 이여야 z-index를 사용할..
[ css ] background - position과 size position 과 size 속성을 사용해서 배경 이미지를 만들 것이다. position이랑 size속성을 이용해서 배경 이미지를 조절 할 수 있다는 생각은 못하고 margin값을 줘서 사이즈를 조절하려고 했었다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 포지션이랑 사이즈 속성을 사용안하고 하려니까 배경이미지가 짤리고 내부 요소들에 margin값을 줘서 전체 사이즈를 만들려고 했....ㅎㅎㅎㅎ 이렇게 하면 절대 안됨......ㅠㅡㅠ 100% 100% / auto 85% 순서대로 position / size를 나타낸다. 가로 100% 세로 100%의 위치에서 사이즈는 가로 auto 세로 80%를 의미 한다! 0% 0% / auto 50% 를 준다면 가로 세로가 0%인 위치에서 세로 50% 축소된 이미지가 된다..! 예시로 들..
[ css ] ::before / ::after before와 after는 css3의 가상요소이다. - content를 꼭 사용해야한다..! ::before / ::after 는 선택한 요소 앞, 혹은 위에 가상 콘텐츠를 삽입한다. 아래 사진은 spring_season_blend_page 클래스의 앞과 뒤에 가상 콘텐츠로 꽃 배경을 넣어 주었다. 여기서 content는 before와 after를 사용할 때 꼭 사용하는 속성이다! HTML에는 존재하지 않고 css에서만 존재하는 가상 콘텐츠이기 때문에 자바스크립트로 제어하기 어렵다. content: ""; 를 안써주면 추가가 되지않는다..! background로 이미지를 주고 width값과 height를 주어야 이미지가 제대로 나온다..! + 수정..!!!!! 위에 처럼해도 잘 나오는데 backgroun..
[스타벅스 클론코딩] css - 드롭다운 메뉴 - width값 화면 전체 차지하도록..! ( 해결 ) 드롭다운메뉴를 만들었다...ㅎ 근데 width값을 화면 전체로 주고싶은데 안돼서 left값을 -410px만큼 줘서 화면 시작부터 끝까지 차게 만들어줬다ㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠㅠㅠwidth 100%를 주면 될까 싶었는데 그러면 nav를 1100px만큼만 줘서그런지 그만큼만 차지해서.... width : 100% left값은 X 이렇게 주면 위 사진처럼 되어버린다ㅎㅎㅎㅎ 암튼 하드코딩을 해버렸더니 화면을 줄이면 이렇게 되어버린다~~~~~~~~~~~~ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 일단 내 생각으로는 상위 태그의 width값을 화면 전체로 준다음에 sub-menu의 width값을..
[해결][스타벅스 클론코딩] css - nav 찌그러지는(?) 문제..! 메뉴 부분을 absolute로 만들어 주었는데 페이지를 줄이면 nav가 이렇게 변해버림.... 해결을 못했다.....ㅠㅠㅡㅠㅡㅠ 해결..! left 값을 750으로 줘서 그랬던것..! 아래사진의 저부분의 width값을 1100px로 주고 float : right 해줘서 nav의 자리를 잡아주고 화면을 줄여도 위 사진처럼 줄어들지 않는다..!
[Vue] vue-moment - 날짜 / 시간 Vue-moment vue js에서 사용하는 날짜와 시간과 관련된 라이브러리. 타임스탬프로 가져와서 시간이 보기 불편하다. 이걸 vue-moment로 수정 할 것이다. 1. npm install vue-moment 2. 3.
[ERROR] clone 후 npm install 오류 노트북에서 작업을 하다 데스크탑으로 작업을 하고싶어 깃에 올린 후 데스크탑에서 내려받았는데 에러가 떴다. npm install을 깜빡해서 아래 오류가 뜬듯ㅎㅎ 근데 npm install을 해줘도 오류가 잔뜩 뜸..! 무슨 문제인지는 잘 모르겠지만 python을 찾을수 없다는 오류가 눈에 보였다 cmd에 python install을 해줘도 안돼서 그냥 python을 다운로드 받았더니 npm install 하고 npm run dev 아주 잘됨..!! 이거 해결한다고 webpack도 다시받고 윈도우용 빌드 툴 설치해야하나 해서 npm install --global windows-build-tools 해주고,,몇 시간동안 삽질 했다 ㅎㅎㅎ ㅠㅠㅠㅠ ㅎㅎ 혹시나하구 새로 clone 받아서 install 해봤는데 ..
[Javascript] scrollIntoView() - 스크롤 이동하기 화면의 특정 위치로 이동시켜주는데, 특정 element를 기준으로 스크롤을 이동시켜준다. 1. true / false element.scrollIntoView(true or false); true -> 상단을 기준으로 스크롤을 이동시킴. false ->하단을 기준으로 스크롤을 이동시킴. 2. 옵션 behavior 전환을 어떤식으로 해주는지 auto , smooth 스크롤을 바로 이동시키는가 스무스하게 이동시켜주는가..! block 수직정렬 start , center , end , nearest inline 수평정렬 start , center , end , nearest element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 ..

티스토리툴바