웹 사이트에서 Vcard를 제시하는 방법
vCard는 메일 클라이언트 또는 Outlook, Thunderbird 또는 주소록과 같은 연락처 데이터를 가져 오는 기타 프로그램에서 해석 할 수 있도록 설계된 디지털 명함입니다. 웹 사이트에 vCard를 포함하면 방문자가 정보를 쉽게 다운로드하고 나중에 쉽게 연락 할 수 있습니다. 그러나 vCard에는 시각적 구성 요소가 없으므로 해당 페이지를 디자인하는 것은 전적으로 귀하의 재량에 달려 있습니다. 원하는만큼 거칠거나 절제 할 수 있습니다. 기존 명함의 모양을 모방 한 기본 모양을 원하는 경우 div 요소와 몇 가지 간단한 CSS 스타일을 사용하여이를 수행 할 수 있습니다.
1
웹 사이트에 vCard 파일을 업로드합니다. vCard에 온라인으로 쉽게 배포 할 수있는 전문 데이터 만 포함되어 있는지 확인하십시오.
2
명함을 나타낼 div 요소를 만듭니다. "vcard"와 같은 고유 한 ID를 부여하고 카드에 표시 할 세부 정보를 입력합니다. 기본 카드에는 이름, 웹 사이트 및 이메일 주소가 포함될 수 있습니다. Facebook 페이지, Twitter 계정 또는 기타 소셜 네트워킹 웹 사이트에 연결할 수도 있습니다. vCard 다운로드 링크를 포함하는 것을 잊지 마십시오. 기본 div는 다음과 같습니다.
(555) 555-5555
//www.yourwebsite.com
vCard 다운로드
삼
div가 표시되는 방식을 변경하려면 vcard ID를 스타일 시트에 추가하세요. 흰색 배경과 검은 색 테두리를 사용하는 비교적 큰 카드 프레젠테이션을 원하는 경우 ID는 다음과 같을 수 있습니다.
div # vcard {너비 : 400px; 높이 : 200px; 오버플로 : 숨김; 배경 : #FFFFFF; 테두리 : 1px 단색 # 000000; }
"오버플로 : 숨김;" 콘텐츠가 크기를 초과하는 경우 카드의 너비 또는 높이 확장을 중지합니다. 글꼴 크기와 색상을 정의 할 수도 있습니다. 예를 들어 모든 것이 14 포인트에서 짙은 회색 Times New Roman 글꼴을 사용하려면 ID는 다음과 같습니다.
div # vcard {너비 : 400px; 높이 : 200px; 오버플로 : 숨김; 배경 : #FFFFFF; 테두리 : 1px 단색 # 000000; font-family : 'Times New Roman'; 글꼴 크기 : 14pt; 색상 : # 3B3131; }
4
div # vcard h1 요소를 추가하여 이름을 더 크고 눈에 띄게 만드십시오. 이것은 vCard div 내의 H1 태그 만 변경합니다. 22 포인트 글꼴을 사용하고 작은 회색 그림자를 추가하려는 경우 CSS는 다음과 같습니다.
div # vcard h1 {글꼴 크기 : 22pt; 텍스트 그림자 : 1px 1px #CCCCCC; }
텍스트 그림자 요소는 x 축 오프셋, y 축 오프셋 및 색상으로 정의됩니다. 약간 흐릿한 그림자를 원하면 픽셀 단위로 세 번째 값을 추가하여 블러를 정의합니다.
텍스트 그림자 : 1px 1px 4px #CCCCCC;
5
vCard 요소를 돋보이게 만들고 싶은 다른 시각적 또는 장식 요소를 추가합니다. 이미지를 추가하고, 줄 높이와 단락 정렬을 변경하고, 색상을 수정할 수 있습니다. 시각적으로 더 매력적인 디자인 일수록 더 돋보일 것입니다.
6
웹 사이트에서 vCard 다운로드 링크를 테스트하여 링크가 정확한지 확인하십시오.
