안녕하세요.
이 비디오에서는 HTML 콘텐츠를 페이지에 추가해 보겠습니다.
현재 함께 만들어 볼 페이지가 열려 있는데요.
이 페이지를 구성하는 HTML을 작성하고 상단에 이 이미지와 내비게이션을 배치해 보겠습니다.
머리글은 모두 가운데에 정렬하고 이 단락 텍스트도 배치하고 이 이미지를 페이지에 추가해 볼 텐데요.
모두 HTML을 사용할 것입니다.
모든 웹 사이트의 시작점이 되죠.
여기를 보면 HTML에 스타일이 지정되어 있습니다.
CSS를 통해서 말이죠.
이 "GOLDRUSH" 단어는 HTML로 작성되었는데요.
단어를 입력하여 머리글을 만들 수 있지만 글꼴 색상, 크기 및 자간은 CSS로 조정하는 것입니다.
CSS는 이 상자들의 거리와 배경색도 조정할 수 있는데, 모두 CSS로 가능합니다.
즉, HTML은 뼈대이고 CSS는 이 뼈대를 꾸미는 역할을 합니다.
이 튜토리얼에서는 HTML을 작성하는 방법을 집중적으로 살펴볼 텐데요.
CSS를 다룬 튜토리얼도 제공되므로 확인해 보시고 이 시간에는 1단계인 HTML을 살펴보죠.
CSS가 적용되지 않은 HTML의 모양을 먼저 확인해 보겠습니다.
이 탭을 클릭해 보죠.
이 사이트는 동일하지만 CSS가 적용되지 않은 것입니다.
보시다시피 내비게이션과 머리글도 있고 이미지와 단락 텍스트도 있습니다.
이 시간에 이 모든 요소를 추가해 볼 텐데요.
그런 다음 CSS를 추가하면 최종 예제와 같이 멋진 사이트를 만들 수 있습니다.
그러면 이제 Dreamweaver를 열어 HTML을 추가해 보겠습니다.
세부적으로 진행하기 전에 개발자 모드로 되어 있는지 확인합니다.
오른쪽 상단을 보면 표준 모드로 되어 있을 수 있습니다.
그러면 개발자로 전환합니다.
현재 Dreamweaver에서 사이트를 정의해 놓았는데요.
효율적인 파일 관리를 위해서죠.
이 튜토리얼을 따라 하려면 사이트를 정의해야 하는데 상단에 있는 사이트에서 새 사이트를 선택하면 됩니다.
이 시간에는 사이트 정의 방법을 다루지 않을 텐데요.
사이트 정의 방법을 다룬 튜토리얼이 제공되고 있으므로 도움이 필요하면 해당 비디오를 확인하시기 바랍니다.
이것은 앞으로 사용할 HTML 페이지인데요. rendered-index-start.html이라고 되어 있습니다.
현재 이 문서에는 HTML 컨테이너들이 만들어져 있고 이 안에 HTML 구성 요소가 포함됩니다.
그러면 먼저 브라우저에서 이 컨테이너들을 살펴보겠습니다.
브라우저에서 문서를 미리 보려면 오른쪽 하단에 있는 이 아이콘을 클릭합니다.
이 실시간 브라우저 미리보기에서 Google Chrome을 클릭하면 이 멋진 페이지가 브라우저에 표시됩니다.
실제로 페이지에는 아무것도 없습니다.
컨테이너는 비어 있죠.
이 시간에 만들어 볼 HTML이 준비되어 있는 것입니다.
그러면 첫 번째 HTML 요소를 입력해 보겠습니다.
Dreamweaver로 돌아가 보죠.
먼저 로고 이미지를 추가해 보겠습니다.
이것이 로고 이미지를 위한 컨테이너입니다.
그러면 이미지를 추가해 보죠.
이미지는 태그를 사용합니다.
먼저 꺾쇠 괄호를 입력하고 "img"를 입력합니다. "img"는 페이지에 이미지를 배치한다는 의미의 HTML 태그입니다.
그런 다음 소스에 해당하는 "src"를 입력하고 Return을 누르면 Dreamweaver에서 적합한 구문들이 자동으로 채워집니다.
등호와 따옴표를 입력하면 검색 창을 열 수 있는 옵션이 제공되는데요.
검색을 클릭하고 images 폴더를 찾아 logo-white.png 파일을 선택합니다.
마지막으로 꺾쇠 괄호를 입력하여 닫습니다.
지금까지 HTML에 이미지를 삽입해 보았는데요.
이번에는 내비게이션을 추가해 보겠습니다.
내비게이션은 오른쪽 상단에 배치해 볼 텐데요.
일반적으로 내비게이션은 이미 만들어 놓은 내비게이션의 줄임말인 "nav"라는 이 컨테이너 안에 포함되고 비순차 목록으로 디자인합니다.
내비게이션을 만들기 전에 비순차 목록의 모양을 보여드리겠습니다.
비순차 목록은 글머리 기호가 있는 목록인데요.
이제 스타일을 지정하여 글머리 기호를 제거하고 보기 좋은 내비게이션으로 만들어 보죠.
먼저 꺾쇠 괄호를 입력하고 "ul"을 입력합니다.
비순차 목록에 해당하는 태그 이름이죠.
닫는 태그도 입력해 볼 텐데요.
이렇게 태그를 입력하면 닫는 태그도 있어야 합니다.
이 태그를 보면 "header"의 여는 태그와 닫는 태그가 있고 슬래시가 포함된다는 점만 제외하면 동일한 구문입니다.
이 "a" 태그의 경우도 마찬가지인데요. "a"의 여는 태그와 닫는 태그가 있습니다. "ul"도 마찬가지로 여는 태그를 입력했다면 닫는 태그를 위해 꺾쇠 괄호를 입력한 다음 슬래시를 입력합니다.
그러면 Dreamweaver에서 닫는 태그를 생성한다는 것을 인식하고 자동으로 나머지가 채워집니다. "ul"은 부모이고 이 "ul" 안에 목록 항목이 있어야 하는데, 목록 항목은 실제 글머리 기호가 됩니다.
이것을 "li"라고 하며 동일한 방식으로 닫는 태그를 만듭니다.
꺾쇠 괄호와 슬래시를 입력하면 자동으로 채워집니다.
이렇게 글머리 기호 목록이 만들어집니다.
이제 이 목록 안에 링크를 삽입해 보겠습니다.
링크를 삽입하려면 먼저 꺾쇠 괄호를 입력합니다.
그러면 기본적으로 "a"가 표시되는데, 이것을 사용합니다. "a"는 앵커 태그로, 앵커 링크를 생성하는 데 사용됩니다.
그런 다음 "href"를 입력합니다. "href"는 하이퍼링크 참조의 줄임말로, 사용자가 이 링크를 클릭할 때 해당 사용자에게 전달하는 페이지 또는 웹 사이트를 참조합니다. "href"를 입력하고 아래쪽 화살표를 사용한 다음 Return을 누릅니다.
그러면 자동으로 채워집니다.
아주 간단하죠.
이제 이 링크 주소를 입력해야 하는데요.
지금은 자리 표시자를 사용해 보죠.
자리 표시자는 해시 기호로 나타냅니다.
하이퍼링크는 앞서 살펴본 "li" 항목보다 조금 더 복잡합니다.
이제 다른 항목에서와 같이 닫는 태그를 생성합니다.
꺾쇠 괄호와 슬래시를 입력하면 나머지가 자동으로 채워집니다.
이 "a"의 여는 태그와 닫는 태그 사이에 원하는 메뉴 목록 단어를 입력합니다.
브라우저에서 지금까지 한 작업을 확인해 보죠.
여기에 내비게이션이 만들어졌네요.
그렇게 멋지지는 않지만요.
이것은 목록 항목 안에 있는 링크이고 이것은 비순차 목록의 글머리 기호입니다.
그런데 보이지 않는 것이 있네요.
바로 이미지입니다.
이것은 제 실수라고 할 수 있는데요.
이 위에 있지만 흰색 배경에 흰색 로고라 보이지 않습니다.
잠시 후에 녹색 배경을 추가하면 흰색 로고가 선명하게 보일 것입니다.
그러면 나머지 목록 항목을 추가해 보겠습니다.
현재 하나만 만들었는데, 총 5개가 있어야 합니다.
Dreamweaver로 돌아가 보죠.
내비게이션은 5개의 옵션으로 구성되어 있습니다.
먼저 이 안에 커서를 둡니다.
이때 모두 선택하여 복사하고 Return을 누른 다음 붙여넣을 수도 있는데요.
이보다 더 쉬운 방법은 이 "li" 안에 커서를 두고 Mac의 경우 Command + D, PC의 경우 Ctrl + D를 누르는 것입니다.
이 단축키를 5번 누르고 텍스트를 바꾸면 됩니다.
아래에 있는 "HOME", "HOME", "HOME"을 "ABOUT"과 같은 단어로 변경하면 됩니다.
현재 구문을 살펴보고 있으므로 나머지는 생략해 보죠.
그런데 더 간단한 방법이 있습니다.
이 모든 구문을 삭제해 보죠.
이 안에서 간단하게 코드를 작성해 볼 텐데요.
Dreamweaver의 유용한 코딩 기능인 Emmet을 사용해 보겠습니다.
이 "ul" 안에 목록 항목을 5개 추가해야 하므로 별표와 5를 입력합니다.
곱하기 5라는 의미죠.
이러한 목록 항목 안에 "a" 태그를 포함한 다음 Return을 누르는 것이 아니라 키보드에서 Tab 키를 누릅니다.
그러면 아주 빠르게 생성됩니다.
Dreamweaver는 이와 같이 웹 사이트 작업 시간을 단축시켜주는 기능들이 있습니다.
이제 해시 기호를 삽입해 보죠.
이 기호는 자리 표시자를 나타냅니다.
나중에 제작 중인 페이지의 실제 링크로 변경할 것입니다.
이제 내비게이션 버튼 이름을 입력해 보죠.
이름은 각각 "HOME", "ABOUT", "GALLERY", "TICKETS", "CONTACT"라고 지정합니다.
이렇게 내비게이션이 모두 만들어졌는데요.
이것이 내비게이션을 구성하는 HTML입니다.
브라우저에서 확인해 보죠.
이것이 기본 HTML 내비게이션의 모양입니다.
지금부터는 미리 만들어 놓은 CSS 문서를 HTML에 연결하는 방법을 살펴보겠습니다.
이 튜토리얼에서는 HTML을 작성하는 방법뿐만 아니라 이 시간에 만든 HTML에 스타일을 지정하여 브라우저에서 멋지게 표시하는 방법도 살펴보겠습니다.
그러면 Dreamweaver에서 미리 만들어 놓은 CSS 시트를 연결해 보죠.
Dreamweaver로 돌아가 CSS 시트를 연결해 보겠습니다.
상단에 있는 "head" 태그 안에 링크를 삽입해야 합니다. "head"의 여는 태그와 닫는 태그를 확인하고 이 안에 아무 데나 추가할 수 있습니다.
이 마지막 스크립트 바로 뒤에 삽입해 보죠.
CSS 시트를 추가할 때 구문이 다소 긴데요.
이때 간단한 방법이 있는데, 앞서 사용한 것과 유사합니다.
먼저 "link"를 입력한 다음 Tab을 누릅니다.
그러면 스타일 시트를 연결하기 위해 필요한 코드가 자동으로 추가됩니다.
마지막으로 스타일 시트를 참조해야 하는데요.
이 파일 패널을 보면 이전에 만든 파일이 있는데요.
이 파일을 연결하려면 이 따옴표 안에 "st"를 입력하기 시작합니다.
그러면 styles.css가 자동으로 제시됩니다.
이 styles.css를 선택하고 키보드의 Return 키를 누릅니다.
이때 아무것도 바뀌지 않는데요.
적어도 코드 뷰에서는 말이죠.
그렇지만 브라우저로 이동해 보면 와우!
분명 HTML이지만 미리 만든 CSS를 적용했기 때문에 이와 같이 변했습니다.
CSS에 대한 자세한 내용을 다룬 비디오 튜토리얼이 제공되고 있으므로 직접 만들어 보시기 바랍니다.
CSS 연결로 몇 가지가 변했는데요.
글머리 기호가 사라지고 밑줄도 사라지고 파란색이 흰색으로 바뀌고 오른쪽 상단으로 이동했습니다.
이제 이미지도 녹색 배경에서 잘 보입니다.
페이지에 있는 컨테이너에는 다른 요소가 포함됩니다.
이 녹색 상자도 있고 흰색 상자도 있고 그레이디언트 상자도 있고 CSS 시트에서 생성되는 다른 요소도 있습니다.
다시 Dreamweaver로 돌아가 HTML을 만들어 보겠습니다.
이번에는 머리글 텍스트를 추가해 볼 텐데요.
먼저 완성된 버전을 보죠.
첫 번째 버전에는 머리글이 몇 개 있는데요.
이것은 메인 머리글으로 h1에 해당합니다.
이것은 두 번째로 가장 중요한 머리글으로 h2에 해당하고 이것은 h3에 해당합니다.
이제 이 머리글들을 추가해 보죠.
이 머리글들은 이 상자에 포함되는데요. "hero-content"라고 미리 만들어 놓았습니다.
먼저 여는 꺾쇠 괄호를 입력한 다음 맨 위에 있는 첫 번째 머리글인 "h2"를 입력하고 닫은 다음 다시 열고 슬래시를 입력하면 자동으로 닫는 태그가 생성됩니다.
이 방법도 빠르지만 더 빠른 방법이 있습니다.
이 방법도 좋습니다. "h2"만 입력하고 Tab을 누르면 모두 자동으로 채워집니다.
이 "h2" 안에 텍스트를 삽입하고 다음으로 "h1"을 입력하고 Tab을 누른 다음 Rendered를 삽입합니다.
브라우저에서 보면 "h2"가 있고 "h1"이 있네요.
이제 "h3"를 추가해 보죠. "h3"를 입력하고 Tab을 누릅니다.
이 경우 직접 입력해 볼 텐데요.
특수 문자가 포함되어 있어 직접 보여드리겠습니다.
하이픈을 입력한 다음 21, 2017을 입력합니다.
이제 하이픈을 넣으면 지원되는 브라우저가 있고 지원되지 않는 브라우저도 있습니다.
따라서 특수 문자를 추가해야 하는 경우 이러한 특수 문자들처럼 말이죠.
또는 문자가 아닌 부호나 숫자도 마찬가지입니다.
이때 해당되는 특수 HTML 구문을 추가해야 합니다.
그래야 모든 브라우저에서 올바로 표시됩니다.
그러기 위해서는 앰퍼샌드를 입력해야 합니다.
그러면 자동으로 코드 힌트가 제공되므로 해당 문자의 코드를 몰라도 선택할 수 있습니다.
예를 들어 % 기호를 찾아 사용해 보죠.
앰퍼샌드 다음에 # 기호, 37, 세미콜론으로 되어 있네요.
이 코드는 백분율 기호를 나타냅니다.
브라우저에서 확인해 보죠.
브라우저는 알 수 없는 HTML이 아니라 이것을 해석하고 백분율로 표시합니다.
이제 하이픈에 해당하는 코드를 찾아 보죠.
이것을 삭제하고 항상 앰퍼샌드로 시작해야 한다는 것을 명심하십시오.
아래로 내려가 보면 하이픈이 있습니다.
앰퍼샌드, #, 45, 세미콜론으로 되어 있네요.
이것이 하이픈입니다.
브라우저에서 확인해 보죠.
하이픈이 있네요.
좋습니다.
끝에 "SAN FRANCISCO"를 입력해 보죠. "h3"가 만들어졌습니다.
다음으로 할 것은 이 흰색 영역에 텍스트를 삽입하는 것입니다.
완성된 버전을 보죠.
이 멋진 인트로 텍스트를 만들어 보겠습니다.
아주 유용한 HTML 태그 목록 중에서 "p" 태그가 있는데요.
이 소개 텍스트에 이 태그를 사용해 보겠습니다.
이 태그는 이 "div" 안에 포함되어야 하는데요.
이 "div" 컨테이너 안에 "p" 태그를 삽입해 보죠. "p"를 입력하고 Tab 키를 눌러 "p" 태그를 추가합니다. "p" 태그는 단락의 줄임말입니다.
사이트를 만들 때 "p" 태그를 많이 사용하는데요.
본문 카피라고 생각하면 됩니다.
이 태그 안에 많은 양의 텍스트가 삽입됩니다.
강력한 CSS를 통해 스타일이 지정되어 있는데요.
글꼴과 크기가 조정되어 멋진 스타일이 적용되어 있습니다.
다음으로 이 부분을 채워보겠습니다.
먼저 완성된 버전을 보면 이 이미지를 삽입해 보겠습니다. "img"는 이전과 같이 할 수 있지만 더 빠르게 해 보죠.
이전에는 "img"를 입력한 다음 "src"를 입력했는데요.
이번에는 더 빠르게 입력해 보겠습니다.
그러면 해 보죠. "img"를 입력한 다음 Tab 키를 누르면 나머지가 자동으로 채워집니다.
이 안에 images 폴더로 이동하여 goldrush.jpg라는 이 이미지 파일을 선택하는데, 유용한 코드 힌트를 사용합니다.
이 alt 태그는 화면 읽기 프로그램을 통해 이미지가 로딩되지 않을 때 페이지에 표시되는 것입니다.
이 경우 아티스트 이름을 삽입해 보죠.
이제 브라우저에서 보면 여기에 멋진 이미지가 표시됩니다.
다음으로 넘어가 보죠.
먼저 완성된 버전을 보겠습니다.
이 "h2"와 "p" 태그를 추가해 보죠.
이번에는 이 "h2"를 위에서 추가한 "h2"와는 다르게 만들어 보겠습니다.
이 "p" 태그도 이 "p" 태그와 다르게 만들어 보겠습니다.
이때 class라는 요소를 사용해 볼 텐데요. class가 이 컨테이너 안에 포함됩니다.
먼저 "h2"를 입력합니다. "h2"를 입력한 다음 Tab 키를 누르면 빠르게 생성되죠.
"Goldrush"라고 이름을 지정합니다.
이 "h2"는 위의 "h2"와 다릅니다.
이제 class를 추가해 보죠.
이와 같이 class를 입력하고 Return을 누르면 필요한 모든 구문이 자동으로 채워집니다.
등호와 따옴표가 추가되죠.
이 경우 "artwork-title"을 선택합니다.
특정 이름의 class가 추가된 것이죠.
이제 "h2"에 "artwork-title"이라는 CSS 스타일이 적용되므로 위의 "h2"와 다르게 표시될 것입니다.
이 아래에서 "p" 태그도 마찬가지로 "p"를 입력한 다음 Tab을 누릅니다.
이제 class를 추가해 보죠. "artwork-text"를 선택합니다.
텍스트를 붙여넣고 브라우저를 확인해 보죠. "h2"와 "p" 태그가 앞서 만든 "h2", "p" 태그와 다릅니다.
다음은 See More 버튼을 만들어 볼 텐데요.
클릭 가능한 링크가 포함됩니다. "p" 태그 아래에 추가해 보죠.
앞서 "a href"를 입력하고 긴 구문을 입력했는데요.
이제 더 빠르게 입력할 수 있습니다. "a"를 입력하고 Tab을 누르면 나머지 구문이 자동으로 채워집니다.
현재 이 버튼에 해당하는 링크가 없으므로 해시 기호를 사용해 보겠습니다.
또한 class도 추가해 볼 텐데요.
이 경우 "see-more" class를 입력하고 실제 텍스트로 이 꺾쇠 괄호 사이에 "See More"를 입력합니다.
브라우저로 이동해 보죠.
See More가 보이고 링크도 있습니다.
이상입니다.
지금까지 다양한 HTML 콘텐츠를 추가해 보았는데요.
실제 자주 사용되는 것은 "p" 태그, "h1", 이미지, 하이퍼링크입니다.
이러한 요소는 웹 페이지의 기본이 됩니다.
빠르게 진행해 보았는데요.
미리 만들어 놓은 스타일 시트가 한몫했습니다.
마지막으로 CSS 스타일이 적용되지 않은 HTML을 보여드리겠습니다.
직접 "h1"을 추가하고 CSS를 적용해 보려면 CSS 사용 방법을 다룬 다양한 튜토리얼을 확인해 보시기 바랍니다.
자세하게 설명되어 있습니다.
이제 CSS가 적용되지 않은 페이지를 확인해 보죠.
Dreamweaver에서 맨 위로 올라가 보면 이 링크를 통해 이 페이지와 스타일 시트가 연결되어 있습니다.
이것을 선택한 다음 삭제하면 제거됩니다.
브라우저에서 결과를 확인해 보죠.
이제 입력한 HTML만 표시됩니다. "ul"과 "li"가 있고 "h2"와 "h1"도 있고 이미지도 있습니다.
링크도 보이고 바닥글도 있네요.
스타일이 적용되지 않은 HTML은 이렇게 표시됩니다.
CSS와 HTML을 함께 사용해야 멋지게 완성됩니다.
HTML 페이지에서 HTML을 삽입한 다음 CSS 시트를 사용하여 스타일을 지정합니다.
이상입니다.
지금까지 웹 사이트에 HTML 콘텐츠를 추가하는 방법을 살펴보았습니다.
