요즘 한창 div와 css를 이용해 코딩 작업을 하고 있는데.. 작업을 할 때마다 나를 괴롭히던 문제가 바로 텍스트의
세로 가운데 정렬이었다. 메뉴를 구성할 때 li를 사용하면 기본적으로 텍스트는 상단에 붙게 되는데 보통 세로 가운데
정렬이 되도록 디자인을 하기 때문에 매번 참 고민이었다. 그동안 시도한 방법이 위, 아래로 같은 패딩을 주는 거였다.

그러다 오늘 우연히 CSS 관련 책을 보다가 line-height 속성을 이용해서 메뉴 텍스트를 세로 가운데로 정렬하는 것을
보게 되었다. 좀 미심쩍어 구글링해보니 원래 이 방법이 존재했던 모양이다. 진작에 좀 찾아보고 코딩을 할 것을...

테스트 삼아 몇 줄의 코드를 작성해보니까 왼쪽 이미지처럼 텍스트 정렬이
내가 원했던 대로 되는 것을 확인할 수가 있었다. 앞으로 이런 작업을 할 때는
자주 써먹어야 할 방법인 것 같다. 아래는 왼쪽 화면의 코드이다.


<style type="text/css">
.vertical-middle { border: 5px solid #690; width: 150px; line-height: 3em; }
</style>


<div class="vertical-middle">Text</div>

코드의 핵심은 line-height의 크기를 컨테이너의 크기만큼 지정해주는 것이다. 예를 들어 메뉴를 둘러싸는 컨테이너의
높이가 40px 이라면 line-height 의 값 역시 40px로 지정해주는 것이다. 이런 간단한 방법이 있는 줄 진작에 알았다면..


출처 - http://www.ncube.net/2272

Posted by linuxism
,


HTTP는 우리가 웹브라우저로 웹사이트의 페이지를 받을 수 있도록 해주는 프로토콜이다.

이 프로토콜에는 REFERER라는 헤더값이 있는데 브라우저가 서버로 이 헤더값을 설정해서

보낸다. 이 레퍼러의 가치는 로그 분석이나 접근 제어를 할 때 이용한다.

 

그렇다면 레퍼러의 값은 어떤 내용일까?

 

naver.com에서 blog.naver.com으로 이동하는 클릭을 했을 때 웹브라우저는

서버에 http://www.naver.com/을 값으로 하는 레퍼러를 보낸다.

 

결국 레퍼러의 값은 이 페이지를 요청한 이전 페이지가 무엇인지를 알려준다.

레퍼러는 로그분석을 위해서 유저의 자취를 분석하는데 요긴한 정보이다.

 

로그분석을 할 때, 우리 사이트로의 유입이 어떤 검색서비스를 이용한 것인지 알고자할 때

바로 이 레퍼러를 분석한다. 이것이 일반적인 로그분석기이다.

 

접근제어는 어떻게 이용할까? 게시물을 저장할 때에는 그 전에 게시물을 쓰는 페이지에서

저장을 요청한다. 때문에 저장 페이지에서 레퍼러값을 체크해서 쓰기 페이지가 레퍼러값이

아니면 요청을 거부할 수 있다. 물론 레퍼러 제어는 아주 단순한 방법이기 때문에 완벽한

접근제어는 아니지만 임시적으로 제어를 할 경우에는 간단하기 때문에 꽤 유용하다.

 

 

IE는 일반적으로 A 태그의 클릭에 대해서 Referer를 덧붙여준다. 

A 태그 외에도 img 태그의 이미지 호출시나 script 태그, style 태그의 요청에 대해서도

레퍼러가 남는다. 뿐만 아니라 iframe의 요청에 대해서도 레퍼러가 남는다. 이 때에는

해당 document의 주소가 곧 레퍼러값으로 지정된다.

 

요즘 각광을 받고 있는 AJAX의 경우에도 레퍼러가 남는다.

 

당연히 form 태그를 통한 요청도 레퍼러가 남는다.

 

하지만, window.open과 같은 자바스크립트 호출에 대해서는 Referer를 남기지 않는다.

location.replace나 location.href등도 레퍼러가 남지 않는다. 예외인 셈이다.

 

이에 대해 조사한 결과 I.E에서는 레퍼러가 남지 않지만 파이어폭스2.0 및 오페라 9.0 에서는 레퍼러가 남는다고 한다.

 

 

관련정보

 

INFO: Internet Explorer Does Not Send Referer Header in Unsecured Situations

(http://support.microsoft.com/kb/178066)

 

When linking from one document to another in Internet Explorer 4.0 and later, the HTTP Referer header will not be sent when the referer is a non-HTTP (or non-HTTPS) page. The Referer header will also not be sent when linking from an HTTPS page to a non-HTTPS page.

 

The Referer header is a standard HTTP header in the form of "Referer: <URL>," which indicates to a Web server the URL of the page that contained the hyperlink to the currently requested URL. When a user clicks on a link on "http://example.microsoft.com/default.htm" to "http://example.microsoft.com/test.htm," the theoretical example.microsoft.com Web server will be sent a referer header of the form http://example.microsoft.com.

 

However, Internet Explorer will not send the Referer header in situations that may result in secure data being sent accidentally to unsecured sites. For example, Internet Explorer will not send the Referer header for each of the following example hyperlinks from one document URL to another document URL

 

javascript:somejavascriptcode --> http://example.microsoft.com

file://c:\alocalhtmlfile.htm  --> http://example.microsoft.com

https://example.microsoft.com --> http://www.microsoft.com

 

This prevents local file names from being sent inadvertently to Web servers when linking from local content to Web sites that might snoop on such information. Also, many secure (HTTPS) Web servers store secure information such as credit-card data in the URL during a GET request to a CGI or ISAPI server application. This information can be unwittingly sent in the Referer header when linking out of an "https://" server to an "http://" server elsewhere on the Web. Internet Explorer attempts to prevent this bad practice by not sending the Referer header when transitioning from an HTTPS URL to a non-HTTPS URL.

출처 - http://passionth.tistory.com/884?srchid=BR1http%3A%2F%2Fpassionth.tistory.com%2F884






Posted by linuxism
,


1. 인터넷을 달구는 사진들... 뽀샵질이라는 명칭으로 하늘에 사람도 떠있고 동물얼굴에 사람얼굴도 붙이고 한 사진들이 많습니다. 김프도 포토샵과 요령은 똑같습니다.

여기서 말할 합성은 사진에 있는 사물이나 사람을 떼내서 다른 사진에 가져다 붙이는 합성을 해보겠고, 제가 아는 방법으로 ⓐ '무늬나 이미지 영역을 사용하여 칠하기' ⓑ잘라내서  붙이기 이렇게 두가지를 해보겠습니다.

고려하셔야 할 사항은, 세부적인 손질등 세심한 주의가 합성을 하는데 필요하다는 것입니다. 
얼마나 손질을 하느냐에 따라서 배경과 조화를 이룰수 있고 보기 좋은 결과물이 될수 있다는 것입니다.  특히, 크기가 다른 사진을 조화롭게 만들기 위해서는 배율조절도 필요하겠죠.

아래 두사진을 가지고, 
방파제를 배경으로 한 사진에 갈매기를 떼어다가 입혀보겠습니다.

사용자 삽입 이미지

사용자 삽입 이미지






  +







A. '무늬나 이미지 영역을 사용하여 칠하기'

사용자 삽입 이미지

복사해서 붙이는데 필요한 중요한 두가지 요소는 
왼쪽의 '무늬나 이미지 영역을 사용하여 칠하기'와 오른쪽의 '레이어창'입니다. 


1. 일단 배경이 될 사진의 창을 선택하고 레이어를 추가합니다.
추가된 레이어가 선택된 상태에서 다음 단계로 넘어갑니다.
사용자 삽입 이미지


2. 기본창에 있는 '무늬나 이미지 영역을 사용하여 칠하기' 도구를 선택한후에 복사해서 집어넣을 이미지창을 선택합니다. 
사용자 삽입 이미지

복사해서 붙여 넣게 될 곳을 선택하는데 이때 ctrl키와 마우스 왼쪽버튼을 클릭하면 붙여넣기 기준이 될 지점이 됩니다. 
(포토샵과 동일합니다.)

※ 위의 스크린샷을 보면 왼쪽 아래에 두가지 마우스 커서가 보입니다. 왼쪽은 평상시 상태이고, 오른쪽은 ctrl키를 눌렀을때 입니다.


3. 배경이 되는 곳에 새 레이어를 선택하고 마우스 왼쪽 클릭 한상태에서 계속 문질러서 갈매기 이미지를 붙여 봅니다. (절대 중간에 손떼면 안됩니다.)

사용자 삽입 이미지

3-1. 영역설정으로 복사해서 붙여도 됩니다. 단, 복사해서 붙인 후에 영역설정이 되어 있는 상태에서 새레이어를 한번 더 눌러주셔야 레이어 상태로 편집할수 있습니다. 아니면 사진이 한장으로 붙어 버립니다.

사용자 삽입 이미지




4. 이상태에서 필요한 갈매기 이미지 외에는 다 지워 버립니다.
지울때 기술이 약간 모자라서 잘못지운곳은 약간 문질러서 비슷하게 한다고 했는데 어떨지 모르겠습니다.
약간 위치를 이동해주는 것도 좋겠죠.
사용자 삽입 이미지







5. 레이어 -> 레이어 아래로 합치기를 해줍니다. 
사용자 삽입 이미지

저장 해주면 되겠습니다.




B. 잘라내서 붙이기
윗 방법이 일단 붙이고 나중에 정리를 하는 거라면 이방법은 일단 잘라내고 정리해서 원하는 자리에 가져다 붙이는 겁니다.

사용자 삽입 이미지


일단 배경을 투명하게 하기 위해서 
㉠ 배경을 복사합니다. -> ㉡ 새 레이어를 추가합니다. -> ㉢ 배경 복사한 것을 새 레이어 위로 올립니다. -> ㉣ 기존의 배경을 버립니다. 

1. 아래와 같이 배경을 투명하게 한 다음 잘라낼 갈매기 이미지 외에는 다 지워 버립니다.
사용자 삽입 이미지

2. 갈매기 이미지만 복사하여 방파제 사진에 붙여넣기 하고 위치를 잡아 줍니다.

사용자 삽입 이미지

3. 아래레이어와 합치기를 해주고(또는 선택툴로 선택영역 바깥쪽을 한번 클릭해주셔도 같은 효과가 있습니다), 문지르기 툴이나 기타 방법으로 자연스러울수 있도록 해줍니다.
사용자 삽입 이미지


모든일이 다 그렇지만, 얼마나 공을 들이느냐에 따라 결과물이 다른것 같습니다.


출처 - http://rosywing.tistory.com/15

Posted by linuxism
,