코딩 (5) 썸네일형 리스트형 디자인패턴 - MVC / MVP / MVVM 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리하여 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리해 특정한 규약을 통해 쉽게 쓸 수 있는 형태를 만든 것을 말한다. MVC, MVVM 등 은 소프트웨어 설계와 관련된 디자인 패턴이다. 소프트웨어 공학에서의 '흔히 사용되는' 설계 패턴을 의미한다. 1. MVC Model + View + Controller 를 합친 용어이다. model 데이터베이스와 소통하며, 데이터를 가지고 올 수 도 있고 가지고 있을 수 도 있다. Controller에게 데이터를 전달한다. model이 view와 직접 소통하는 일을 없다! View 유저가 보는 화면을 보여주게 하는 역할이다. 데이터를 받고 그리는 역할을 수행한다. 오직 Cont.. [스타벅스 클론코딩] 드롭다운 메뉴 - 위에서 아래로 내려오는 효과 메뉴에 마우스를 올렸을 때 메뉴 드롭 다운이 위에서 아래로 스르륵 내려오는 효과를 주고싶다! ( 아래 사진은 짤 만드는 방법을 몰라서...ㅎㅎ 저런식으로 만들 생각이다!) 현재는 마우스를 올리면 메뉴 드롭다운이 뙇! 하고 아무런 효과 없이 나타난다..! 1. display 사용 먼저 서브 메뉴 (드롭다운했을 때 보여지는 메뉴) 를display : none으로 해주고 hover를 했을때 서브메뉴의 display를 block으로 보여주게 했다. 그런데 transition이 작동하지 않는다. 이유는 display를 사용하면 transition이 먹질 않는다고 한다..!!ㅠㅡㅠ 2. opacitiy 사용 다음으로 쓴 방법은 opacity를 사용했다. 서브 메뉴를 opacity :0 으로 줘서 안보이게 해주고 h.. [해결][스타벅스 클론코딩] 다른 요소에 가려져(?) 버튼 hover이 안된다ㅎㅎㅎ - position과 z-index 자세히 보기 버튼의 hover기능이 작동하지 않는다....ㅠㅡㅠㅡㅠㅡㅠ 왜 그러는지 정확히는 모르겠지만 저 이미지에 가려서 그런게 아닐까 싶은데... 저 요소를 display:none 해서 지워보면 마우스를 올려보면 hover기능이 활성화 되어서 자세히 보기 버튼의 색이 변한것을 확인했다..!! 이제 저 컵 이미지 때문이란것은 알았따.... 조만간 해결책을 꼭 들....고... 오겠ㄸ r..................ㅠㅡㅠㅠㅠㅠㅠㅠㅠ ㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠ 버튼에 z-index : 1을 해줘도 안됐었는데.......... position : relative를 같이 써주니까 바로 해결이 되었다..ㅎㅎㅎㅎㅎㅎㅎㅎㅎ( 바보 ) position이 relative나 absolute 이여야 z-index를 사용할.. [스타벅스 클론코딩] 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의 자리를 잡아주고 화면을 줄여도 위 사진처럼 줄어들지 않는다..! 이전 1 다음
