HTML5 / CSS3 웹 페이지 제작을위한 초보자 가이드

이 기사는 "HTML5 / CSS3 자습서 시리즈" - 당신을 더 나은 디자이너 및 / 또는 개발자로 만드는 데 전념하는. 여기를 클릭하십시오. 같은 시리즈의 기사 더보기.

HTML5와 CSS3는 불과 2 년 만에 폭풍에 의해 웹을 휩쓸었다. 웹 디자이너가 웹 페이지를 만들 것으로 예상되는 방식에 많은 변화된 의미가 있었고, 대체 미디어, XML 스타일 태그, 웹 디자이너를위한 진보적 인 입력 속성과 같은 멋진 지원이 꿈에 이루어졌습니다. 애니메이션과 같은 기능.

대부분의 개발자가 잠재적 인 아직 복잡한 데모를 선보이는 것처럼 보이지만 HTML5 / CSS3은 로켓 과학이 아니므로 HTML5 / CSS3 표준 웹 페이지를 작성하는 데 익숙해 질 것입니다. 학습 리소스 및 무료 HTML5 템플릿과 같은 보너스를 사용할 수 있으므로이 기회를 빌어 HTML5 여행을 시작하십시오.!

HTML4와 HTML5 간의 변경 사항

왜 HTML5로 전환하는 것이 중요한지 궁금해 할 것입니다. 무수히 많은 이유가 있지만, 대부분 당신이있을 테니까요. 글로벌 인터넷 표준 작업 다른 모든 디자이너들처럼. 이 방법으로 온라인에서 더 많은 지원을받을 수 있습니다. 현대 웹 사이트에서 웹 사이트가 올바르게 렌더링됩니다. 끊임없이 개선되는.

(이미지 출처 : W3C)

HTML4와 HTML5의 비교는 지표면에서 발견하기가 어렵습니다. 새로운 HTML5 초안을 볼 때 특색있는 요소와 수정 된 오류 처리 절차를 볼 수 있습니다. 브라우저 개발자는 기본 웹 페이지를 렌더링하기위한 새로운 사양을 특히 좋아했습니다..

HTML5에서 더 많은 것은 현대 웹 브라우저의 변환입니다. 이러한 새로운 사양을 통해 웹은 전체적으로 이제는 애플리케이션 플랫폼 HTML (특히 HTML5), CSS 및 JavaScript를 기반으로합니다. 또한,이 시스템은 우아하게 웹 디자이너와 개발자가 조화를 이룬다. 모든 브라우저가 따라야하는 공통 표준 설정.

또한 많은 요소가 새로운 시대의 디지털 미디어를 대표하다. 여기에는 다음이 포함됩니다 과 이는 멀티미디어 지원에 큰 도움이됩니다. 일부 브라우저에서는 양식 유효성 검증을 HTML로 직접 완료 할 수 있습니다. 아직 기능을 인식하지 못한 많은 소프트웨어 개발자가 있기 때문에 jQuery에 대한 필요성은 여전히 크다고 할 수 있습니다. 태그 목록을 보려면이 W3Schools 표를 확인하십시오..

벌거 벗은 HTML5 스켈레톤

어떤 주제를 이해하는 가장 쉬운 방법은 바로 뛰어 들다. 그래서 웹 페이지를위한 아주 기본적인 HTML5 뼈대 템플릿을 만들 것입니다. 몇 가지 새로운 요소를 포함 시켰습니다. 나중에 좀 더 분류하겠습니다..

   첫 번째 HTML5 페이지       환영합니다. 하나, 모두!
   집
 회사 소개
 콘택트 렌즈
 
 
 
   일부 콘텐츠는 여기에.
 
  하지만 여기서도!
 
 
  일부 저작권 및 법적 고지. 어쩌면 © 기호를 조금 사용하십시오..

바로 이것은 표준 HTML4 웹 페이지와 크게 다르지 않습니다. 우리가 알 수있는 것은 우리가 더 이상 자기 닫는 태그를 포함 할 필요가 없습니다.. 개발 프로젝트에서 많은 시간을 절약 할 수 있기 때문에 이것은 정말 멋진 소식입니다..

모르는 사람들에게 XHTML 초안에는 많은 요소가 레이블링되어 있습니다. 자기 폐쇄. 이것들은 'greater than'연산자 앞에 슬래시로 끝나고 다른 곳에서 다른 닫는 태그를 포함 할 필요가 없다는 것을 나타냅니다. 예를 들어 메타 키워드 태그를 만들려면 종결의 필요성없이 다른 곳에.

이 규칙은 HTML5에도 계속 적용됩니다. 하지만 이제 너는 여분의 슬래시도 필요 없다.! 완전하다 유효한, XHTML / XML 표준을 계속 사용할 수는 있습니다. 모든 표준 호환 브라우저에서 두 요소가 같은 방식으로 렌더링됩니다..

페이지 영역 정의

새로운 코드의 대부분은 너무 충격적이어서는 안됩니다. 우리의 doctype은 매우 간단하다. 그 어느 때보 다, 과도한 신체 속성 필요 없음, 우리의 제목에있는 정보는 명확하게 표시되어있다. 계속 전진 해 나가고 자하는 내용에 관심을 집중하고 싶습니다. 꼬리표. 여기에는 기본 페이지의 모든 구조가 포함됩니다. 일부 HTML5 태그를 의도적으로 사용하여 자신의 작업에 포함시키는 방법을 나타냅니다..

먼저 전체 페이지가 ~ 안에 캡슐화 된 div 꼬리표. 이 ID를 ID로 지정했습니다. 싸개, 전체 웹 사이트 콘텐츠를 감싸고 있음을 의미합니다. 이것은 최대 너비 또는 위치 콘텐츠를 설정하는 데 유용합니다. 화면에서. 다음으로 나는 페이지를 3 가지 핵심 요소로 분해했다.

, 코어

, 그리고 짧은

. 내 사용자 지정 헤더 영역 안에는 페이지의 제목과 탐색 항목의 단순한 표시가 추가되었습니다.

래퍼로 태그.

이제

ID가있는 핵심 나는 2 차 클리어 픽스. 이 기능 덕분에 2 열을 자유롭게 뜨다. 우리는 떨어 뜨린 내용이나 이상한 현상을 경험하지 않을 것입니다. 그리고 정당하게 그렇게, 내부에서 나는 2

태그는 주요 콘텐츠 영역과 사이드 바를 각각 포함합니다. 우리는 CSS 스타일을 사용하여 서로 띄울 것입니다..

유사하게 조용한 보행인 꼬리표 이 콘텐츠를 페이지에서 차별화하는 데 효과적입니다. 안에는 저작권 및 소유권 정보가 포함될 수있는 엄숙한 문단이 있습니다. 그러나 페이지에 대한 보조 링크와 같이 조금 더 많은 콘텐츠를 포함시키려는 경우가 많습니다..

Creative CSS3 Wizardry

이 기본 스텐실 레이아웃을 완성하기 위해 몇 가지 CSS 스타일을 사용할 수 있습니다. 기본 HTML5 템플릿에서 외부 CSS 스타일 시트 그래서 우리는 코드 영역을 분리 된 상태로 유지할 수 있습니다. 이것은 혼란을 치우다 장기적으로 페이지와 스타일이 다른 페이지에서 실행되기 시작하면.

(이미지 출처 : W3C)

그래서 CSS로 많은 시간을 보냈지 만, 몇 가지 멋진 효과를 보여주기에 충분합니다. 첫째로 나는 몇몇을의 사용했다 테두리 반경 설정 매우 멋진 탐색 링크 마주침 효과를 구축 할 수 있습니다. 템플릿 코드에서 이와 동일한 효과를 타겟팅 할 수 있습니다. CSS 문서에 다음 행을 추가하기 만하면됩니다..

 nav 디스플레이 : 블록; margin-bottom : 10px;  nav ul list-style : none; 글꼴 크기 : 14px;  nav ul li 디스플레이 : 인라인;  nav ul li a display : 블록; 왼쪽으로 뜨다; 패딩 : 3px 6px; color : # 575c7d; 텍스트 장식 : 없음; font-weight : bold;  nav ul li a : 호버링 background : # deff90; color : # 485e0f; -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px; 패딩 : 3px 6px; margin : 0; 텍스트 장식 : 없음;

또 다른 깔끔한 효과는 clearfix 스타일. 이것은 CSS3의 완전히 새로운 개념은 아니지만 표준 준수 웹 페이지를 구축하는 데 중요합니다. 종종 서로 옆에 콘텐츠를 뜨기를 원할 때 버그가있는 위치 파악 오류를 경험하게됩니다. 오프셋 된 여백 및 부유하는 콘텐츠의 절대 너비 설정 오류로 인해 발생합니다..

이 개념은 다소 혼란스러워 보일 수 있으며 아래에 약간의 코드를 추가하여 도움이됩니다. 기본적으로 두 가지를 타겟팅하고 있습니다.

집단, #왼쪽 과 #권리 페이지의 측면에 해당합니다. 나는 각각의 너비와 떠있는 왼쪽으로 설정했습니다, 그래서 그들은 서로 바로 옆에 스택거야. 우리 컨테이너 이후 div # core ~을 포함한다. 클리어 픽스 이는 내부 콘텐츠가 자유롭게 움직이십시오. 나중에 추가 공간을 자동으로 지 웁니다..

/ * 페이지 코어 * / div # 코어 디스플레이 : 블록; 명확 : 둘 다; margin-bottom : 20px;  섹션 # left width : 550px; 왼쪽으로 뜨다; 여백 : 0 15px;  section # 오른쪽 플로트 : 왼쪽; 너비 : 300px;  / * clearfix * / .clearfix : after content : "."; 디스플레이 : 블록; 명확 : 둘 다; 가시성 : 숨김; line-height : 0; 높이 : 0;  .clearfix display : 인라인 블록;  html [xmlns] .clearfix display : block;  * html .clearfix 높이 : 1 %;

이러한 코드는 시작하기 쉽습니다. 이전에 작성한 HTML5 템플릿 코드에도 적용되므로 간단한 연습입니다. 그러나 실제 웹 마약 중독자에 관해서는 더 많은 CSS3 기능을 살펴볼 것입니다.

덜 알려진 CSS3 구문

전체 HTML5 / CSS3 웹 페이지를 구성하려면 훨씬 더 복잡한 스타일 시트를 사용하게됩니다. 많은 디자이너들이 단축 코드 (예 : 글꼴 : 속성), CSS2 이전의 표준이기 때문에.

그러나 많은 디자이너들이 생각하고 있지 않은 CSS3에는 몇 가지 새로운 속성이 있습니다. 이 중 많은 것은 미학을위한 것이 아니라 애니메이션 효과도 포함합니다. 다음은 가지고 놀 수있는 몇 가지 속성을 설명하는 짧은 목록입니다. 잃어버린 느낌이 들면 구문 예제로 인터넷 검색을 해보십시오..

상자 그림자: 페이지 요소에 깔끔한 그림자 효과를 추가합니다. 왼쪽 / 오른쪽, 위 / 아래, 그림자 흐림 및 색상을 설정하는 4 개의 매개 변수가 제공됩니다. 상자 그림자는 원래의 너비 / 높이에 대한 추가 공간으로 간주되지 않습니다..
텍스트 그림자: 페이지 텍스트 뒤에 아름다운 그림자를 만듭니다. 오른쪽 효과를 사용하면 글자가 페이지 오른쪽에 나타납니다..
국경 - 반경: 둥근 모서리는 허용 표준이되기까지 오랜 시간이 걸렸습니다. 몇 년 전에 많은 웹 2.0 디자이너들이 CSS로 둥근 모서리에 맞게 배경 이미지를 제작했습니다. 그러나 CSS3 border-radius를 사용하면 모든 요소에서 각 테두리의 곡선을 조작 할 수 있습니다.
불투명: 많은 디자이너가 고려하지 않는 단순한 속성 같아 보입니다. 불투명도는 0에서 1.0 사이의 단일 숫자 입력을 기대합니다 (0 % - 100 %). 이 효과는 호버 애니메이션으로 잘 작동합니다..
@ font-face: 복잡한 CSS 스타일과 타이포그래피에 대한 또 다른 아름다운 예입니다. 웹 디자이너는 CSS 문서 내에서 변수로 정의하여 자신의 맞춤 글꼴로 작업 할 수 있습니다..
상자 크기: 기본적으로 상자 크기 조정은 모든 요소를 다음과 같이 설정합니다. 내용 상자. 이것은 너비, 채우기 및 테두리가 모두 최대 너비에 포함됨을 의미합니다. 그러나에에 세트 국경 상자 최대 너비 (예 : 20px)를 정의 할 수 있으며 추가 된 패딩 / 경계선이이 안에 포함되어 개체 내부의 공간을 제거합니다. 그것의 환상적인 재산 한번 masterful의 마스터.

이러한 속성에는 모두 장단점이 있습니다. 나는 그들 모두를 귀하의 웹 페이지에 밀어 넣으려고하지 않는 것이 좋습니다. 그러나 연습은 당신에게 명확한 생각을 줄 것이다. 더 많은 웹 사이트를 쉽게 개발할 수 있도록.

언급 할 가치가있는 추가 된 구문의 핵심 부분이 하나 더 있습니다. 속성 선택자. CSS3를 사용하면 HTML 속성에 기반한 스타일 정의 (예 : type, href, title) 특정 값을 제공 할 수도 있습니다. 예를 들어, 정의 된 제목 속성을 사용하여 링크를 타겟팅하고 배경 아이콘 세트를 제공 할 수 있습니다..

 ul li [title ^ = "ico"] background : url ( 'my-icon.gif');

내가 알았다면 캐럿 기호 등호 앞에서 이것은 다음과 같은 연산자입니다. 접두사를 가진 모든 목록 항목을 정의합니다., ico. 또는 탈자 기호 (^)를 달러 기호 ($)로 대체하여 제목의 접미어 영역을 대상으로 지정할 수 있습니다. 이런 방식으로 CSS3는 타이틀을 'first ico'또는 'book ico'로 설정할 수있는 배경 이미지를 추가하는 것을 알고 있습니다. 관심이 있다면 속성 선택기에 대해 좀 더 읽어보십시오..

함께 모아서

HTML5 및 CSS3 웹 페이지의 핵심은 간단. 웹 개발자는 적은 시간과 적은 스트레스로 독창적 인 웹 사이트를 구축하려고합니다. HTML5의 새로운 기능 덕분에 많은 흔들림이 생길 수 있습니다. 새로운 CSS3 선택기와 속성 중 일부를 사용하면 장기적으로 이점을 얻을 수 있습니다..

(이미지 출처 : W3C)

하지만 너도 그래야 해. 최종 사용자 고려. 궁극적으로 웹 사이트를 공개하는 과정이 끝나면 웹 페이지를 만드는 과정이 끝납니다. 당신의 목표는 쉽게 접근 할 수있는 정보로 청중을 만족 시키십시오., 인간의 독자뿐만 아니라 검색 엔진 크롤러 및 색인 생성 봇. 의미론은 새로운 HTML5 레이아웃 요소를 포함하도록 진화하여 페이지 레이아웃을 일관되게 나눕니다. 모든 현대 웹 브라우저에 맞춰 작은 탐색 및 바닥 글 섹션을 만드는 것이 결코 쉬운 일은 아닙니다..

HTML5 웹 페이지를 쉽게 만들면 페이지 애니메이션을 조사하게 될 것입니다. JavaScript와 AJAX를 이용한 사소한 효과조차도 사용자 환경 및 사이트 성능 향상. 이것은 기사 범위의 일부는 아니지만, 시간이 있다면 jQuery를 사용하는 것이 좋습니다. 오픈 소스 라이브러리는 놀랍고 HTML5 페이지 요소 위에 신속한 프로토 타이핑이 가능합니다..

추가 리소스

전 세계의 블로거들은 HTML5와 CSS3의 새로운 트렌드를 논의하고 대중에게 리소스를 공유했습니다. 시간이 변하고 웹 커뮤니티가 변화하고 있습니다. 공부할 몇 가지 틈새 영역을 고려하고 작은 관심을 가져야합니다..

다음은 몇 가지 추가 목록, 기사 및 자습서입니다. 목록을 HTML5 및 CSS3 리소스로 분리 할 자유를 얻었습니다. 당신이 찾고있는 것을 기반으로 모든 사람들을위한 몇 가지 주제가 있어야합니다. 또한 온라인에서 다운로드 할 수있는 무료 HTML 테마의 간단한 갤러리를 즐기십시오.!

HTML5

HTML5 : 15 가지 영감을주는 실험
HTML5 : 19 개의 웹 애플리케이션
HTML5 : 잠재적 인 플래시 킬링 데모 48 개
Ajax 기반 HTML5 / CSS3 문의 양식 만들기

CSS3

CSS3 : 초심자 가이드
CSS3 : 검색 필드 만들기
CSS3 : 가상 클래스 사용하기
CSS3 : 30 가지 이상의 유용한 자습서

보너스 : HTML5 템플릿 및 테마

디자인 회사

멋진 HTML5 세계로 들어갈 준비가 되셨습니까? 다음은 완전히 무료로 제공되는 HTML5 템플릿입니다. jQuery 스크립트와 사용자 정의 글꼴을 사용하여 자유롭게 테스트 할 수 있습니다.!

HTML5 / CSS3 테마

이 HTML5 / CSS3 구동 테마에는 광범위한 블로그 기능을 갖춘 HTML5 블로그를 만들거나 코드를 파헤 치고 그것에 대해 배울 수있는 블로그 레이아웃 디자인이 있습니다..

요코

Yoko는 CSS3 미디어 쿼리를 기반으로하는 반응 형 레이아웃의 유연성에 대해 이야기하는 최신 WordPress 테마로, 다른 화면 크기에 맞게 조정할 수있는 기능입니다!

회색

고전적인 WordPress 블로그의 스타일을 선호하는 경우 Grey는 테두리 반경, 여러 배경, 텍스트 그림자 등과 같은 CSS3 기능이 기본 제공됩니다..

집단 초보자 가이드, 소셜 미디어 브라우저

iOS 개발 초보자 가이드 인터페이스 - 1 부

Windows 7 Media Center 설치를위한 초보자 가이드