본문 바로가기

코딩/HTML & CSS

(8)
아이콘 폰트 사용하기 (무료버전) https://ux.stories.pe.kr/46 아이콘 폰트(Icon font) 자유자제로 사용하기 웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘은 필수로 들어가는 요소입니다. 간단하게는 블릿에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전.. ux.stories.pe.kr
[css] 마우스 커서 이미지 바꾸기 - 브라우저별 이미지 확장자 유의 https://jsfiddle.net/Kimara/nnj7L0xc/ Custom Cursors 커서 모양을 이미지로 바꿀 수 있다. 모바일용 브라우저, 오페라 에서는 적용 X 익스 6이상 O body, html {cursor: url(smiley.gif), url(myBall.cur), auto} a {cursor: url(smiley.gif), url(myBall.cur), auto} 첫번째 이미지(smiley.gif)가 없거나 가져오지 못했을 때, 두번째 이미지(myBall.cur)가 적용되고, 이것도 실패하면 마지막에 설정된 값(auto)이 적용된다. 이미지를 가져오지 못할 경우에 적용될, 마지막 설정(키워드 값)은 반드시 해줘야 한다. 브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값..
[CSS] rotate 했을때 스크롤이 보이는 경우 프로젝트 진행중 팝업 닫기 버튼에서 transform rotate를 사용하였더니이따금씩 회전할때 바디 내부에 스크롤이 갑자기 생기는 경우가 있었다. (X,Y축 전부 생성) 1. 기본적으로 부모격에 overflow hidden을 주면 된다 생각했지만 해결이 되지않았다. 2. 해당 엘리먼트와 부모를 inline-block 요소로 잡아줬는데도 해결이 되지 않았다. 이후 검색을 통해 확인해보니 text-indent로 이 현상이 일어날 수 있어 해당 css를 삭제하였더니 해결!
쉽게 놓칠수 있는 CSS Issue 이슈 해결 1. ie8~10 빈 공간의 a태그 활성화 안되는 문제블라블라 -> 위와 같은 구문은 IE(인터넷 익스플로러)에서 태그가 빈공간으로 인식하여 해당 영역이 활성화되지 못한다.따라서 두가지 해결방법이 있다.1. 태그 안에 태그를 넣어 영역을 채워준다.2. css에서 background image 를 사용하여 사이즈를 100% 주어 영역을 채워준다. 2. IE8에서 input 실행안되는 이슈input[type=""]에서 input 숨기는 css에visibility: hidden을 사용하게 되면 IE8에서 인식을 하지 못한다. input[type=""] {position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; marg..
[CSS] 3개의 점을 이용한 로딩 아이콘 GIT : https://github.com/nzbin/three-dots DEMO : https://nzbin.github.io/three-dots/ 출처 : http://rwdb.kr/three-dots/
[CSS] 마우스오버로 틸트효과 내기 (hover tilt effect) 틸트 효과는 javascript로 제작하는 경우가 많다. ( ex 플러그인 : https://gijsroge.github.io/tilt.js/ ) 하지만 하단 css로도 효과를 낼 수 있다. 각각의 hover point에 box-contents를 다른 스타일의 모션으로 적용되게 구현 * 참고문서 http://rwdb.kr/hover_tilt/
[CSS] background 색상값 지정 css 색상값을 입력할 때 다음 색상의 단위 사용 가능 1. 색상 이름 (red, black, white 등 …) 2. rgb (red, green, blue) 값 3. rgba (red, green, blue, alpha) 값 4. hsl (hue, saturation, lightness) 값 5. hsla (hue, saturation, lightness, alpha) 값 1. RGB #f00#ff0000rgb(255,0,0)rgb(100%, 0%, 0%) - 위 색상은 모두 같은 색상 - 16진수는 3자리나 6자리로 가능 - #rgb는 #rrggbb와 같음 (예 : #fb0 = #ffbb00, #fff = #ffffff) 또한 RGBA의 alpha는 투명도값으로 0.0 ~ 1.0 사이로 사용 가능 ..
테이블 글자 깨짐 현상 table-layout 이용 table-layout 속성을 이용하여 테이블 고정하기table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다.보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어납니다. 셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다. 테이블의 너비가 200픽셀로 셀안의 내용에 비해서 좁더라도 아래와 같이 자연스럽게 줄바꿈이 일어납니다.셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.반면 홈페이지 주소와 같이 영문으로 공백이 없는 경우는 셀을 밀어버리는 현상이 발생합니다. http://www.homejjang.com/09/b..