HTML 및 CSS를 사용하여 웹 페이지를 만드는 방법을 살펴봅니다.

웹 페이지를 보면 이 웹 페이지가 어떻게 만들어졌는지 궁금해 할 수 있습니다. 웹 페이지는 인터넷 브라우저에서 특정 지침 세트를 읽고 해석함으로써 표시됩니다. 이러한 지침은 주로 HTML과 CSS라는 두 언어로 작성됩니다.

W3C(World Wide Web Consortium)는 이러한 언어의 웹 표준 또는 사양을 정의합니다. 서로 다른 웹 브라우저에서 페이지를 올바로 표시하려면 웹 표준을 이해하는 것이 중요합니다. Dreamweaver에는 최신 웹 표준을 기반으로 웹 페이지를 만들 수 있는 기능이 포함되어 있습니다. 웹 페이지를 만들기 위해 HTML과 CSS를 어떻게 함께 사용하는지 살펴보겠습니다.

anatomy-website_1408x792

HTML이란?

웹 페이지는 콘텐츠를 표시하고 HTML로 정의된 기본 구조로 되어 있습니다. 콘텐츠에는 텍스트, 이미지, 링크, 심지어 오디오와 비디오까지 포함할 수 있습니다. 대부분의 HTML 요소는 브라우저에 표시할 콘텐츠 유형을 알리기 위해 여는 <element> 태그와 닫는 </element> 태그를 사용하여 작성됩니다. 태그는 페이지의 구조를 정의하기 위해 특정 순서로 작성됩니다. 아래 예제는 세 개의 대표적인 HTML 태그입니다.

  • <h1>은 머리글 텍스트를 지정하며 페이지 제목으로 적합합니다.
  • <p>는 단락 테스트를 지정하며 본문 텍스트로 적합합니다.
  • <img>src(소스 파일)을 통해 지정된 이미지를 표시합니다.

참고: 이 예제의 HTML은 각 개념을 보다 명확하게 설명하기 위해 대문자로 표시했지만 페이지 코드를 직접 작성할 때에는 소문자로 HTML 코드를 작성하는 것이 좋습니다. 

HTML이란?

CSS란?

HTML을 사용하면 웹 페이지의 기본 구조가 제공되지만 스타일 또는 레이아웃은 사용자가 원하는 대로 변경할 수 없습니다. 페이지에 색상을 추가하고 텍스트 및 이미지 서식을 지정하며 요소의 위치를 변경해야 하는 경우가 발생합니다. CSS는 스타일과 서식을 웹 페이지에 적용할 수 있도록 HTML과 연동되는 언어입니다. CSS를 사용하면 한 개 이상의 HTML 요소를 찾은 다음 해당 요소를 조정하는 방법(예: 요소의 색상 변경 또는 페이지 가운데로 요소 정렬)에 대한 추가 지침을 제공할 수 있습니다.

아래 예제는 세 개의 HTML 요소 모양을 변경하기 위해 CSS를 사용하는 방법을 보여줍니다.

  • h1 머리글 텍스트가 가운데로 정렬됩니다.
  • p 단락 텍스트는 굵은 빨간색이며, 가운데로 정렬됩니다.
  • img 이미지 크기는 150px X 100px로 조정됩니다.
CSS란?
09/04/2018

콘텐츠 제공: Jonathan Petersen

이 페이지가 도움이 되었습니까?