페이지의 크기를 조정하면 이러한 블록 요소가 서로 정상적으로 떨어집니다. 외부 스타일 시트에서 미디어 쿼리의 몇 가지 인스턴스를 설정했습니다. 이렇게하면 나중에 편집 할 때 스타일을 쉽게 추적 할 수 있습니다..

 
 
 
제이크 로슈 로우
 
프리랜서 작가 및 웹 개발자
  허드슨 강, 매사추세츠 주, 미국  [email protected] 내 포트폴리오 • @jakerocheleau 
 
  
 
 

자세한 CSS로 들어가기 전에 마이크로 데이터 사용에 대해 더 자세히 설명하고 싶습니다. 당신이 자세히 보면 나는 많은 다른 요소들 속에있는 속성들을 이름들에 흩 뜨려 놓았다. 항목 형식, 항목 범위, 과 itemprop. 이것들은 모두 웹용 데이터 구조를 제공하고자하는 Schmea 프로젝트와 관련이 있습니다.

유용한 마이크로 데이터 포맷하기

Google, Yahoo! 및 Bing을 비롯한 모든 주요 검색 엔진은 스키마를 데이터 마크 업을위한 최상의 구문으로 채택했습니다. 자신에 대한 세부 정보를 표시함으로써 이러한 검색 엔진이 귀하의 콘텐츠 온라인 관련 결과를 표시하는 데 도움이됩니다. 이걸 설정하는 방법을 알아 봅시다..

itemscope 속성은 스키마 항목에 대한 정보가있는 컨테이너에 적용됩니다. 이 경우 itemtype 특성이 항상 따라옵니다.이 시나리오에서는 사람을 설명합니다. 이 래퍼 div 안에는 itemprop을 사용하여 문서 페이지에 나열된 세부 정보 중 하나와 함께 모든 내용의 레이블을 지정할 수 있습니다..

권장되는 방법은 요소에 직접 추가하는 대신 스팬 태그 안에 내용을 래핑하는 것입니다. 사진과 같이 라벨을 붙이면 itemprop을 img 요소를 직접. 하지만 그렇지 않으면 span 태그에 데이터를 래핑하여 마크 업을 훨씬 더 깨끗하게 처리 할 수 ​​있습니다..

얼마나 많은가 너무 많이?

나는 당신이 들어갈 수있는 세부 사항의 양에 제한이 없다고 주장 할 것이다. Microdata는 온라인 컨텍스트 내에서 사람, 조직, 제품 및 기타 항목을 컴퓨터가 인식 할 수 있도록 도와줍니다. 제공 할 수있는 정보가 많을수록.

마음을 열고 마음을 열고 자신의 웹 사이트에서이 마이크로 데이터를 어떻게 사용할 수 있는지보아야합니다. Schema 문서를 통해 10-15 분을 소비한다면 생각했던 것보다 훨씬 쉽습니다. 이력서 데모에서 두 가지 예를 볼 수 있습니다.

 
 
스킬 셋
 
 
개발
 
 
HTML5 / CSS3
 
자바 스크립트 및 jQuery
 
PHP 백엔드
 
SQL 데이터베이스
 
자료 Wordpress
 
Pligg CMS
 
일부 목표 -C
 
 
 
 
소프트웨어
 
 
어도비 포토샵
 
Adobe Dreamweaver
 
MS 오피스 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

다양한 기술을 나열 할 때 ItemList 스키마를 정의하는 새 컨테이너를 설정했습니다. 사람 아래에 나열 할 수있는 스킬 셋이나 경험이 없으므로 안전한 대안입니다. 여기 값은 Google이 각각을 이해할 수 있다는 것입니다. itemListElement 서로 관련이있다. 이 경우 우리는 언어 및 소프트웨어 목록을 가지고 있습니다..

 
 
최근 기사
 
  CSS와 자바 스크립트를위한 10 가지 유용한 폴백 메소드 • 게시자 : 2012 년 7 월
 
  WordPress의 URL 재 작성 : 팁 및 플러그인 • 게시자 : 2012 년 7 월
 
  웹을위한 JPEG 최적화 - 궁극적 인 가이드 • 게시자 : 2012 년 7 월
 
  완벽한 HTML 회보를 디자인하는 9 개의 간계 • 게시자 : 2012 년 5 월
 
  Google 웹 사이트 최적화 도구로 A / B 테스트 가이드 • 게시자 : 2012 년 3 월
 
 

또 다른 좋은 예는 맨 아래에있는 기사 목록입니다. 기사와 블로그 게시물에 대한 스키마 설정이 있으며, 모두 온라인에서 찾은 콘텐츠와 관련이 있습니다. 나는이 검색 엔진 크롤러를위한 충분한 정보보다 더 많은 기사 URL 및 발행일을 표시했습니다..

마이크로 데이터는 모두 컴퓨터에서 구성 할 내용의 서식 지정에 관한 것입니다. 이 단일 페이지 이력서는 특정인에 대한 특성을 정의하는 완벽한 예입니다. 이것들은 모든 웹 사이트에서 유용하지는 않지만, 이해하는 흥미 진진한 방법론입니다.

상대 CSS 스타일

이 마지막 섹션에서는이 전체 웹 페이지의 스타일을 지정하는 방법에 대해 살펴 보도록하겠습니다. 우리 스타일 시트의 맨 위로 나는 초기 리셋과 기본 요소 속성을 정의하고있다. 여기에는 헤더, 목록 항목 및 앵커 링크 호버 효과가 포함됩니다..

* margin : 0; 패딩 : 0;  html 신장 : 101 %;  body background : # f2f2f2 url ( 'https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); 글꼴 크기 : 62.5 %; 패딩 하단 : 65px;  h1 font-family : "Simonetta", "Trebuchet MS", Arial, sans-serif; 색상 : # 454545; 글꼴 크기 : 3.6em; margin-bottom : 6px;  h2 font-family : "Simonetta", "Trebuchet MS", Arial, sans-serif; color : # 484848; 글꼴 크기 : 2.5em; margin-bottom : 10px; 텍스트 장식 : 밑줄;  h3 font-family : "Trebuchet MS", Verdana, Arial, sans-serif; color : # 777; font-weight : normal; font-size : 1.8em; margin-bottom : 10px;  h4 font-family : "Trebuchet MS", Verdana, Arial, sans-serif; color : # 656565; font-weight : bold; 글꼴 크기 : 1.75em; margin-bottom : 4px;  font-family : "Balthazar", "Droid Serif", Times New Roman, serif; color : # 565656; font-size : 1.8em; 라인 높이 : 1.4em; margin-bottom : 15px; 패딩 왼쪽 : 35px;  small font-family : "Balthazar", serif; color : # 656565; 글꼴 크기 : 1.6em; 디스플레이 : 블록; margin-bottom : 6px;  ul display : block; 목록 스타일 : 없음;  ul li 왼쪽 패딩 : 45px; list-style-type : 없음; 세로 정렬 : 위쪽; 배경 : url ( 'https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom : 5px; font-family : "Balthazar", serif; color : # 666; 글꼴 크기 : 1.6em; 라인 높이 : 2.3em;  img border : 0; 최대 폭 : 100 %;  color : # 5582d6; 텍스트 장식 : 없음;  a : hover text-decoration : 밑줄;  

일부 사용자 정의 글꼴 스택을 제외하고는 흥미 롭지 않습니다. 또한 기본값을 사용하는 대신 고유 한 글 머리 기호 아이콘을 사용했습니다. “디스크”. 유사한 디자인을 찾으려고 할 때 Icon Finder와 같은 디렉토리를 검색해 볼 수 있습니다..

/ ** @group 핵심 레이아웃 ** / #w margin : 0px 50px; 패딩 : 20px 40px; 패딩 - 상단 : 35px; 배경 : #fff; 최소 너비 : 260px; 최대 너비 : 900px; border-bottom-right-radius : 8px; border-bottom-left-radius : 8px; -webkit-border-bottom-left-radius : 8px; -webkit-border-bottom-right-radius : 8px; -moz-border-radius-bottomleft : 8px; -moz-border-radius-bottomright : 8px;  header width : 100 %;  / ** @group 개인 설정 ** / #info 부동 : 왼쪽; margin-bottom : 12px;  #photo float : right;  #photo img -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px; -webkit-box-shadow : 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-shadow : 0 2px 4px rgba (0, 0, 0, 0.2); 상자 그림자 : 0 2px 4px rgba (0, 0, 0, 0.2); 배경색 : #fff; 국경 : 1 픽셀 고체 #ccc; 패딩 : 5px;  

페이지에는주의가 필요한 중요한 블록 영역이 몇 개 있습니다. 물론 래퍼 div는 여분의 여백과 패딩으로 설정됩니다. 페이지가 공백이 너무 많은 것처럼 큰 크기가 느껴지기 때문에 최대 너비는 900px로 제한됩니다. 또한 눈의 부드러운 효과를 내기 위해 페이지 하단에 둥근 모서리를 사용했습니다..

반응 형 디자인

이 온라인 이력서의 가장 중요한 부분은 반응 형 기능입니다. 브라우저 창 크기를 조정할 때 다양한 효과를 얻기 위해 다섯 가지 중단 점 설정이 있습니다..

@ 미디어 전용 화면 및 (최대 너비 : 740 픽셀) h1 글꼴 크기 : 4.5em;  h3 글꼴 크기 : 2.2em;  h2 display : block; 텍스트 정렬 : 가운데;  #info float : none; 디스플레이 : 블록; 텍스트 정렬 : 가운데;  #photo 부동 : 없음; 디스플레이 : 블록; 텍스트 정렬 : 가운데;  #w 패딩 : 20px 15px;  p 패딩 : 0;  

처음의 740 픽셀 사진 이미지가 헤더 텍스트와 충돌 할 곳 주변에 있습니다. 오른쪽에 사진을 드롭 다운하는 대신 두 요소를 모두 지우고 전체 레이아웃을 가운데에 맞 춥니 다. 나는 또한 더 단단한 충격을 남기기 위하여 원본 원본 크기를 증가시켰다.

창 크기가 작아지면서 래퍼 div와 단락에서 몇 가지 추가 패딩을 제거했습니다. 헤더 다음에 나오는 문제는 기술 목록에서 나온 것입니다. 나는 두 컬럼 접근법을 분해하고 대신에 서로 옆에 떠있는 목록 항목을 가지고있다..

@ 미디어 전용 화면 및 (최대 너비 : 570 픽셀) ul li 디스플레이 : 인라인 블록; 패딩 왼쪽 : 15px; 너비 : 140px; 배경 위치 : -5px 0px; margin-right : 6px; 라인 높이 : 1.7em;  # skill-left, skills-right margin-bottom : 15px;  

또한 기본 텍스트 속성의 위치를 ​​변경해야합니다. 줄 높이를 업데이트하고 각 목록 항목의 글 머리 기호 아이콘을 다시 배치해야합니다. 고정 폭을 설정 했으므로 격자는 다음 중단 점까지보다 체계적으로 나타납니다..

스마트 폰 코딩

마지막 세 가지 미디어 쿼리는 작지만 매우 중요합니다. 가로 모드와 세로 모드 사이를 전환하면 iPhone이 모바일 브라우저의 크기를 조정합니다. 대부분의 Android 기기 및 Windows 휴대 전화에서도 마찬가지입니다..

@ 미디어 전용 화면 및 (최대 너비 : 480px) ul li 너비 : 120px;  #w margin : 0 20px;  @ 미디어 전용 화면 및 (최대 너비 : 320 픽셀) #w 여백 : 0 10 픽셀;  / ** iPhone 전용 ** / @media 화면 및 (최대 장치 너비 : 480px) ul li (너비 : 150px;  

480px 이하로 처음으로 래퍼에서 패딩을 더 제거하고 목록 항목의 크기를 다시 조정합니다. 그런 다음 320px에서 문서 외부의 여백 공간을 제거했습니다. 질감이있는 배경을 볼 수는 있지만 그런 슬림 한 세로 뷰포트에서는 그리 중요하지 않습니다..

마지막으로 나는 사용하고있다. 최대 장치 너비 iPhone 장치 자체 또는 최대 너비 480px의 다른 모바일 화면을 타겟팅 할 수 있습니다. 이 경우 목록 항목을 조금 더 넓게 업데이트하여 전체 화면을 채우고 싶습니다. 세로가 너비가 너무 커서 어떤 차이가 있는지 알 수 없으므로 가로보기의 스킬 목록에만 영향을줍니다..

• 데모
• 소스 코드 다운로드

마지막 생각들

인터넷을 통해 일하는 것은 종종 온라인에서 적어도 일부 유형의 포트폴리오를 필요로합니다. 모든 세부 사항을 정리 한 단일 페이지 이력서에 링크 할 수 있으면 비즈니스를 의미하는 것으로 나타납니다. 심각한 고용주와 잠재 고객은 웹 디자인에서의 전문성에 대한 그러한 카리스마 넘치는 표현을 위해 발 뒤꿈치를 맞출 것입니다..

이 튜토리얼에서 요점을 벗어나시기 바랍니다. 전 세계 모든 지역의 프리랜서는 기술적 인 노력을 기울여 시장에 진출 할 수 있습니다. 위의 데모 소스 코드를 다운로드하여 주석 영역에서이 기사에 대한 의견을 공유하십시오..