본문 바로가기
반응형

It66

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기 IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기 지난 시간엔, ie6-8에서 html5 요소 적용하는 방법과, ie6-8을 ie9처럼 행동하게 만들기를 배웠습니다. html5shiv 삽입하기 (ie6-8에서 html5 적용하기) IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법) 오늘 역시 여기에 이어지는 글입니다. css3 속성들 중 박스를 꾸미는 속성 일부를 ie6-8에서 적용하는 방법입니다. 여러 가지 방법이 있겠지만, 가장 잘 알려진 것으로 CSS3 Pie가 있습니다.. http://css3pie.com CSS3 PIE란? PIE란 Progressive Internet Explorer(진보적 인터넷 익스프롤러)의 약자입니다. PIE.. 2014. 12. 22.
IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법) IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법) 우리나라에서 자주 사용하는 브라우저는 인터넷 익스플로러(IE)와 크롬(chrome) 정도로 구분할 수 있을 것 같은데요. 사용하는 버전도 다양해서 IE만 보자면 IE11버전 점유율이 가장 높고 IE7이 20% 정도, IE8이 30% 정도 입니다. (이건 구글 애널리틱스에 기반한 제 개인적인 통계입니다.) 브라우저 점유율 (IE, 크롬 점유율 비교) 블로그 운영자라면, 이 수치는 무시할 수 없는 수준이고, 웹사이트 개발자라면 1% 미만도 안 되는 IE6 이용자까지도 고려해서 사이트를 설계해야 할 경우도 있습니다. IE 구 버전(IE6~8)의 문제 인터넷 익스플로가 초반에 무료로 배포되면서 우리나라에는 유독 IE 이용자가 많습니다. 다.. 2014. 12. 19.
html5shiv 삽입하기 (ie6-8에서 html5 적용하기) html5shiv 삽입하기 (ie6-8에서 html5 적용하기) 며칠째 글이 잘 써지지가 않네요. 이야기를 하지 않으려 했지만, 앞으로 글이 올라오는 주기가 길어지면 주인장이 어딘가 변했다고 생각을 하실 수도 있어 말씀 드립니다. 지금 제가 임신 3개월째입니다.^^ 그래서인지 무슨 일을 하나 끝내기에 체력이 많이 딸려요. 개인적으로 하고 있는 일도 있어... 예전만큼 글을 자주 올리지는 못할 것 같아요. 일주일에 2회 정도로 생각하고 있어요. 컨디션이 좋아지면 더 열심히 해야겠죠.. 사실 월요일부터 gradient 속성을 정리해 보려 했는데, 공부해야 할 부분이 너무나 광범위하더라고요. 아니면 현 시점이라 그런 생각이 부쩍 드는지 모르겠어요. 버거운 gradient 속성 정리는 다음으로 미루고 html5.. 2014. 12. 18.
[html] meta 태그 사용법 [html] meta 태그 사용법 html 강좌 초기에 에 들어가는 태그란 제목에서 잠깐 meta 태그를 언급했습니다. head 에 들어가는 태그 (title, style, script, meta 태그) html을 공부하는 사람뿐 아니라 블로그나 웹사이트를 운영하는 분들은 자신의 사이트가 좀 더 상위 노출되길 바라는 마음에서 이 meta 태그를 어떻게 활용할까 생각해 보셨을 법한데요. 오늘은 이 meta 태그 사용법을 자세히 알아 볼까 합니다. 우선 기초적인 부분을 공부하고 맨 마지막에 현재 meta 태그가 검색 엔진에서 어떻게 쓰이고 있는지, 잘 활용하는 방법도 알아볼게요. meta태그는 metadata(정보에 대한 정보를)제공하는 역할을 합니다. 쉽게 말해, 사이트 자체에 대한 정보나, 저작자, 문서.. 2014. 12. 17.
[css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포) [css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포) 지금까지 드롭다운 메뉴 만들기를 3단까지 모두 배웠습니다. [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 만들기(2단 수평 메뉴편) 드롭다운 메뉴 만들기 (3단 수평 메뉴편) 오늘은 CSS3의 속성들을 이용해서 디자인까지 고려하여 드롭다운 메뉴를 만들어 보겠습니다. 우선 드롭다운 메뉴를 만드는 html/css 작성법이 여러가지가 있겠지만 이 사람은 이렇게 만드는구나 정도로 생각해주시면 고맙겠습니다.^^ 이 소스들을 다운 받아서 자유롭게 편집해서 사용하실 수 있습니다. (단, 이 소스를 그대로 다운받아 배포하는 것은 금지) 모든 브라우저를 확인해 보진 못했고, ie7, chrome 39.0, Firefox 33.1 에서 정상 작동하는 것을 확인했.. 2014. 12. 5.
드롭다운 메뉴 만들기 (3단 수평 메뉴편) 드롭다운 메뉴 만들기 (3단 수평 메뉴편) 드롭다운 메뉴 만들기 기초편부터 2단 메뉴 만들기까지 배워보았는데요 [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 드롭다운 메뉴 만들기(2단 수평 메뉴편) 오늘은 응용편 정도가 되겠네요. 3단 수직 메뉴는 비교적 쉬운 것 같아 여기서는 3단 수평 메뉴 만들기를 배워보겠습니다. 우선, 3단 메뉴 만들기 html menu1 menu2 sub1 sub2 sub3 sub3-1 sub3-2 sub3-3 menu3 menu4 menu5 파란색이 1단, 초록색이 2단, 빨간색이 3단 입니다. div에 메뉴를 넣어 완성시키면 대략 이런 형태가 나옵니다 html 위의 메뉴 본문 목록 관련 css ul{list-style:none; margin:.. 2014. 12. 5.
드롭다운 메뉴 만들기(2단 수평 메뉴편) 드롭다운 메뉴 만들기(2단 수평 메뉴편) 지난 시간엔 비교적 쉬운 2단 수직 메뉴 만들기를 배웠습니다. 수평 메뉴는 좀 더 복잡하므로, 앞 강좌를 미리 공부하시고 오면 좋을 것 같아요 [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 수평 메뉴 만드는 방법은 수직 메뉴편에서 본 것과 동일합니다. 1. 2단 메뉴 만들기 html menu1 menu2 sub menu1 sub menu2 sub menu3 menu3 지난 시간과 달라진 점이 있다면 1단 메뉴에 클래스명이 붙었다는 것인데요, 3단, 4단 메뉴 등 계층구조가 좀 더 복잡해질수록 id나 class명을 붙여 이용하는 것이 좋습니다. css ul{list-style:none; margin:0px; padding:0px;}.. 2014. 12. 3.
드롭다운 메뉴 만들기 (2단 수직 메뉴편) 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 지난 시간엔 단순한 메뉴 만들기를 배웠습니다. [css]드롭다운 메뉴 만들기(기초) [링크를 가진 단순 메뉴] menu1 menu2 menu3 이것을 1단 메뉴라고 한다면, 주 메뉴를 클릭했을 때 부 메뉴가 나오는 2단 메뉴를 만들면 다음과 같습니다. [2단 메뉴 만들기] 1. 2단 목록 만들기 html menu1 menu2 sub menu1 sub menu2 sub menu3 menu3 파란색이 1단 메뉴라면 빨간색 부분이 2단 메뉴에 해당 ▶실행화면 우선 2단 메뉴를 숨겨 놓고, 1단 메뉴에 마우스 오버했을 때 부 메뉴를 드러내야 되겠지요. 2. 부 메뉴를 숨겨 놓기 ul ul {display:none;} 3. 주 메뉴에 마우스 오버했을 때 부 메뉴 표시하기.. 2014. 12. 2.
[css]드롭다운 메뉴 만들기(기초) [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 dropdown menu란, 상단이나 좌측 또는 우측의 메뉴를 클릭했을 때 하위 메뉴로 늘어지는 계층화된 형태의 메뉴를 말합니다. 오늘은 가장 기초적인 메뉴 만들기를 배워 보고 다음 시간엔 주 메뉴를 클릭했을 때 부 메뉴가 나오는 방식을 배워 보겠습니다. 수직 메뉴 만들기 각각의 메뉴를 만들 때는 목록 태그를 이용 합니다. 1. 목록 만들기 html 홈페이지 방명록 전체 글 목록 실행 화면 홈페이지 방명록 전체 글 목록 목록을 만드는 ul, ol, li 태그 2. 머리 기호 없애기 메뉴 앞에 머리 기호를 없애려면 list-style:none을 사용합니다. css ul{list-style:none;} 실행화면 홈페이지 방명록 전체 글 목록 list-sty.. 2014. 11. 28.
[css] float를 취소하기 (clearfix 4가지 방법) [css] float를 취소하기 (clearfix 4가지 방법) 보통 레이아웃을 만들 때, 내부 div(자식)와 그것을 둘러싼 또 하나의 div(부모)를 만듧니다. 우리가 원하는 레이아웃은 아래 그림처럼, 1. 자식 div가 좌우로 float 되고, 2. 부모가 자동으로 자식 div를 담아낸 모습일 것입니다. 하지만, 자식 div를 담고 있는 부모 div는 너비나 특별한 속성을 추가하지 않으면 float 된 자식 div를 담아내지 못합니다. (아래 그림 참조) float 된 요소는 이전 요소에 영향을 미치지 않고, 다음 요소에 영향을 미칩니다. 따라서 다음 요소 역시 float 상태로 글자나 이미지가 따라 붙습니다. float 속성에 대하여 그래서 부모 요소가 float 된 요소를 담아낼 수 있고, 다음.. 2014. 11. 27.
반응형

티스토리툴바