CSS 쑝스토리 2019. 3. 22. 11:45
CSS 말풍선 꼬리 그리기웹사이트 제작하시면서 설명글을 위해 HOVER 했을 경우, 말풍선이 뜨게 하는 UI 구현하기 위해서 만들었습니다. 요새는 검색하면 안나오는게 없는거 같네요. 저도 만들어주는 사이트에서 구현하였구요. 위에는 우선 완성 모습입니다. 가져다 쓰실분들은 쓰셔도 되구, 자기만의 스타일을 만들겠다 하시는분들은 제가 알려드리는 사이트에서 제작 하시면 손쉽게 만들 수 있을거 같네요. 저가 구현한 화면은 모바일에서는 물음표를 누르거나, 웹사이트에서 마우스를 오버 하시면 저렇게 말풍선이 뜨게 하였구요. 심플하게 구성하였어요. 심플한게 제일 이쁜거 같아요. CSS 코딩 /* 말풍선 적절한 top 과 margin-left 로 위치조정 */ .bubble { z-index:100; position: r..
CSS 쑝스토리 2018. 10. 16. 14:56
부트스트랩 모달 레이어 팝업 제어하기 웹을 개발하면서 CSS에 대해 지식이 부족하더라도 부트스트랩을 이용하면 어느정도 디자인을 하실수 있죠. 보기좋은 떡이 먹기도 좋듯이 웹사이트 또한 디자인이 상당히 중요하다고 저는 생각 합니다. 저는 혼자 개발 할때가 자주 있는데 이럴때면 부트스트랩 템플릿 사이트나 관련 CSS 파일들을 보며 공부를 하곤 합니다. 그 중에서도 요새 많이 쓰이는 레이어팝업, 다른 말로 모달창이라고도 하죠. 이것을 어떻게 화면에 띄우고 제어하는지에 대해서 공부하려고 합니다. Bootstrap Modal 창다음과 같이 기존 자바스크립트 alert 창을 이용하지 않고 CSS를 이용하여 기존 화면을 어둡게 처리하고 그 바로 위에 팝업창을 띄우는 효과 입니다. 이질감 없이 훨씬 자연스러운 팝업창을..
CSS 쑝스토리 2018. 9. 14. 17:47
