HTML 및 CSS 초보자를 위한

웹사이트를 만들고 싶은 사람은 일찌감치 HTML과 마주하게 됩니다. 그래서 우리는 앞으로의 비디오 트레이닝에서 함께 아름다운 HTML 세계를 정복할 것입니다. 당신은 이 언어가 무엇인지 그리고 스타일시트와 함께 웹사이트를 어떻게 만들 수 있는지 단계별로 볼 것입니다. 하지만 먼저 질문이 있습니다: HTML과 스타일 시트에 대해 실제로 무엇인가요? 이 비디오 트레이닝의 끝에서는 웹사이트를 만들고 테스트하기 위해 필요한 소프트웨어가 무엇인지 알게 될 것입니다.

프로그래밍 언어인 Java와는 달리, HTML로는 별다른 학습을 거치지 않고도 매우 빠르게 처음 결과물을 얻을 수 있습니다. 처음 시작할 때 필요한 것은 편집기와 브라우저뿐입니다. 이 비디오 트레이닝에서는 첫 번째 HTML 문서를 작성하고 브라우저에서 바로 결과를 볼 수 있습니다. 또한 HTML 문서, 즉 웹페이지가 어떻게 구성되며 어떤 기본 구조를 따르는지를 알게 될 겁니다.

요소, 태그 및 속성이라는 용어 간의 관계를 이미이 시리즈의 첫 번째 부분에서 알게 되었습니다. 이제 이러한 것들을 HTML 문서에서 실제로 어떻게 활용할 수 있는지에 대해 알아보겠습니다. 이 비디오 교육의 마무리로, HTML 코드의 구문 오류를 어떻게 확인할 수 있는지 알아보세요.

당신의 웹사이트는 확실히 사진 뿐만 아니라 텍스트로도 이루어질 것입니다. 그리고 텍스트는 가독성을 높이기 위해 제대로 구조화되어야 합니다. 이를 위해 HTML은 다양한 요소를 제공합니다. 이 비디오 트레이닝에서는 텍스트를 위한 주요 구조화 요소를 소개합니다. 또한 HTML 고유의 문자를 마스킹하는 방법과 프로그램 목록을 출력하는 방법을 알 수 있습니다.

텍스트를 잘 읽을 수 있도록 하려면 합리적인 형식이 필요합니다. 그것은 제목과 문단과 같은 순수한 구조 요소를 넘어서는 것이다. HTML에서는 인용구를 표시하고 특정 부분을 굵게 또는 기울여 표시할 수 있습니다. 이를 위한 필수적인 도구가 이 비디오 트레이닝에서 제공됩니다.

요소 중 HTML에서 항상 만나게 될 것은 목록입니다. 이것은 할 일 목록이나 연락처 데이터 뿐만 아니라 메뉴 정의에도 해당됩니다. 따라서 목록은 HTML에서 매우 중요한 역할을 합니다. 그래서 몠록에 대해 자세히 알아볼 가치가 있습니다. 이 비디오 교육에서는 HTML이 제공하는 모든 목록 유형을 배울 수 있습니다. 이것은 목록, 번호 매겨진 목록, 정의 목록 및 메뉴 목록입니다. 또한 필요에 따라 목록을 시각적으로 어떻게 조정할 수 있는지에 대한 안내도 제공합니다.

표는 웹 사이트에서 여전히 중요한 역할을 합니다. 그러나 이제는 데이터를 표시하기 위해서만 그렇습니다. CSS가 없거나 브라우저에서 아직 완전히 지원되지 않았던 시절에는 표가 다른 목적으로도 사용되었습니다: 레이아웃을 만드는 데 사용되었습니다. 표 셀 내에 각 페이지 요소를 배치했습니다. 그 결과 레이아웃 표 몬스터는 CSS 덕분에 다행히도 과거로 남아 있습니다. 오늘날에는 웹 디자인에서 표가 실제로 의도된 대로 사용되는 것만을 위해 사용됩니다: 데이터를 명확하게 표시하기 위해.

조화롭게 보이는 표들은 반드시 같은 수의 셀들로만 이루어진 것이 아니어야 합니다. 이 비디오 트레이닝에서는 표 셀들을 어떻게 결합할 수 있는지 보여줍니다. 두 번째 파트에서는 표의 캡션에 대해 알려드립니다. 이 측면은 중요한데, 이렇게 함으로써 방문자들에게 마지막으로 어떤 데이터에 대한 것인지 바로 보여줄 수 있습니다. HTML에서 표를 디자인하는 방법에 대해 자세히 살펴보며 비디오 트레이닝을 마무리짓습니다. 이전 HTML 버전들과 비교했을 때, 이 분야에서 매우 많은 변화가 있었습니다.

거의 모든 웹사이트는 그래픽 없이는 존재할 수 없습니다. 그러므로 그래픽이라는 주제는 이 시리즈에서도 중요한 위치를 차지합니다. 이번과 다음 비디오 교육에서는 어떻게 웹사이트에 그래픽을 포함시킬 수 있는지 보여줍니다. 하지만 처음에는 다른 측면이 중요합니다: 어떤 이미지 포맷이 온라인에서 사용하기에 적합한가요? 두 번째 파트에서는 이미지 경로를 참조하는 방법에 대해 다룹니다.

그림이 어떻게 일반적으로 참조될 수 있는지는 이전 부분에서 보여졌습니다. 그러나 그림에 대한 끝은 아직 이루어지지 않았습니다. 실제로 적절한 속성을 사용하여 그림을 더 자세히 설명할 수 있습니다. 그것이 이 비디오의 시작 부분에서 다루는 내용입니다. 두 번째 부분에서는 HTML5 구문을 사용하여 이미지 캡션을 어떻게 구현할 수 있는지 설명됩니다.

인터넷의 소금은 하이퍼링크를 통해 콘텐츠를 서로 연결할 수 있는 기회입니다. 이 하이퍼링크가 없다면 오늘날의 인터넷은 상상할 수 없을 것입니다. HTML이 하이퍼링크 정의 측면에서 제공하는 다양한 변형을 이 비디오 트레이닝에서 알 수 있습니다.

HTML은 하이퍼링크에 관한 여러 가능성을 제공하는데, 이전 비디오 트레이닝에서 보여준 것보다 훨씬 더 많은 기능을 제공합니다. 예를 들어, 이메일 링크를 정의하거나 파일을 다운로드할 수 있습니다. 이와 같은 다양한 하이퍼링크 유형을 이 비디오 트레이닝에서 배웁니다.

말해두자면: 특히 HTML5에서는 폼이 크게 발전했습니다. 다양한 새로운 필드 유형 덕분에 매우 흥미로운 폼을 만들 수 있습니다. 이러한 새로운 기회들을 물론 여러분들도 알게 될 것입니다. 그러나 이 비디오 교육에서는 폼을 정의하는 데 필요한 기본 도구부터 시작합니다. 시작부터 한 줄 입력 필드를 만드는 방법에 대해 다루고 있습니다. 어떻게 정의되는지, 값으로 채우는 방법 및 쓰지 못하게 하는 방법을 보게 될 것입니다. 비밀번호 필드의 정의에 대해 배우게 될 것입니다. 결국 이는 가끔씩 사용해야 하는 필드 유형입니다.

이 비디오에서는 양식에 추가할 수있는 다른 필드 유형에 대해 배우게됩니다. 구체적으로 말하면, 드롭다운, 라디오 버튼 및 체크 박스에 대해 이야기 합니다. 이 모든 것은 양식에서 항상 필요한 중요한 요소입니다. 따라서 이러한 및 기타 요소에 대해 좀 더 자세히 살펴볼 필요가 충분합니다.

HTML5와 관련해서 특히 양식에 많은 변화가 있었습니다. 그만큼 새로운 양식 기능을 자세히 살펴볼 충분한 이유가 있습니다. 심심한 입력 필드로 끝납니다. 드디어 슬라이더, 날짜 필드 등을 정의할 수 있게 되었고 JavaScript를 사용하지 않고도 가능합니다.

HTML5 폼의 세계로의 진입은 이전 비디오 교육으로 열렸다. 하지만, 여기서 끝나는 것은 아직 멀었다. 실제로 HTML5는 이 분야에서 훨씬 더 많은 것을 제공하고 있다.

HTML5 도입된 필드 유형 외에도 많은 다른 흥미로운 측면이 있습니다. 이제 예를 들어 Google의 양식 필드 자동 완성 기능을 노력을 들이지 않고도 구현할 수 있습니다. 이러한 것들과 다른 것들이 이 비디오 트레이닝에서 보여집니다.

HTML5에 대해 공부하는 사람은 의미론에 대해 다룰 수 없다. 여러분은 이 비디오 트레이닝에서 HTML5에서 제공하는 주요 요소들을 배우게 될 것인데, 이를 통해 문서를 올바르게 구조화할 수 있습니다. 실제로 이런 논리적인 구조화는 웹페이지를 미래에 대비하여 안정적으로 만들고 싶다면 반드시 필요한 것입니다.

HTML5에는 많은 새로운 구조화 요소가 있습니다. 이 요소들은 문서의 의미론적 구조를 담당합니다. 본 비디오 트레이닝에서는 주로 article 및 section 두 요소를 다룹니다. 이 요소들은 HTML 문서의 기본적인 구조를 담당합니다. 또한 이 비디오에서는 div, article, section 간의 차이도 살펴볼 것입니다.

HTML5에서 문서는 단순하게 기사 및 섹션으로 나뉘기만 하는 것이 아닙니다. 실제로 header, footer & Co.와 같은 많은 추가 요소가 의미론적 구조화를 위해 있습니다. 이것들은 분명히 다시 자세히 살펴볼 가치가 있습니다.

이 시맨틱 엘리먼트 시리즈의 마지막 비디오 트레이닝에서는 더 많은 구조화 요소를 배우게 됩니다. 실제로 HTML5는 탐색 영역, 주석 및 요약을 위한 요소도 제공합니다.

이전 HTML 버전에서 멀티미디어 콘텐츠를 포함하는 것은 고통스러웠습니다. object 및 embed 요소를 결합하여 비디오 및 사운드를 웹페이지로 가져오려고 시도했습니다. 삽입된 비디오가 실제로 재생되는지 여부는 의문스러웠습니다. HTML5에서도 이 분야에서 많은 변화가 있었습니다.

비디오를 포함하는 방법을 보셨습니다. 이제 비디오는 웹사이트 방문객에게 제공할 수 있는 모든 것이 아닙니다. 이 비디오 트레이닝에서는 HTML5가 오디오 파일 및 플래시 영화를 포함하는 데 제공하는 옵션에 대해 설명합니다. 가끔은 이러한 것들도 웹사이트에서 보여야 할 때가 있습니다.

프레임은 HTML5에는 더 이상 없습니다. 그러나 그들의 이름때문에 iFrame들은 새로운 HTML 시대에도 합류했으며, 클래식 프레임이 페이지를 독립적인 영역으로 나누는 반면, iFrame으로는 임의의 리소스를 웹 페이지에 삽입할 수 있습니다.

HTML은 콘텐츠를 구조화하는 데 사용됩니다. 웹 페이지를 디자인하는 순간 CSS가 등장합니다. 왜냐하면 CSS와 HTML의 결합만으로 매력적인 웹 사이트를 만들 수 있기 때문입니다. 따라서 CSS에 대해 더 자세히 알아볼 가치가 있습니다.

CSS와 관련된 용어 중 하나는 계속해서 마주할 "선택자"(Selektoren)라는 것입니다. 이 선택자를 사용하여 CSS로 서식을 지정할 요소를 결정합니다. 이 비디오 교육에서는 첫 번째 선택자들을 배우게 됩니다. 여기서 요소 선택자, ID 선택자 및 전체 선택자를 소개합니다. 이것들은 CSS로 웹 사이트를 디자인할 때 매일 다뤄야 할 것입니다.

이전 비디오 교육에서는 일부 선택자가 소개되었습니다. 물론 CSS에는 더 많은 선택자가 있습니다.

이 마지막 셀렉터 비디오 트레이닝에서는 매우 특별한 유형의 셀렉터를 소개하겠습니다. 이것들은 의사 클래스와 의사 요소라고 불립니다. 이것들은 특정 HTML 요소를 대상으로하지 않고 출력 장치에 의해 생성됩니다.

이 비디오 트레이닝과 다음 비디오 트레이닝에서는 가장 중요한 CSS 속성들을 소개할 것입니다. 이 과정에서 CSS 레퍼런스를 제시하는 것이 아니라 CSS로 어떤 것이 모두 가능한지 느끼게 될 것입니다. 여기서 글자 디자인부터 시작하겠습니다. 이 비디오 트레이닝에서는 폰트와 관련된 모든 요소들을 소개합니다. 글자 디자인에는 더 많은 속성이 있으며, 다음 비디오 트레이닝에서 다룰 것입니다.

이 비디오 교육에서 소개된 CSS 속성을 사용하여 텍스트와 문자를 시각적으로 조정할 수 있습니다. 예를 들어 각 문자 간의 간격을 조정하거나 텍스트를 정렬할 수 있습니다. 이러한 속성들도 텍스트를 매력적으로 표현하는 데 도움이 됩니다.

물론 CSS에는 색상 정의 및 그래픽 배경이 누락되어서는 안됩니다. 해당 속성들은 이 비디오 트레이닝에서 소개됩니다. 실제로 CSS는 이 분야에 다양한 기능을 제공합니다. 따라서 단순히 색상과 이미지를 정의하는 것뿐만 아니라 반복적인 배경 이미지도 가능합니다.

웹 사이트 레이아웃 작업에 관한 것이기 때문에 외부 여백과 간격의 정의와 관련이 있을 것입니다. 이 시리즈의 최근 비디오 트레이닝에서는 다양한 CSS 속성의 실제 사용 사례를 보여주는 포괄적인 예제 프로젝트가 구현됩니다.

CSS는 텍스트 단락과 블록에 적용할 수 있는 몇 가지 흥미로운 속성을 제공하는데, 이를 여러분들에게 알려드리고 싶습니다. 따라서 예를 들어 텍스트 단락을 왼쪽 정렬하거나 오른쪽 정렬할 수 있습니다.

언급되면 대부분은 먼저 표를 생각할 것이다 .이와 관련된 테이블에서 프레임들이 중요한 역할을 하는데, 그러나 CSS를 통해 다른 요소들도 프레임을 적용할 수 있다. 마찬가지로 이 프레임의 최종적으로 어떻게 보일지도 CSS 정의에 따라 명확히 결정할 수 있다.

리스트를 어떻게 정의할 수 있는지 여러분은 이미 오래전부터 아실 것입니다. 결국 이 시리즈에서 상세히 설명되었습니다. 하지만 리스트는 본질적으로 시크하지는 않습니다. 그들이 시각적으로 매력적으로 보이도록하기 위해 해당 CSS 속성이 있습니다. 어떤 것들이 있는지, 어떻게 사용하는지에 대해 이 비디오 교육에서 알 수 있습니다. 두 번째 파트에서는 Counter라고 불리는 것이 다루어지며, 이것들을 사용하여 복잡한 번호 매기기를 할 수 있습니다.

웹 페이지 레이아웃에 관한 얘기가 나오면, 박스 모델이 항상 당신의 조수가 될 것입니다. 왜냐하면 이를 통해 어떻게 그리고 어디에 요소들이 배치되는지 마침내 결정하게 되기 때문입니다.

희망한 위치에 웹 사이트 내 요소를 배치하려면 특정한 CSS 속성을 사용해야 합니다.

이전 비디오 트레이닝에서는 떠다니는 (Floating) 원리에 대해 간략히 설명했습니다. 그러나 이 주제는 매우 복잡하기 때문에 이번에는 그 Floating에 대해 자세히 살펴보겠습니다. 실제로 이것은 CSS에서 중요한 개념입니다. 이 주제를 이해하지 못한다면 웹사이트를 만들 수 없습니다.

이전 비디오 교육에서는 HTML 및 CSS 작업 기초가 설명되었습니다. 이제 물론 첫 번째 결과물 또한 수확되어야 합니다. 다음 비디오 교육에서는 예제 웹사이트를 단계별로 구축할 것입니다. 그러나 이 비디오 교육에서는 먼저 다양한 레이아웃 유형을 익힐 수 있습니다. 웹사이트 디자인에 대한 고려 사항을 시작할 때 적절한 레이아웃 형식을 선택해야 합니다.

저는 우리 실무 프로젝트에서 전형적인 열 레이아웃을 기본으로 삼고 있습니다. 그러나 이 프로젝트를 실제로 색다르게 프레젠테이션하기 전에 여러분들께 본인이 직접 열 레이아웃을 구현할 수 있는 방법을 구체적으로 보여드리고 싶습니다. 여기서 주요 관심사는 이차 및 삼차 열 레이아웃이 될 것이며, 결국 이들이 여전히 대부분 웹사이트의 기초를 형성하고 있습니다.

다음 비디오 트레이닝에서는 웹 사이트 레이아웃을 단계별로 어떻게 구현하는지 보여 드릴 것입니다. 이를 위해 매우 다양한 방법이 있습니다. 레이아웃은 대부분 Photoshop에서 만들어집니다. 각 페이지 요소는 그 후에 잘라내고 CSS 및 HTML을 사용하여 다시 웹 사이트로 결합합니다. 여기서도 마찬가지로 적용됩니다. 그러나 Photoshop 대신 무료로 사용할 수있는 GIMP를 사용하겠습니다. 설명된 단계는 Photoshop에서도 따를 수 있습니다.

자체 레이아웃으로 나아가기 위한 첫 걸음들이 이전 비디오 트레이닝에서 이루어졌습니다. 물론 아직 많은 요소들이 누락되어 있습니다. 그것들은 이 비디오 트레이닝에서 추가될 것입니다. 그 레이아웃이 짜여지고 나면, '슬라이스'라 불리는 잘라내기 단계로 넘어갑니다. 왜냐하면 그것이 마침내 HTML과 CSS를 통해 만들어진 디자인을 실제로 구현할 수 있게 되는 작업 단계이기 때문입니다.

레이아웃을 만들었습니다. 이제 그것을 실제로 실행해 봅시다. 이 비디오 트레이닝에서는 함께 웹사이트의 HTML 기본 구조를 작성해 보겠습니다.

페이지의 기본 구조는 만들어졌지만, 아직은 매우 스파르타식입니다. 이 동영상 교육에서는 페이지의 콘텐츠가 더 확장됩니다. 중점은 먼저 페이지 상단에 있는 메뉴에 둡니다. 그 다음에 오른쪽과 아래 메뉴가 이어집니다.

시각적으로 매력적인 웹페이지를 만들기 위한 중요한 측면은 당연히 그 폰트 디자인입니다. 이 시리즈에서 여러분은 실제로 HTML 및 CSS가 제공하는 폰트 스타일링 옵션을 이미 알게 되었습니다. 이 비디오 트레이닝에서는 이러한 옵션을 활용하여 웹페이지를 향상시키겠습니다. 이 과정에서 우리는 전통적인 스타일뿐만 아니라 "특별한" 폰트 스타일에도 주목할 것입니다. "이국적인" 폰트를 사용하기 위한 마법사 같은 단어가 @font-face입니다.

보통 방문자들에게 연락을 취할 수 있는 가능성을 제공해야 합니다. 가장 간단한 경우에는 전화번호나 이메일 주소를 남기면 되지만, 방문자들에게는 그렇게 하는 것이 편리하지 않을 수 있습니다. 그래서 이 비디오 트레이닝에서는 방문자가 우리와 쉽게 연락할 수 있는 양식을 만들 것입니다. 물론 이 과정에서 HTML5와 CSS3가 제공하는 기능을 활용할 것입니다.

양식의 기본 구조와 기본적인 디자인이 정의되어 완료되었습니다. 그리고 실제로 양식은 지금 상당히 매력적으로 보입니다. CSS3 덕분에 양식을 시각적으로 더 꾸밀 수 있는 여지가 많이 있습니다. 이 비디오 교육에서 양식을 조금 더 디자인할 것입니다.

이미 현재 시점에서 여러분은 아마 웹사이트 개발에 많은 시간과 노력을 들였을 것입니다. 기획부터 레이아웃 디자인, HTML 및 CSS로의 구현까지. 그래서 세계에 여러분의 웹사이트를 마침내 소개할 시간이 되었습니다. 바로 이 비디오 트레이닝에서 그것이 논의됩니다. 제가 여러분에게 온라인에 웹사이트를 올리는 방법을 보여드릴 것입니다. 먼저 올바른 공급업체와 적절한 웹 스페이스 패키지를 얻는 방법을 알게 될 것입니다. 그 다음 데이터는 인기 있는 FileZilla를 사용하여 서버에 업로드됩니다. 그리고 그 후, 그래 그 다음에는 실제로 웹사이트가 온라인 상태가 됩니다.

이 비디오 교육에서는 웹 사이트를 작성하는 데 필요한 올바른 개발 환경에 대한 간략한 소개를 제공하고자 합니다. 이미 완전한 웹 사이트나 작은 개별 페이지를 작성한 사람들은 일반적으로 이미 이러한 편집기를 보유하고 있으며 이 비디오를 건너 뛸 수 있습니다.

보여질 것들:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5 보일러플레이트는 HTML5 및 CSS3 웹사이트를 위한 강력한 템플릿입니다; HTML5를 가능한 한 CrossBrowser 호환성을 높이며 JavaScript, CSS3 및 물론 HTML 분야의 몇 가지 매우 좋은 코드 템플릿을 포함하고 있습니다.

이 비디오 교육에서는 이러한 기능들을 소개하려고 합니다. HTML5와 CSS3 분야에서 더 좋은 템플릿은 아직 없습니다.

이 비디오 교육에서는 HTML5 및 CSS3를 개발하는 데 유용한 몇 가지 도구들을 소개하려고 합니다.

이 중 일부는 다음과 같습니다:
html5css3box.com
kuler.adobe.com (이제 https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com