본문 바로가기
반응형

전체 글333

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.
블로그 개설 1주년을 맞이하여 블로그 개설 1주년을 맞이하여 (부제: 네이버 오픈캐스트 메인과 저품질 현상) 다음 주 25일이면 블로그 개설 1주년이 되는 날이네요. 작년 12월 25일에 왜 갑자기 블로그를 만들었는지 지금 생각하면 갸우뚱 한데...^^ 만들어 놓고 본격적으로 글을 쓴 것은 2개월 정도 지나서인 것 같아요. 그래도 개설일에 의미가 있으므로 이 날을 기념한 기록을 남겨두고 싶습니다. 티스토리 제목 변경사 제 블로그는 처음에 책이나 도서관 등 책 관련 리뷰와 정보를 전달할 목적으로 만들었습니다. 그래서 처음 제 티스토리 이름은 '고요한 책 한 권' 이었습니다. 아직도 오른쪽 사이드바에는 책 관련 메뉴가 맨 앞에 차지하고 있습니다. 지금은 이 메뉴에 들어가는 글의 수가 손에 꼽을 정도라 무슨 잔해 같은 느낌이 들기도 하지만.. 2014. 12. 15.
css 길이 단위 css 길이 단위 어제 width, height 속성을 배우면서 속성값 중 길이값length이 등장하는 걸 보셨을 거예요. [css] width 속성 [css] height 속성 그래서 오늘은 css 길이 단위로 사용되는 것들은 어떤 것들이 있는지, 길이 단위의 종류와, 자주 쓰이는 단위, 그리고 사용법도 알아 보겠습니다. 자주 사용되고 언급되는 길이 단위는 px, em, in, pc, rem 등인데, 반응형 스킨에 알맞게 다양한 브라우저 창에 따라 크기 조절이 가능하게 하려면 em 또는 rem 사용을 권장합니다. 단위를 사용할 때, 앞에 숫자와 단위간 공백을 두지 않습니다. 예: 2em, 3px, 5in 하지만 길이값이 0일 경우 단위를 생략할 수 있습니다. 길이 단위는 상대 단위와 절대 단위로 나뉩니.. 2014. 12. 11.
[css] height 속성 [css] height 속성 어제는 요소의 너비를 설정할 때 쓰는 width 속성을 배웠습니다. 오늘은 height 속성으로, 요소의 높이를 설정할 때 사용합니다. width 속성과 마찬가지로 height 속성은 인라인 요소, table rows, thead, tfoot, tbody를 제외하고 모든 요소에 적용할 수 있습니다. height는 content 영역만의 높이만을 의미합니다. margin, padding, border 을 포함하지 않음. 또한 min-height, max-height 는 height 속성을 무시합니다. 즉, height와 min-height 속성이 동시에 설정될 경우, min-height값이 적용 됩니다. min-width 속성, min-height 속성 사용법 max-width.. 2014. 12. 10.
[css] width 속성 [css] width 속성 width와 height 속성은 너무 기본이라 모두들 알고 있을 것으로 생각돼 따로 다루지 않았는데 박스 모델을 설명하다 보니 꼭 필요한 부분 같아 오늘 정리해 보았습니다. 우선 박스 모델부터 살펴 볼게요. 요소의 박스는 content, padding, border, margin 으로 이루어져 있습니다. content - 내용 영역 padding - 내용과 border 사이의 여백 border - 선 margin -border 와 바깥과의 여백 width 속성 요소의 너비를 설정할 때 width 속성을 쓰는데 이때 width는 content 영역만을 의미합니다. (padding, border, margin을 포함하지 않음) ※ width 속성은 inline 요소, table r.. 2014. 12. 9.
[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.
반응형