HTML 썸네일형 리스트형 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 더보기 메타 태그(meta tag)를 이용한 브라우저 렌더링 설정 문서타입(DTD)를 제대로 선언했음에도 불구하고 페이지 호환성 보기로 렌더링되는 경우가 발생한다. 메타태그를 사용하여 이 문제를 해결할 수 있다. ie9 이상의 브라우저가 설치되어 있는 상태에서 ie9의 렌더링 모드로 보여진다. ie10으로 렌더링해서 보여준다. 실패시 쿼크모드로 렌더링해서 보여진다. 현재 설치되어있는 브라우저의 버젼에 맞도록 렌더링되어 보여진다. ie의 최신버전으로 렌더링되어 보여지고 크롬이 설치되어 있으면 크롬의 엔진으로 렌더링되어 보여진다. 더보기 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.. 더보기 [html5] <hgroup> 태그 제목 요소들을 묶어줄 때 태그를 사용한다. ~ 요소들을 묶어서 레벨 단위로 표시한다. 1 2 3 4 5 6 Welcome to my WWF For a living planet The rest of the content... 더보기 [html5] 기본 계층 구조 html5의 기본 계층 구조 http://codepen.io/nodws/blog/html5-hierarchy 더보기 브라우저별 조건부 주석 사용 및 활용하기 국내 웹 환경을 고려해보면 아직까지도 익스플로러를 무시할 수 없기 때문에 웹페이지를 제작함에 있어서 브라우저에 따라 혹은 브라우저 버젼별로 조건부 주석이 필요한 경우가 많다. 브라우저의 호환성에 따른 문구를 제시하거나 여러가지 용도로 사용할 수 있는 조건부 주석은 아래와 같다. - IE 9 버전에서 표시할 내용 - IE 9 이상 버전에서 표시할 내용 - IE 9 초과 버전에만 표시할 내용 - IE 9 이하 버전에만 표시할 내용 - IE9 미만 버전에만 표시할 내용 활용 1. (* html5shiv 응용) html5를 지원하지 않는 구버전의 브라우저에서도 html5 스타일을 지원할 수 있도록 해주는 html5shiv 스크립트를 조건부 주석으로 넣어줄 수 있다. 사이트 링크 : https://code.goo.. 더보기 문서타입에 따른 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 다음
