Computer >> 컴퓨터 >  >> 네트워킹 >> 인터넷

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

오늘날 웹사이트를 구동하는 기술은 매우 다양하지만, 인터넷 전체에서 가장 중요한 두 가지 파일은 단연 HTML과 CSS입니다. 물론 복잡한 기능이 필요하다면 추가적인 기술도 함께 사용해야 하지만, 간단한 개인 웹페이지 하나를 만드는 것이라면 HTML과 CSS만으로 충분합니다.

기본 개념 소개

이 글은 HTML과 CSS를 처음 접하는 분들을 위한 입문 가이드로, 최대한 빠르게 간단한 사이트를 만드는 방법을 알려드립니다. 결과물이 반드시 "웹 표준을 완벽히 준수"하는 것은 아닐 수 있으며, 더 세밀하게 다듬고 확장하려면 스스로 추가 학습이 필요합니다. 그래도 대부분의 브라우저에서 "정상적으로" 작동하는 하나의 사이트가 완성됩니다.

지면의 한계상 웹 개발과 디자인의 모든 측면을 깊이 다루지는 않습니다. 대신 제로 상태에서 완전히 작동하는 웹페이지에 이르는 과정을 단계별로 안내하면서, 각 요소가 어떤 역할을 하는지 설명해 드리겠습니다.

필요한 두 개의 파일

현대적인 웹사이트는 수많은 파일로 구성되지만, 그중 핵심은 단 두 가지입니다. 바로 HTML 파일과 CSS 파일입니다. HTML 파일은 페이지의 요소와 구조를 정의하고, CSS 파일은 그 요소들의 외관(스타일)을 정의합니다.

두 파일 모두 특정한 구조로 작성된 일반 텍스트 파일입니다. 따라서 만들거나 수정하는 데 특별한 프로그램이 필요하지 않으며, 어떤 "단순한" 텍스트 편집기든 사용할 수 있습니다. 여기서 "단순하다"는 의미는 윈도우 메모장 같은 프로그램을 뜻합니다. LibreOffice나 Microsoft Word처럼 텍스트에 서식을 "풍부하게" 입히는 워드 프로세서는 적합하지 않습니다.

첫 번째 단계는 바탕화면에 새 폴더를 만들고, 그 안에 빈 텍스트 파일 두 개를 생성하는 것입니다. 하나는 "index.html", 다른 하나는 "style.css"라고 이름 지어 주세요.

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

작업 환경 설정하기

선호하는 브라우저를 실행하고, "파일 -> 열기" 메뉴를 이용하거나 파일을 브라우저 창으로 드래그 앤 드롭하여 HTML 파일을 불러옵니다.

그다음 HTML 파일과 CSS 파일을 메모장 형태의 텍스트 편집기로 함께 엽니다.

세 개의 창(브라우저 1개 + 편집기 2개)을 동시에 볼 수 있으면 작업하기가 가장 편리합니다. 화면이 두 개가 아니라면, 아래 이미지처럼 창을 배치하는 것을 추천합니다.

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

브라우저 창을 화면 한쪽에 고정해 세로 방향으로 절반을 차지하게 하고, 나머지 절반에는 두 개의 메모장 창을 위아래로 나란히 배치하세요.

웹페이지의 구성 요소

HTML 파일이 열려 있는 메모장에 아무 문장이나 입력한 뒤 저장하고, 브라우저에서 F5 키를 눌러 새로고침해 보세요. 방금 입력한 텍스트가 브라우저 창에 바로 나타날 것입니다.

축하합니다! 방금 여러분은 첫 번째 사이트를 만들었습니다. 농담이 아니라, 인터넷 초기의 웹사이트들도 지금 여러분이 만든 것과 크게 다르지 않았습니다. 그 시절에는 내용 자체가 가장 중요했으니까요.

HTML은 특정한 "코드" 집합을 사용해 "각 콘텐츠가 무엇인지 표시(markup)"할 수 있게 해줍니다. 가장 중요한 코드들은 다음과 같습니다:

  • html: HTML 문서임을 나타냅니다. 모든 HTML 파일의 시작 부분에 위치해야 합니다.
  • body: 브라우저에서 보이는 모든 콘텐츠는 이 body 태그 안에 들어갑니다. HTML 문서의 시각적 부분을 담당합니다.
  • p: 텍스트 문단을 나타냅니다.
  • img: 이미지를 삽입합니다.
  • a href: 웹 주소로 연결되는 링크를 만듭니다.
  • div: 콘텐츠 주위에 "상자"를 만들어 CSS로 스타일링할 수 있게 합니다.

콘텐츠를 "정의"하려면 보통 시작과 끝에 동일한 코드를 살짝 다른 형태로 감싸야 합니다. 예를 들어 텍스트 문단은 다음과 같이 정의합니다:

<p>일반 텍스트 문단</p>

"<p>"는 "여기부터 문단이 시작된다"는 뜻이고, "</p>"는 "여기서 문단이 끝난다"는 의미입니다. 양쪽의 "p"를 "div"로 바꾸면 문단으로 표시하는 대신 콘텐츠를 감싸는 상자를 정의하게 됩니다.

단, 예외도 있습니다. 이미지(img)나 구분선(hr) 같은 요소는 "닫는 코드"가 필요 없습니다.

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

수정하고 새로고침하기

HTML 파일의 내용을 모두 지우고 다음 코드로 교체해 보세요:

<html>
<body>
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>

브라우저를 새로고침(F5)하면 HEADER, CONTENT, FOOTER라는 단어가 차례로 아래에 배치되어 나타납니다. 우리는 방금 서로 독립적인 보이지 않는 "div" 상자 세 개를 만든 것이며, 각 상자 안에 단어 하나씩 들어 있습니다.

CSS로 외관을 정의할 수 있도록 각 상자에는 내용에 맞는 키워드, 즉 "식별자(id=name)"를 부여했습니다: header, content, footer. 웹페이지의 모든 요소는 이런 별칭을 가질 수 있으며, "class" 또는 "id"로 설정됩니다. class는 문단, 링크 등 한 페이지에 여러 번 나타나는 항목의 별칭을 정의하고, id는 사이트 이름이나 로고처럼 페이지마다 한 번만 나타나는 요소의 별칭을 정의합니다.

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

실제 콘텐츠 넣기

div 코드 사이의 "HEADER"라는 단어를 삭제하고(구조는 그대로 유지), 원하는 사이트 이름을 입력하세요.

"CONTENT"도 마찬가지로 수정하되, 단순히 텍스트만 넣지 말고 앞서 배운 대로 각 문단의 시작과 끝을 "표시"해야 합니다. "CONTENT"를 두세 문단의 텍스트로 교체해 보세요.

이제 링크에 대해 알아볼 차례입니다. 텍스트 속 어떤 문구든 링크로 바꾸려면 다음과 같은 구조로 작성합니다:

<a href="주소">텍스트</a>

이 코드를 복사해 붙여넣은 뒤, "주소"에는 링크가 가리킬 곳을, "텍스트"에는 사이트에 표시될 문구를 넣으면 됩니다. 예를 들어 푸터의 문구를 웹사이트에 연결하려면 다음과 같이 작성합니다:

<a href="https://www.maketecheasier.com">Make Tech Easier</a>

마지막으로 "FOOTER"라는 단어를 자신의 이름이나 사이트를 디자인한 사람·소유자를 알리는 짧은 문장 등 원하는 내용으로 교체하세요.

변경 사항을 저장하고 브라우저를 새로고침하면 결과를 확인할 수 있습니다.

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

스타일 입히기 (.CSS)

모든 웹페이지의 첫 번째 요소는 head입니다. head 안에는 사이트의 정체성, 이름, 제작자, 언어를 정의하는 코드와 HTML 외에 사용되는 기술들이 담깁니다. 대부분의 외부 JavaScript 및 CSS 파일 링크도 여기에 위치합니다. HTML 파일 최상단, 즉 html 태그 바로 뒤에 다음 코드를 삽입하여 head를 추가하세요:

<head>
 
</head>

CSS로 웹페이지 요소의 스타일을 지정하려면 HTML 내부에서 CSS 파일을 불러와야 합니다. 즉, head 안에 포함시켜야 합니다. 다음 코드는 HTML 페이지가 "text/css" 타입의 "stylesheet" 파일, 즉 "style.css"에 "연결(link)"된다는 것을 나타냅니다:

<link rel="stylesheet" type="text/css" href="style.css">

이 코드를 그대로 복사해 head "안쪽", 즉 <head> 아래 </head> 위에 붙여넣으세요. 변경 사항을 저장한 후 이번에는 CSS 파일로 넘어가 다음 내용을 입력합니다:

body {}
#header, #content, #footer {}
#header, #footer {}
#header {}
#content {}
#footer {}
img {}

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

진짜 사이트답게 만들기

CSS(Cascading Style Sheets, 종속형 시트)는 웹페이지의 특정 요소에 대응하는 표시 규칙의 집합입니다. CSS를 활용하면 웹페이지의 모든 것이 "어디에" 그리고 "어떻게" 나타날지 스타일링할 수 있습니다.

이전 단계에서 페이지의 모든 요소에 대한 빈 규칙 세트를 만들었습니다. 이제 이 규칙에 외관을 결정하는 매개변수를 추가하는 방법을 살펴보겠습니다.

먼저 사이트의 모든 것을 포함하는 body부터 시작합니다. 다음과 같이 수정하세요:

body {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}

위 규칙은 사이트가 브라우저 창의 전체 폭을 차지하고(width: 100%), 브라우저 창 가장자리와의 거리가 없으며(margin: 0), 주변에 여백도 없기를(padding: 0) 의미합니다.

요소의 모든 규칙은 중괄호 {} 사이에 넣어야 하며, 각 규칙은 다음과 같이 세미콜론(;)으로 끝나야 합니다:

#Element_ID {
RULE 1;
RULE 2;
RULE 3;
}

이어서 "#header, #content, #footer" CSS를 다음과 같이 업데이트하세요:

#header, #content, #footer {
float: left;
position: relative;
}

이렇게 하면 세 요소 모두 공통 규칙을 따르게 됩니다. 각각 이전 요소를 기준으로 "상대적으로(relative)" 배치되고 그 뒤를 "따라가며(float: left)" 흐릅니다. 크기, 모양, 외관 등과 무관하게 각 요소는 다음 요소를 밀어내며 절대 겹치지 않습니다.

웹페이지를 실제 사이트처럼 보이게 하려면 #header, #footer를 다음과 같이 업데이트하세요:

#header, #footer {
width: 100%;
height: 100px;
background: rgba(0,0,0,0.9);
color: rgba(255,255,255,0.9);
text-align: center;
font-size: 12px;
}

위 코드는 헤더와 푸터가 모두 폭 100%, 높이 100픽셀이 되고, 그 안의 텍스트가 가운데 정렬되도록 정의합니다.

background와 color 규칙은 각각 헤더·푸터 "div 상자" 전체의 색상과 그 안에 담긴 텍스트의 색상을 지정합니다. "RGBA"는 빨강-초록-파랑(Red-Green-Blue) 색 혼합 표준을 기반으로 색을 설정합니다. 각 색상은 0부터 255까지의 값을 가질 수 있으며, 서로 다른 RGB 값의 조합으로 어떤 색이든 표현할 수 있습니다. 마지막 숫자는 투명도를 나타냅니다. 예를 들어 RGBA(255,0,0,0.5)는 반투명한 빨간색을, RGBA(50,50,255,1)는 선명하고 "불투명한" 파란색을 만듭니다.

마지막으로 사이트의 기본 콘텐츠 영역을 다듬겠습니다. 다음과 같이 외관을 정의하세요:

#content {
width: 80%;
background: rgba(255,255,255,0.9);
color: rgba(0,0,0,0.9);
margin: 0 10%;
}

모든 변경 사항을 다시 저장하고 브라우저 창을 새로고침하면 결과를 확인할 수 있습니다.

이미지 스타일링

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

사이트에 이미지를 추가하려면 HTML 파일로 돌아가야 합니다. content 영역 "안쪽", 첫 번째 문단 앞에 다음 코드를 입력하세요:

<img src="/경로/파일.JPG" alt="설명 텍스트">

여기서 "경로"와 "파일.JPG"는 온라인 또는 로컬에 있는 이미지의 "위치"와 파일명이며, "설명 텍스트"는 접근성을 위해 해당 이미지가 무엇인지 설명하는 내용입니다.

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

이 코드를 추가한 뒤 저장하고 확인해 보면 사이트 레이아웃이 무너진 것을 발견할 수 있습니다. 이 문제는 이미지가 웹사이트에서 어떻게 표시될지에 대한 CSS 규칙을 만들면 해결됩니다.

CSS 파일로 돌아가 모든 이미지(img)가 다른 요소의 흐름을 따라 왼쪽 정렬되도록 선언하세요(float: left와 position: relative).

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

페이지 경계를 벗어나지 않도록 이미지 폭을 페이지 최대 폭으로 지정하고(width: 100%), 이미지가 텍스트에 닿지 않게 위아래로 세로 여백을 추가합니다. 결과는 다음과 같아야 합니다:

img {
float: left;
position: relative;
width: 100%;
margin: 5px 0;
padding: 0;
}

HTML과 CSS 초보자 가이드: 나만의 첫 웹페이지 만들기

이번에는 이미지를 하나 더 추가하되, 왼쪽이나 오른쪽으로 정렬해 보겠습니다. 앞서와 마찬가지로 먼저 HTML 코드로 돌아가 이미지 링크를 붙여넣습니다. 차이점은 요소에 "class", 즉 식별자를 추가해야 한다는 것입니다. 그런 다음 CSS 표시 규칙을 통해 해당 클래스가 "부착된" 모든 요소에 스타일을 지정합니다.

우리는 이 클래스를 "alignright"라고 명명했습니다. 이 클래스가 붙은 객체는 페이지 오른쪽에 표시되기를 원하기 때문입니다.

직접 코드를 만들어 보세요. "style.css"에 .alignright {} 클래스를 추가한 뒤, 이를 스타일링할 규칙을 작성합니다. CSS 코드는 해당 요소가 페이지 오른쪽으로 떠서(float) 배치되고 폭이 46%(width: 46%)가 되도록 지정해야 합니다. 이미지가 텍스트에 닿지 않도록 주변에 2%의 간격을 추가하는데, 이는 1%의 margin(다른 요소와의 거리)과 1%의 padding(요소 주변의 "추가 여백")으로 나눕니다.

결국 이 규칙은 .alignright 클래스가 붙은 이미지가 페이지 폭의 46%를 차지하고, 양쪽에 각 1%의 margin과 1%의 padding을 더해 총 50%, 즉 정확히 페이지 폭의 절반이 되도록 정의합니다. 결과는 대략 다음과 같습니다:

img.alignright {
float: right;
width: 46%;
margin: 1%;
padding: 1%;
}

다음 단계로 나아가기

첫 번째 웹페이지가 완성되어 완벽하게 작동합니다. HTML과 CSS를 더 깊이 학습하면 콘텐츠를 풍부하게 하고, 새로운 요소를 추가하며, 외관을 개선할 수 있습니다. 다음 단계로 HTML 파일을 복사해 이름을 바꾸고, 내용을 수정한 뒤, 각 새 페이지를 서로 링크로 연결해 보세요.

그렇게 어렵게 들리지 않죠? 웹 개발의 세계에 오신 것을 환영합니다. 페이지를 복사하고, 수정하고, 링크로 서로 연결하는 것만으로 여러분의 첫 번째 완전하고 "제대로 된" 멀티페이지 사이트를 만들게 된 것입니다!