안녕하세요.
이 비디오에서는 HTML을 사용하여 웹 사이트의 구조를 만드는 방법을 살펴보겠습니다.
이 RENDERED 웹 사이트를 참조용으로 사용해 볼 텐데요.
이번 시간에는 사이트를 완성하는 것이 아니라 사용된 HTML 빌딩 블록을 주로 살펴볼 것입니다.
이 사이트 상단에 HTML 머리글이 있고 왼쪽에 로고가 포함되어 있고 오른쪽에 내비게이션이 있습니다.
그 아래는 히어로 섹션으로 RENDERED라는 커다란 텍스트와 비디오가 있습니다.
약간 더 아래로 내려가면 인트로 섹션이 있고 더 내려가면 왼쪽에 아트웍이 있는데요.
일명 아트웍 섹션이죠.
오른쪽에는 아트웍 설명이 있습니다.
아래로 더 내려가면 마지막으로 중요한 바닥글 섹션이 있습니다.
이제 Dreamweaver에서 이러한 섹션을 다시 만들어 보겠습니다.
이것은 완성된 사이트 구조이며 현재 개발자 모드에 있습니다.
또한 Dreamweaver에서 사이트를 정의해 놓았으므로 이 프로젝트의 파일을 관리할 수 있습니다.
이 튜토리얼을 잘 따라 하시기 바랍니다.
사이트를 만들려면 사이트에서 새 사이트를 선택합니다.
현재 사이트 정의에 대한 다른 튜토리얼이 제공되고 있으므로 도움이 될 것입니다.
이 html-layout-index-start.html을 열고 먼저 해야 할 것은 페이지 제목을 추가하는 것입니다.
모든 페이지에는 제목이 필요한데요.
기본적으로 무제 문서로 되어 있는데 RENDERED라고 변경해 보죠.
이렇게요.
페이지 제목은 브라우저 상단에 사용되는데요.
Google에서 검색 결과를 표시할 때 사용합니다.
브라우저에서 제목을 간단하게 살펴보죠.
실시간 브라우저 미리보기를 사용해 보겠습니다.
화면 하단으로 이동해 보면 확인할 수 있는데요.
Google Chrome을 선택해 보죠.
그러면 페이지가 표시되고 입력한 제목을 볼 수 있습니다.
상단에 RENDERED라고 표시되어 있네요.
이것이 페이지 제목입니다.
좋습니다.
그러면 이제 이 넓고 새하얀 페이지를 수정하기 위해 페이지에 HTML을 추가해 보겠습니다.
먼저 HTML 레이아웃을 입력해 보죠.
현재 주석이 있는데 섹션 위치를 이해하는 데 도움이 됩니다.
섹션이 이러한 주석 괄호 안에 있지만 브라우저에서는 무시되며 소스 코드에서만 볼 수 있습니다.
그러면 먼저 머리글 주석 아래에 Tab을 몇 번 누르고 HTML 레이아웃을 입력해 보겠습니다.
여는 꺽쇠 괄호를 입력하고 head를 입력하면 완성하기도 전에 코드가 표시됩니다.
Dreamweaver의 유용한 코드 힌트 기능입니다. head와 header라는 두 코드가 표시되는데 이 경우 header를 선택하고 닫는 꺽쇠 괄호를 입력합니다.
모든 태그는 여는 태그와 닫는 태그가 필요하죠.
여는 태그가 있으므로 닫는 태그를 입력합니다.
여는 꺽쇠 괄호를 입력한 다음 슬래시를 입력하면 나머지가 자동으로 채워집니다.
HTML에서 모든 레이아웃 태그는 여는 태그가 있고 이 경우 header 다음에 닫는 태그가 있습니다.
닫는 태그는 같은 단어에 슬래시가 포함되죠.
보시다시피 body도 동일합니다. body의 여는 태그와 닫는 태그가 있죠. head도 마찬가지로 여는 태그와 슬래시가 포함된 닫는 태그가 있습니다.
이제 header 태그를 사용하는 이유를 설명해 드리죠. header, main, footer와 같은 태그를 추가하면 페이지에 구조 요소를 정의하는 데 사용되는 사전 정의된 HTML5 태그를 사용할 것입니다.
사이트를 제작하는 경우 이러한 사전 정의된 요소를 혼합하여 사용한 다음 나중에 나만의 사이트를 만들 수 있습니다.
이제 실시간 브라우저 미리보기로 이동하여 확인해 보죠.
실시간 브라우저 미리보기를 통해 실제 브라우저에서 코드를 확인할 수 있습니다.
이 경우 Chrome을 사용해 보죠.
이렇게 보이는군요!
회색 상자가 머리글입니다.
그런데 왜 머리글이 회색 상자로 되어 있을까요?
보통 header 태그만 추가하면 이처럼 header 요소는 브라우저에서 보이지 않습니다.
사실은 header 요소를 보여드리기 위해 미리 사전 정의된 CSS를 이해하기 쉽도록 추가해 놓았습니다.
그러면 Dreamweaver에서 완성된 코드를 보여드리죠.
여기에 header 태그가 있습니다.
이 튜토리얼에서는 HTML5 레이아웃 요소를 주로 살펴볼 텐데요. header와 같은 모든 요소는 스타일이 필요합니다. header의 경우 크기와 색상을 설정해야 하죠.
그래서 스타일을 지정하는 CSS 시트를 미리 만들어 두었습니다.
상단으로 이동하여 CSS 시트를 클릭해 보죠. header를 보면 높이와 색상이 설정되어 있습니다.
CSS 스타일 지정과 관련해서는 다른 튜토리얼을 참조하시고 이 시간에는 HTML5 레이아웃 요소에 초점을 맞추겠습니다.
소스 코드로 이동해 보죠.
다음으로 nav 태그를 입력해 보겠습니다. header는 상단에 있는 큰 블록으로 반투명한 검정 상자이고 nav가 오른쪽 상단에 배치됩니다.
그러면 이제 이 header 섹션 안에 커서를 두고 Return 키를 누릅니다.
이 안에 nav를 입력하고 닫습니다.
그런 다음 여는 꺽쇠 괄호를 입력하고 슬래시를 입력하여 닫는 태그를 자동으로 채웁니다.
알아서 해주죠.
이미 nav에 대한 CSS가 있는데요.
그러면 브라우저에서 확인해 보죠.
다시 브라우저로 이동하면 여기에 nav 태그가 있습니다.
이것이 nav 태그이고 header 안에 포함되어 있죠.
CSS에서 흰색으로 설정되어 있습니다.
방금 추가한 두 개의 HTML 태그는 매우 중요합니다.
Dreamweaver로 돌아가 Return을 몇 번 눌러 이 섹션을 나누어 보죠.
이것은 머리글 섹션이고 이제 main 콘텐츠를 생성해 보겠습니다. main 섹션도 header와 같은 방식으로 만들면 됩니다.
여는 꺽쇠 괄호를 입력하고 main을 입력한 다음 닫고 여는 꺽쇠 괄호, 슬래시를 입력하여 자동으로 채웁니다.
이렇게 main 섹션이 만들어졌습니다.
이제 main 섹션을 크게 구성해 보죠.
Return을 누릅니다.
첫 번째 main 요소는 히어로 섹션으로 커다란 녹색 상자에 비디오가 포함됩니다.
그런 다음 깔끔한 흰색 상자인 인트로 상자를 추가하겠습니다.
그러면 section 태그를 사용하여 웹 페이지의 영역을 구분해 보겠습니다. section 태그는 HTML5에 이미 있는 사전 정의된 태그로 방금 만든 header, main과 같습니다. section을 입력하고 닫아 보죠.
이 작업이 조금 지루하다면 괄호와 슬래시를 입력하지 않는 방법을 보여드리겠습니다.
Dreamweaver에는 효율성을 높여주는 기능이 있습니다.
꺽쇠 괄호와 슬래시 없이 section을 입력한 다음 Tab을 누르면 자동으로 태그가 입력됩니다.
이러한 기능은 구문을 작성하는 데 유용합니다.
올바른 위치에 태그를 입력했는지만 확인하면 됩니다.
이제 히어로 상자에 대한 섹션 하나를 추가해 보죠.
그리고 섹션 하나를 더 추가해 보겠습니다.
Enter가 아니라 Tab을 누릅니다.
이 섹션은 인트로가 될 것입니다.
문제는 이 section 태그에 스타일을 지정하는 경우입니다.
위는 녹색, 아래는 흰색으로 설정해야 하는데 모두 동일한 태그로 되어 있어 CSS에서 모두 녹색이나 흰색으로 지정하게 됩니다.
그래서 class라는 요소를 사용하여 분리해 보겠습니다.
개별 class를 생성하면 됩니다.
지금까지 사전 정의된 태그를 사용했는데요.
항상 머리글은 header로, 내비게이션은 nav로 지정했죠.
지금부터는 class라는 요소를 만들어 보겠습니다. section 단어 뒤에 한 칸 띄우고 class를 입력했습니다.
보시다시피 class 단어를 자동으로 채울 수 있습니다.
이제 키보드에서 Return을 누르면 나머지 구문이 채워집니다.
아니면 직접 =과 2개의 따옴표를 입력할 수도 있습니다.
이 따옴표 안에 class의 이름을 지정하면 되는데 고유한 이름을 지정합니다.
지금까지 사전 정의된 태그를 사용했는데요.
머리글은 항상 header로, 내비게이션은 항상 nav로 지정했죠.
이제 이 예제에서 고유한 단어인 hero를 사용하겠습니다.
여기에 hero를 자동으로 채울 수도 있는데요.
제가 이전에 CSS 시트를 만들어 놓았기 때문입니다.
앞서 유용한 팁을 활용하여 첫 번째 태그에 스타일을 추가해 보았습니다.
CSS 시트에서 이러한 이름을 가져옵니다.
나만의 사이트를 만드는 경우 이러한 class 이름을 직접 만들 수 있습니다.
현재 이 CSS 시트를 이미 만들어둔 상태이므로 이러한 class를 사용할 수 있습니다. hero를 선택해 보죠.
이렇게 첫 번째 섹션을 식별할 수 있게 했습니다.
다음 class에도 적용해 보죠.
Return을 누르고 이 섹션에 intro라는 class를 추가해 보겠습니다.
이제 브라우저로 이동하여 결과를 확인해 보죠.
좋습니다.
이렇게 머리글이 있는데 반투명한 검정 상자로 되어 있고 그 아래는 녹색으로 표시되어 있죠.
그리고 내비게이션과 큰 히어로 상자가 있고 그 아래에 깔끔한 흰색의 인트로 상자가 있습니다.
Dreamweaver로 돌아가 아트웍 섹션을 만들어 볼 텐데 우선 이 사이트의 구조를 쉽게 이해할 수 있도록 최종 프로젝트를 잠시 살펴보죠.
상단에 머리글, 여기에 내비게이션이 있고 큰 히어로 상자와 인트로 상자가 있습니다.
그리고 지금부터 만들어 볼 아트웍 섹션인데 여기에는 두 개의 섹션이 필요합니다.
왼쪽에 아트웍 사진을 배치하고 오른쪽에 아트웍 설명이 배치됩니다.
그러면 바로 만들어 보겠습니다.
이전에 했던 것처럼 Return을 누른 다음 Tab을 누르고 새로운 section을 입력해 보죠.
앞서 배웠던 유용한 팁을 활용해 section을 입력하고 Tab을 누른 다음 뒤로 두 번 이동해 class를 입력합니다. artworks를 입력해 보죠.
이때 훨씬 빠르고 효율적이며 쉬운 방법을 알려드리겠습니다.
일단 전부 지우고 section을 입력한 다음 Tab을 누르지 않고 마침표를 입력한 다음 class 이름을 입력하면 되는데 이 경우 artworks를 입력하고 Tab을 누르면 이렇게 자동으로 채워집니다.
이 section 안에 article이라는 요소를 입력해 보겠습니다.
여는 꺽쇠 괄호를 입력하고 article을 입력합니다. article을 입력하는 이유는 article은 페이지에서 가장 중요한 콘텐츠를 감싸는 태그이기 때문입니다.
페이지의 핵심이죠.
이미 생성한 다른 중요한 섹션과 다른 태그도 많이 있는데요.
반복적으로 사용될 것입니다.
이 경우 article 태그를 입력해 보죠.
아직 해야 할 작업이 좀 더 있는데요. class가 필요하므로 class를 입력하고 artwork이라고 이름을 지정합니다.
이제 이 article 태그 안에 정말 중요한 요소를 포함시켜 보겠습니다.
이 경우 두 개의 영역이 있어야 하는데요.
아트웍과 아트웍 설명이죠.
이와 같이 section과 article을 만든 다음 div 태그를 만들어 보겠습니다. div 태그는 공간을 구분하는 것으로, section에서 인스턴스로 사용되고 article로 채워지게 됩니다.
다시 돌아가 section을 사용하거나 두 개의 article을 사용할 수 없습니다. div 태그는 재사용 가능한 wrapper 태그로 아트웍과 아트웍 설명에서 사용할 수 있습니다. div class를 artwork-piece라고 지정해 보죠.
알아두어야 할 점은 이 class 이름은 원하는 대로 만들 수 있습니다.
자동으로 채워지는 이유는 이 CSS를 이전에 만들어 놓았기 때문입니다.
닫고 슬래시를 입력합니다.
웹 사이트의 왼쪽 영역을 만들었다면 이제 다른 영역을 만들어 보죠. div class를 입력하고 artwork-description을 선택합니다.
닫으면 완성됩니다.
브라우저에서 확인해 보죠.
여기를 보면 두 개의 div가 생성되어 있습니다.
왼쪽에 artwork-piece가 있고 오른쪽에 artwork-description이 있죠.
이제 이 시간에 마지막으로 살펴볼 HTML 레이아웃 요소 중 하나는 figure 태그로 보통 이미지 컨테이너로 사용됩니다.
이 artwork-piece 태그 안에 입력해 보겠습니다.
이 태그 안에 사이트의 이미지가 배치됩니다. figure를 입력하여 선택하고 닫습니다.
이 figure 태그 안에 이미지를 배치하면 캡션이 필요한 하나 이상의 이미지를 유연하게 사용할 수 있습니다.
이 figure 태그 안에 모든 것을 입력하여 이미지와 캡션이 서로 관련이 있음을 알 수 있습니다.
이 figure 태그에도 스타일이 지정되어 있는데요.
브라우저에서 확인해 보죠.
이 밝은 파란색 상자가 figure 태그입니다.
마지막으로 바닥글을 추가해 보죠.
약간 아래로 내려가 보면 바닥글 주석이 있습니다.
팁을 활용하여 footer를 입력하고 Tab을 누릅니다.
다시 브라우저에서 확인해 보죠.
아래로 내려가면 바닥글이 있습니다.
이 경우 콘텐츠를 추가하지 않을 텐데요.
이 튜토리얼에서는 블록 수준의 HTML5 레이아웃 요소를 주로 살펴보는 것이 목적이기 때문입니다.
개념을 살펴보는 것이죠.
미리 추가해 둔 사전 정의된 CSS 시트를 가져오는 것이 특히 흥미로운 기능이었는데 CSS로 스타일이 지정되지 않은 페이지의 HTML 모양을 확인해 보겠습니다.
현재 이 기본 HTML을 생성하고 CSS 시트를 통해 스타일이 지정되어 있는데요.
이 CSS 시트와 연결되지 않게 삭제하면 이 CSS 시트가 적용되지 않을 것입니다.
브라우저에서 확인해 보죠.
역시 동일한 화면인데요.
HTML이 있지만 스타일이 지정되어 있지 않습니다.
구조는 있으므로 CSS에서 스타일을 지정하면 됩니다.
CSS 스타일 지정에 대한 다른 튜토리얼이 제공되고 있습니다.
다시 이 CSS 버전으로 전환해 보죠.
지금까지 HTML5 레이아웃 요소를 살펴보았습니다. header, main, footer를 살펴보고 여러 섹션으로 나누고 자동으로 태그를 생성하는 방법과 마지막으로 figure 태그를 살펴보았습니다.
지금까지 HTML 레이아웃 요소를 웹 사이트에 추가해 보았습니다.
감사합니다.
