웹팁

괜찮은 구글 웹폰트 많네요.

2018-10-23T22:02:39+09:00

폰트만 잘 사용해도, 디자인 분위기가 많이 달라집니다.

그만큼 타이포 그래픽이 디자인에서 중요한 역할을 합니다.

https://fonts.google.com/

구글에서 제공하는 영문,한글 웹폰트가 많네요.

소스 비교해 주는 사이트

2018-10-20T10:27:57+09:00

소스 코딩 하다보면 기존 파일하고 비교할때가 간혹 있습니다.

설치용 파일도 있지만, 가끔 사용하시는 분들은 비교 사이트를 이용해도 좋을거 같습니다.

https://www.diffchecker.com/

웹사이트 속도 측정하고 개선해야 할부분 체크하세요.

2018-10-19T10:39:35+09:00

웹사이트 속도가 느리면 특히나 한국 사람들은 답답해 합니다.

그래서 사이트의 속도는 기업에서는 매출하고도 연관이 되고, 매우 중요한 부분인데요.

아래에서 속도 체크 해보시고 개선 해야할 부분이 어디인지 체크해보세요.

https://developers.google.com/speed/pagespeed/insights/

데스크탑과 모바일 속도 체크 결과를 알려주며, 개선 사항도 할려줍니다.

모바일에서는 83점 나와서 양호하네요.

데스크탑에서는 48점! 속도에 좀 신경을 써야겠습니다.

두번째로 소개할곳은

https://tools.pingdom.com 입니다.

현재 가장 많이 사용되는 측정 도구라고 하니 확인해 보세요.

59점 이네요 ㅎ

속도 문제는 여러가지가 있습니다. DB, 데이터 용량, 압축, 서버 캐시등등

본인의 사이트 속도 체크하고 문제점이 뭔지 개선하시면 좋을거 같습니다.

seo 점수 알아보는 곳이라네요.

2018-10-11T21:17:07+09:00

http://research.domaintools.com/

웹미니는 블로그로 잠시 돌려놨더니, 블로그 스샷이..

본인 사이트 SEO 점수 확인해보세요~

카카오톡 미리보기 이미지 캐쉬 삭제

2017-07-10T11:42:30+09:00

카카오톡에 사이트 링크를 넣었을때 보여지는 이미지가 최근이미지로 반영이 안될때, https://developers.kakao.com/docs/cache 주소에서 해당 사이트 주소를 넣고 요청해보세요.

페이스북 og 이미지 캐시 업데이트

2017-07-10T11:09:57+09:00

페이스북 og 태그에 들어가는 이미지가 페이스북 공유했을때 바뀐 이미지로 공유가 안될때 https://developers.facebook.com/tools/debug 에서 주소를 넣어고 디버그해보세요.

[스크랩] HTML5/CSS3 관련 팁 & 튜토리얼

2014-01-14T11:36:30+09:00

HTML/CSS

[HTML/CSS] 001. CSS3를 이용한 탭 메뉴(tab menu) 만들기 How to Create a CSS3 Tabbed Navigation [미리보기 ]

[HTML/CSS] 002. CSS3를 이용한 버티컬 네비게이션 메뉴 만들기 Orman Clark’s Vertical Navigation Menu [미리보기]

[HTML/CSS] 003. CSS3를 이용한 오목한 버튼 이미지 코딩하기 Tagtastic Tag Cloud with CSS Transformations [미리보기]

[HTML/CSS] 004. 웹폰트와 배경이미지를 이용한 별 코딩Create a Rating System With CSS, Web fonts and Sprites [미리보기]

[HTML/CSS] 005. CSS3를 이용한 메뉴와 서브메뉴 만들기 How to Create a CSS3 Dropdown Menu [미리보기]

[HTML/CSS] 006. CSS3를 이용한 이미지 슬라이더 코딩하기 How to Create a Stylish Image Content Slider in Pure [미리보기]

[HTML/CSS] 007. CSS3를 이용한 모서리 둥근 버튼 코딩하기 How to Create CSS3 Buttons [미리보기]

[HTML/CSS] 008. HTML5, CSS3를 이용한 오디오 플레이어 코딩 Create a Customized HTML5 Audio Player [미리보기]

[HTML/CSS] 009. 클릭하면 변하는 피드백 버튼 코딩하기 Put Users in Control With Confirmation Feedback Buttons [미리보기]

[HTML/CSS] 010. CSS3를 이용한 3D 바 차트 코딩하기 Animated 3D Bar Chart with CSS3 [미리보기]

[HTML/CSS] 011. CSS3를 이용한 미리보기 효과 코딩하기 Annotation Overlay Effect with CSS3 [미리보기]

[HTML/CSS] 012. 흐르는 듯한 CSS3 이미지 슬라이드 코딩하기 Fluid CSS3 Slideshow with Parallax Effect [미리보기]

[HTML/CSS] 013. 애니메이션 효과를 준 CSS3 탭 메뉴 코딩하기 Animated Content Tabs with CSS3 [미리보기]

[HTML/CSS] 014. HTML5/CSS3를 이용한 로그인 폼 코딩하기 Login and Registration Form with HTML5 and CSS3 [미리보기]

[HTML/CSS] 015. CSS3를 이용한 Responsive 콘텐츠 네비게이터 Responsive Content Navigator with CSS3 [미리보기]

[HTML/CSS] 016. CSS3를 이용한 3가지 유현의 아코디언 메뉴 Accordion with CSS3 [미리보기]

[HTML/CSS] 017. CSS3를 이용한 아코디언 이미지 슬라이드 Image Accordion with CSS3 [미리보기]

[HTML/CSS] 018. 960px 시스템을 이용한 Responsive 코딩하기 Life Beyond 960px: Designing for Large Screens [미리보기]

[HTML/CSS] 019. CSS3를 이용한 배경이미지 회전 시키기 Perfectly Rotate and Mask Thumbnails With CSS3 [미리보기]

[HTML/CSS] 020. 부드러운 효과가 없는 이미지 슬라이더 코딩하기 Twitter Bootstrap 101: The Carousel [미리보기]

[HTML/CSS] 021. 시간이 오버되면 사라지는 CSS 박스 코딩하기 Timed Notifications with CSS Animations [미리보기]

[HTML/CSS] 022. 깔끔하고 스마트한 CSS3 로그인 폼 코딩하기 Smarten Up a Slick Login Form With CSS3 [미리보기]

[HTML/CSS] 023. HTML5로 상품페이지 접었다 펼치기 코딩하기 How to Build a Single Product Page [미리보기]

[HTML/CSS] 024. HTML5를 이용한 오디오 플레이어 코딩하기 Old School Cassette Player with HTML5 Audio [미리보기]

[HTML/CSS] 025. CSS3를 이용한 버튼 클릭 이미지 효과 코딩하기 Create A Sleek On/Off Button [미리보기]

[HTML/CSS] 026. CSS3/HTML5을 이용한 Responsive 사이트 코딩 Coding a Responsive Resume in HTML5/CSS3 [미리보기]

[HTML/CSS] 027. 회원가입 폼을 Responsive 사이트 코딩 Creating Stylish Responsive Form With CSS3 and HTML5 [미리보기]

[HTML/CSS] 028. 네비게이션 메뉴를 Responsive 사이트로 코딩하기 How to Create a Responsive Navigation [미리보기]

[HTML/CSS] 029. 클릭하면 나타나는 드롭메뉴 코딩하기 Styling Dark Select Dropdown With Dropkick.js [미리보기]

[HTML/CSS] 030. HTML5를 이용한 마우스 오버시 이미지 변경하기 Circle Hover Effects with CSS Transitions [미리보기]

[출처] 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. (하드코딩하는사람들) |작성자 최고의별자리

모바일화면 pc에서 확인하기

2013-12-03T11:11:20+09:00

모바일 페이지 작업시 스마트폰으로 일일이 확인하기 까다로우셨죠?

http://troy.labs.daum.net/

에서 확인해보세요. 여러 단말기별로 확인이 가능합니다.

메일링 코딩 스타일

2013-09-29T14:34:07+09:00

메일링 코딩스타일 적용테스트 (외부스타일 제외)

메일링 코딩을 할때 여러분들은 웹표준에 맞춰 코딩을 하는지요?

메일링은 웹페이지로 볼수 없으며, 구조화를 시킬 필요도 없고, 시킬수도 없다는게 제 개인적인 생각입니다.
그래서 몇가지 테스트를 해보았습니다. 사실 꽤 오래전에 테스트를 한건데 이제서야 공유를 합니다.

css 를 부르는 방법은 크게 3가지로 분류 됩니다, (외부스타일, 내부스타일, 인라인스타일)
여기서 외부스타일은 메일제공 사이트와 class 충돌문제가 발생할수 있어 테스트 항목에서 제외시켰습니다.
총 테스트 방법은 3가지(옛날방식, 인라인방식, 내부스타일) 이며, 자주이용하는 메일 9개만 테스트 해보았습니다.

	옛날방식	인라인스타일	내부스타일	비고
Daum	O	O	O
네이버	O	O	X	이미지를 첨부파일로 인식, 내부스타일 적용안됨
야후	O	O	O
파란	O	O	O	이미지를 첨부파일로 인식
구글(G메일)	O	X	X	스타일 적용안됨
엠파스	O	O	O
네이트	O	X	X	스타일 적용안됨, 이미지를 첨부파일로 인식
코리아닷컴	O	O	O	이미지를 첨부파일로 인식
Outlook Express	O	O	O

● 간단하게 3가지 방식을 설명을 드리자면

- 옛날방식 : 배경이미지나, 폰트사이즈, 컬러등을 css 로 입히는 방식이 아닌 엘리먼트 안에 직접적으로 해당소스를 삽입하는 방법입니다. ex)
- 인라인스타일 : 배경이나, 폰트사이즈, 컬러등을 해당 엘리먼트 안에 스타일을 주는 방식입니다. ex)style="background:url(http:///test_bg.gif) no-repeat;">
- 내부스타일 : 해당 페이지 안에 style 소스를 선언후 class 로 불러오는 방식입니다. ex) .wrap -->

테스트 결과 네이버, 구글, 네이트는 내부스타일과 인라인스타일이 적용 되지 않았습니다.
스타일이 적용되지 않는 이유는 스타일 충돌이 생겨 메일사이트가 깨지는 경우를 대비해서 해당사이트에서 차단한듯 보여집니다.
위에서도 알수 있듯이 공통적으로 동일하게 보여지게 하기 위해선 옛날방식 (table 방식) 으로 진행이 되어야 하며, 스타일 적용이 되지 않는 곳이 있기에 div 방식은 피하는것이 좋을듯 보여집니다.

추가

글이 유실되서 간신히 원본글(http://webmini-textcube.blogspot.kr/2009/02/css%EB%A9%94%EC%9D%BC%EB%A7%81-%EC%BD%94%EB%94%A9-%EC%8A%A4%ED%83%80%EC%9D%BC.html)을 찾아서 다시 포스팅합니다. 2009년도에 포스팅을 했었고, 2008년도에 테스트를 한 내용입니다. 지금하고 바뀐부분이 좀 있습니다. 그냥 참고만 하시구요.

네이버메일 같은경우 style에 position이 들어가면 자동으로 해당스타일을 삭제를 합니다.

그리고 아웃룩같은경우는 이미지에 map링크가 안되는점과 배경이미지는 기본적으로 보이지 않아서 따로 아웃룩에서 설정해야하니 되도록이면 아웃룩메일에서는 배경이미지 대신 배경색상으로 작업하시는게 정신건강에 좋습니다.

반응형 웹 참고 사이트(미디어쿼리)

2013-06-03T16:16:50+09:00

반응형 웹 참고할 만한 사이트들을 모아둔곳입니다.

http://mediaqueri.es/

스마트폰, 태블릿 해상도와 웹브라우저별 해상도

2013-06-03T16:12:54+09:00

기본 해상도

가로폭	명칭
480px	스마트폰
800px	태플릿
1024px	넷북
1600px	데스크톱

스마트폰 해상도

기종	해상도	웹 브라우저 해상도
아이폰4, 4S	960 * 640	480 * 320
아이폰5	1136 * 640	568 *320
갤럭시 S3	1280 * 720	640 * 360
갤럭시 넥서스	1280 * 720	640 * 360
갤럭시 노트	1280 * 800	640 * 400
갤럭시 노트2	1280 * 720	640 * 360

태블릿 PC 해상도

기종	해상도	웹 브라우저 해상도
아이패드, 아이패드 미니	1024 *768	1024 * 768
아이패드 레티나	1136 * 640	1136 * 640
넥서스 10	2560 * 1600	2560 * 1600
넥서스 7	1280 * 800	1280 * 800
서피스	1336 * 768	1336 * 768
갤럭시 Tab7.7 LTE	1280 * 800	1280 * 800

반응형 웹사이트

2012-11-15T16:42:46+09:00

http://mediaqueri.es/

반응형 웹사이트를 모아둔 사이트 입니다.

반응형 웹사이트에 대해 간단히 설명을 드리자면, 해상도에 따라 웹사이트가 플랙서블하게 바뀌는 구조의 사이트라고 보시면됩니다.

위에 사이트에서 예제사이트들을 보시면서 브라우저 해상도를 줄이거나 늘려보세요.

구글 영문 웹폰트 사용하기

2012-08-30T16:43:45+09:00

구글에서 영문 웹폰트를 사용하는 방법입니다.

http://www.google.com/webfonts

위에 주소로 들어갑니다.

구글에서 제공하는 여러 영문 웹폰트들이 있습니다.

원하시는 웹폰트가 있다면 Quick-use 를 클릭합니다.

Quick-use 를 누르면 해당 웹폰트의 api 주소를 제공하는 페이지가 나옵니다.

제공하는 소스를 웹문서에 삽입합니다.

css안에서 import 해도 됩니다.

@import url(http://fonts.googleapis.com/css?family=Skranji)

이런식으로..

그리고 웹폰트를 적용하고자 하는 텍스트에 font-family: 'Skranji', cursive; 스타일을 주면 됩니다.

google.com 으로 접속하는 방법

2012-08-24T16:42:25+09:00

google.com 으로 접속하면 google.co.kr 자동 포워딩 됩니다.

http://www.google.com/ncr 이렇게 접속을 하시면됩니다.

ssl 보안인증서가 설치 잘되어있는지 확인하는곳

2012-08-16T16:13:21+09:00

요새 8월18일에 시행되는 보안인증서 SSL 때문에 웹사이트 운영자들은 많이 바뻐졌을거 같은데요.

설치가 제대로 되어있는지 확인해주는 곳입니다.

http://www.digicert.com/help/

위에 박스에 주소를 입력하세요. ex)https://www.test.com

포트번호도 같습니다. https://www.test.com:41234/

제대로 인증서가 설치되어있다면 녹색체크표시에 파란색으로 아이콘이나 텍스트가 보여집니다.