김일국의 기술 블로그 누적조회수: / 오늘조회수: / 어제조회수:

[글쓰기] / [관리자]

고정 헤더 영역

글 제목

메뉴 레이어

김일국의 기술 블로그

메뉴 리스트

홈

분류 전체보기 (880)

검색 레이어

김일국의 기술 블로그

검색 영역

컨텐츠 검색

CSS

망분리된 프로젝트에서 웹폰트 적용시

2018.02.28 by 김일국
웹폰트 적용하기

2015.07.30 by 김일국
스프라이트 이미지(통이미지)로 홈페이지 메뉴 구성하기

2014.12.16 by 김일국
홈페이지 색상적용시 다른사이트 색상값 확인할때 사용가능한 크롬플러그인 입니다.

2014.06.13 by 김일국
웹표준 준수사항 몇가지

2011.08.11 by 김일국
css로 이미지 리사이즈하기

2010.10.04 by 김일국
CSS로 레이아웃 잡기

2010.08.18 by 김일국
IE6 에서 PNG 이미지 사용

2010.08.12 by 김일국

망분리된 프로젝트에서 웹폰트 적용시

보안때문에 망분리된 사무실에서 웹프로젝트를 수행하게 되면, 여러가지 에로점이 발생하게 됩니다. 그중 하나가, CDN(Contents Delivery Network)를 사용하는 사항인데요. 오늘은 그 중에 나눔고딕웹폰트를 적용한 사례를 들어 보입니다. 아래는 웹폰트를 적용하는 샘플이고, css style에서 상대경..

CSS 2018. 2. 28. 10:52

웹폰트 적용하기

아래 사이트에서 Droid_Robot.otf 폰트 파일을 웹폰트로 변환 할 수 있습니다. http://www.fontsquirrel.com/tools/webfont-generator /* 로컬 웹폰트 적용 */ @font-face { font-family: 'droid_robotregular'; src: url('/home/css/droid_robot-webfont.eot'); src: url('/home/css/droid_robot-webfont.eot?#iefix') format('embedded-opentype'), url('/home/css/droid_r..

CSS 2015. 7. 30. 14:26

스프라이트 이미지(통이미지)로 홈페이지 메뉴 구성하기

스프라이트를 이용하는 방식에는 아래 주소처럼 여러가지가 있습니다. http://arnaumarch.com/en/sprites.html ( 포토샵 플러그인 cs2에서 실행안됨 ) http://spritecow.com ( 배경이 투명한 통 이미지가 필요 함 ) http://spriteme.org/ ( 사용법이 북마크에 해당 플러그인을 추가해서 사용하는 구조입니다. ) 마지..

CSS 2014. 12. 16. 14:04

홈페이지 색상적용시 다른사이트 색상값 확인할때 사용가능한 크롬플러그인 입니다.

홈페이지 색상적용시 다른사이트 색상값 확인할때 사용가능한 크롬플러그인 입니다. 크롬 플러그인 설치 주소 입니다. ColorPick Eyedropper https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg 위 크롬에서 사용하기 곤란한 이미지 파일의 색상을 추출하는 무설치 프리 프..

CSS 2014. 6. 13. 18:16

웹표준 준수사항 몇가지

font font-family : [폰트이름] (폰트를 지정한다) font-style : [normal/italic/oblique] (문자의 형태를 지정한다) font-variant : [normal/small-cap] (소문자를 대문자로 표시) font-weight : [normal/bold/bolder/lighter/100/200/…/900] (문자의 두께를 조절한다) font-size : [사이즈] (글자의 크기를 지정한다) color color : [컬러값] ..

CSS 2011. 8. 11. 14:46

css로 이미지 리사이즈하기

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <style> .entry img { max-width:410px; width: expression(this.width > 410 ? 410px: true); } </style> <body> <div class="entry"> <img src="a.jpg" /> </div> a.jpg

CSS 2010. 10. 4. 16:34

CSS로 레이아웃 잡기

이번 글에서는 CSS의 float 속성을 이용하여 웹 페이지의 레이아웃을 잡는 방법에 대해 알아보겠습니다. 이번 글에서 우리의 목표는 블로그와 같은 웹 페이지에서 자주 쓰이는 header, content, sidebar, footer로 구성된 2단 레이아웃을 만드는 것입니다. 즉 다음과 같은 형태의 레이아웃을 잡는 것이 우리의 목표입니다 위와 같은 레이아웃을 잡기 위한 HTML과 CSS의 기본 구조은 다음과 같습니다. html5용 태그영역으로 header, content, sidebar, footer 영역을 나누어 놓았습니다. content 영역의 내용은 한글입숨 사이트에서 더미 내용을 생성해서 가져옵니다.(아래) style 태그로 각 영역의 크기와 배경색을 정해주었습니다.(아래) 지금까지의 결과를 브라..

CSS 2010. 8. 18. 16:58

IE6 에서 PNG 이미지 사용

IE6 에서 PNG 이미지 사용 아래 첨부파일을 해당 js폴더에 업로드 후 해당위치에 js 파일을 붙이면 OK *clear.gif 파일위치가 변한다면 unitpngfix.js 에서 경로변경필요 clear.gif README-unitpngfix.txt unitpngfix.js

CSS 2010. 8. 12. 21:37

추가 정보

인기글

최신글

페이징

1 2

TISTORY

김일국의 기술 블로그 © Magazine Lab [상단으로]

페이스북

트위터

인스타그램

유투브

티스토리툴바