css 썸네일형 리스트형 css :before, :after 가상태그의 활용 점점 모바일과 반응형 사이트의 빈도가 많아지면서 가상태그를 사용하게 되는 경우가 많아졌습니다. 아래와 같이 간단하게 마크업을 했을 경우에 1welcome to designsharpcs css로 :before 가상태그를 넣어줍니다. 12345p:before { content: "hi bro! "; font-weight: bold; font-style: italic;}cs 그럼 아래와 같은 결과화면을 볼 수 있습니다~ 이번에는 :before 가상태그를 이용해 아이콘을 한번 넣어보겠습니다~ 123456789p:before { content: ""; display: block; background: url("http://icons.iconarchive.com/icons/iconsmind/outline/128/A.. 더보기 background 에서 이미지를 두개 이상 사용할 때 css를 이용하여 백그라운드에 이미지를 두개 이상 구현해야 할 경우가 있습니다. 아래의 이미지처럼 풀과 하늘이 있는 전경 이미지와 양 이미지를 넣고자 한다면요~ http://caniuse.com/#feat=multibackgrounds 하지만 ie8이하에서는 보이질 않습니다... ie9부터 지원을 합니다... http://caniuse.com/#feat=multibackgrounds 더보기 브라우저별 설정 브라우저별 명칭 - webkit / safari, chrome - o / opera - moz / firefox - ms / explorer -webkit-tap-highlight-color포커스가 될 떼의 색상을 결정한다. 아이폰에서는 사각형 박스형태로 표시되며 색상, 알파값이 제대로 적용이 된다. 안드로이드에서는 알파값이 0이 아니라면 두꺼운 주황색테두리로 표시가 된다. 사용예) -webkit-tap-highlight-color:rgba(255,255,255,255) 처럼 사용할 수 있다. -webkit-text-size-adjust:none;텍스트 비율을 조정한다. 속성 : auto(기본값) | none -webkit-border-radius:2px;인풋 요소의 라운딩을 조절 -webkit-appe.. 더보기 [HTML5] html5에서의 < col >사용 1 2 3 4 5 6 7 colgroup을 사용하면서 에 width값이나 align값을 삽입하면서 코딩을 해보았지만 HTML5에서는 col의 인라인 속성을 대부분 지원하지 않는다고 나온다.. HTML5 작성시에는 style을 따로 입히거나 css를 이용하여 작업하면 해결된다. 1 2 3 4 5 6 7 더보기 box-sizing ??? 이전부터 해오던 스타일도 있고, 크로스브라우징 때문에 사용하지 못했던 css가 바로 box-sizing 입니다. 보통 width값을 정해놓아도 padding이나 border값에 의해 너비값이 변경되는 구조였다면, box-sizing을 지정하면 padding과 border의 영향을 받지 않고 너비를 고정시킬 수 있습니다. 해당 css는 IE8 이상부터 지원됩니다. 1 2 3 4 5 6 7 8 designsharp.tistory.com designsharp.tistory.com 1 2 3* {padding:0;margin:0} .cnt {width:400px;padding:30px;margin:20px;background:#f5f5f5;border:1px solid #d1d1d1} .cnt1 {padding.. 더보기 [css3] :first-of-type :first-of-type = :nth-of-type(1) :first-child 와 :first-of-type 의 해석차이를 도통 이해할 수 없다. first-of-type은 부모중 첫번째 요소?? first-child는 부모의 첫번째 자식인 모든 요소를 말하는데... 흠... css3와 css2의 차이로만 일단 알아놔야겠다.. 더보기 문서타입에 따른 CSS RESET 프리셋이라고 하기도 머하다... 매번 새로 만드니깐 ㅋㅋㅋ css reset이 프로젝트의 환경, 레이아웃에 따라서 다 달라지기 때문이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); * {padding:0;margin:0;} html {width:100%;height:100%;overflow-x:hidden;} body{margin:0 auto;width:100%;font-size:12px;font-family:"Nanum Gothic", dotum,"돋움",sans-serif;.. 더보기 이전 1 다음
