바람꽃 정보마당

텝을 클릭했을때 하단 이미지가 바뀌는 소스 알려드립니다. ul,li { list-style:none; } a { text-decoration:none; color:#000; } .tab { height:100px; border-bottom:1px solid #555; background:#fff; overflow:hidden; } .tab li { float:left; width:50%; text-align:center; box-sizing:border-box; } .tab li { display:inline-block; cursor:pointer; } .tab li.on { color:red; border-bottom:2px solid red; } .tab_con { clear:both; margin-..

안녕하세요. 오늘은 absolute인 요소를 가운데 정렬 시키는 css .pop { position:absolute; left;50%; transform:translateX(-50%);} left : 50% // 전체 가로 수치에서 절반만큼 이동시킨다. transform:translateX(-50%); 자신의 가로 수치 절반만큼 이동시킨다. 2018/11/29 - [웹디자인] - 마우스 오버시 이미지 확대 css팁 2018/11/13 - [웹디자인] - 드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)

안녕하세요. 오늘은 이미지에 마우스 오버시 이미지가 확대되는 css에 대해서 포스팅 하려고 합니다. 웹 사이트별 css입니다. transform:scale(1.1); /* default */ -webkit-transform:scale(1.1); /* 크롬 */ -moz-transform:scale(1.1); /* FireFox */ -o-transform:scale(1.1); /* Opera */ 예제 .scale { display : inline; padding : 0 9px; transform : scale(1); -webkit-transform : scale(1); -moz-transform : scale(1); -ms-transform : scale(1); -o-transform : scale(1..

안녕하세요. 잘 지내셨나요? 오랫만에 제 전공과 관련된 포스팅을 하려 합니다. 홈페이지 상단 메뉴에서 주로 쓰이고 있는 드롭다운메뉴 를 css로 적용하는 방법을 알려드릴께요. See the Pen yQVmoW by anaide@nate.com (@anaide) on CodePen.   &nbsp &nbsp 이와 같은 메뉴입니다. html Home..

이런느낌으로 이미지가 부드럽게 사라지고 나타나는 페이지를 작업하고자 한다. 1. 사이에 추가한다. //여기서 숫자는 넘어가는 시간을 나타낸다. 2. css추가 #slideshow { margin: 0 auto; position: relative; width: 100%; height: 634; padding: 0; box-shadow: 0 0 20px rgba(0,0,0,0.4); } #slideshow > div { position: absolute; } 3. body에 입력 // 이미지 갯수 추가나 삭제 가능

안녕하세요. 꿈꾸는여우입니다. 오늘은 홈페이지 코딩을 하면서 팝업에서 많이 쓰이는 부분을 포스팅 하려고 합니다. 레이어팝업을 띄우면서 주변은 어둡게 처리하는 방법에 대해서 알아보고자 합니다. 1. 안에 입력한다. ※css와 js를 넣어둔 경로로 설정해야 한다. 2. body 안에 팝업할 부분을 설정한다. 이용약관 팝업내용 개인정보처리방침 팝업내용 이용약관개인정보처리방침 ※팝업 갯수에 따라 person_request 이부분이 늘어나고 줄어들면된다. 3. css안에 입력하여준다. button, input[type="submit"], input[type="button"]{cursor:pointer} button[type="submit"]{display:block; width:100px; margin:15px ..

파비콘(Favicon)만들기 파비콘이란? 웹브라우저에서 페이지 제목 옆에 있는 작은 이미지를 파비콘(favicon)이라 한다. 이는 favorite(가장 좋아하는) + icon (아이콘)의 줄임말로 즐겨찾는 아이콘이라는 뜻이다. 다른말로 shorcut icon, website icon, URL icon, tab icon, bookmark icon이라고도 불린다. 웹페이지의 주소는 많은 알파벳의 조합으로 한눈에 알아보기 어렵기 마련인데 파비콘이 있으면 한눈에 알아보기 쉽다. 노란 동그라미 안에 보여지는 이미지가 바로 파비콘이다. 파비콘 만들기 1.파비콘은 보통 확장자가 ico인 이미지 파일이다. png도 가능하긴 하나 익스플로러, 크롬등 여러가지 웹브라우저 전부를 만족시키기 위해서는 ico확장자가 가장 좋..