[포토샵]필터를 이용한 모자이크 처리방법

 

 

1.모자이크 처리할 사진을 불러온다.
2.모자이크 할 부분을 마퀴툴로 영역을 지정한다.
3.메뉴 filter > pixelate > mosaic 에서 적당하게 수치조절을한다.

[포토샵]이미지레디 활용 - 배너만들기

완성작입니다.

 

[웹표준]웹표준의 장점

1. 수정과 관리 용이
지금까지 새로운 버전의 브라우저가 출시되거나 사이트 디자인이 큰폭으로 리뉴얼될 때마다 제작자가 페이지를 새로 제작해야 했다. 또 여러 사람이 사이트를 관리하는 경우 서로마다 제작자가 다른 마크업 때문에 불필요한 혼란이 생기는 문제도 있었다. (X)HTML로 콘텐츠를 올바르게 구조화하고 CSS로 시각표현을 통일하여 제어하면 페이지 제작 부담이 크게 줄어든다.

2. 웹 접근성 향상
올바른 (X)HTML과 CSS로 다양한 브라우징 환경에 대응하는 접근 가능한 웹페이지를 만들수 있다. 중요하게 생각할 것은 장애자와 노인을 배려한 웹페이지는 결과적으로 모든 사람에게 높은 접근성을 제공하는 페이지가 된다는 것이다.

3. SEO(검색엔진 최적화) 대책
검색엔진의 크롤러는 (X)HTML소스를 거의 액면 그대로 해석하기 때문에 적절하게 구조화되고 깨끗하게 정리된 소스는 검색로봇이 잘 검색할 수 있다. 부족한 SEO는 비즈니스 기회를 잃고 기회 손실을 가져오기 때문에 상당히 중요한 부분이다.
SEO는 웹표준과도 관계가 깊다. 단적으로 문서구조가 명확한 웹페이지를 만드는 게 바로 SEO이다. 예컨대 타이틀(h1~h6 요소)사용법, 텍스트 강조(strong 요소) 등 웹표준에 기반을 둔 적절한 마크업을 하는 것이다. '인간뿐만 아니라 검색엔진에게도 친절한 페이지'를 만드는 것이 SEO의 주안점이다.

4.파일 사이즈 축소와 서버 저장 공간 절약
소스를 효율적으로 작성하면 파일 크기를 줄이고 서버 저장 공간을 절약할수 있다. 동시에 화면표시에 걸리는 시간이 줄고 서버 부담도 덜 수 있다.

5. 하위호환성과 상위호환성 확보
올바른 (X)HTML과 CSS로 페이지를 제작하면 오래된 브라우저에서도 콘텐츠가 적절하게 표시되고 상위 호환성과 상호운용성이 확보된다.

자료출처 : 웹표준 교과서 내용일부..

[포토샵]Adobe Photoshop CS3 에서 이미지래디는 어디에?

Adobe Design Premium CS3

사용해 보니 너무 좋더군요.. 기존 CS2와 속도면이나 UI 부분에서 많이 발전한듯 싶습니다.
그런데 포토샵 작업을 하다가 애니메이션 줄일이 생겨서 아무리 이미지 래디를 찾아봐도 없더군요..
그래서 혹시나 포토샵에 같이 포함된거 아닌가 하는 생각이 들어서 찾아보니 역시나 이곳에 숨어있었습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

window > Animation 이곳에 있더군요.. 살짝 클릭해주는 쎈쑤~
클릭을 하면 하단에 애니메이션 창이 생깁니다.

 

 

 

 

 

 

 

이제 이미지래디와 똑같이 작업만하면 되겠네요..^^

[CSS]repeat

스타일 시트에서 이미지 관련 속성에 repeat 라는 것이 있습니다.

 

(ex. background-image:url(test.gif) no-repeat; )

 

repeat : 패턴 방식으로 수직,수평방향으로 계속 반복합니다.

no-repeat : 해당 이미지의 사이즈까지만 보여주고 반복하지 않습니다.

repeat-x : 해당이미지를 수평으로 계속 반복해서 보여줍니다.

repeat-y : 해당이미지를 수직으로 계속 반복해서 보여줍니다.

[CSS]폰트사이즈 비교표

point / pixel / em / percent 폰트 비교표 입니다.

Approximate Conversion from Points to Pixels
(and Ems and %)

Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point.

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

[CSS]링크에 각각 다른효과주기

<style type="text/css">
a.link1:hover {color:#529CFF; text-decoration:none}
a.link2:hover {color:#90D133; text-decoration:underline}
a.link3:hover {color:#FFDC74; text-decoration:underline overline}
</style>

 

<a href="webmini01.html" class="link1">웹미니1</a>
<a href="webmini02.html" class="link2">웹미니2</a>
<a href="webmini03.html" class="link3">웹미니3</a>

 

실제로 적용시 class 명을 의미있는 네이밍을 해주시는게 차후에 수정하기 용이합니다.