웹사이트를 위한 CSS 및 HTML 설정: 튜토리얼

Preslav Dobrev2022-10-28 · 4 min read

웹사이트를 구축하는 것은 웹 개발을 시작하는 첫 번째 단계입니다. 웹 개발 지망생들이 가장 먼저 배워야 할 것 중 하나는 웹사이트를 위한 CSS와 HTML을 설정하는 방법입니다. 기본적인 소개 페이지를 설정함으로써 초보자는 웹사이트 디자인 기초를 준비하고, 웹 개발 기술을 연마하며, 개발자들과 협업하는 방법을 배울 수 있습니다.

이 튜토리얼은 웹사이트를 위한 HTML 및 CSS 파일 설정의 기본 단계를 안내합니다. 시작해 봅시다!

사전 요구 사항

HTML 및 CSS에 대한 기본적인 이해.

1단계 - 초기 설정

먼저, 새로운 프로젝트 디렉토리를 생성하고 이름을 demo-project :

mkdir demo-project

1	mkdir demo-project

다음으로, cd 명령어를 사용하여 현재 디렉토리로 이동합니다:

cd demo-project

1	cd demo-project

프로젝트 폴더에 기본 웹사이트를 시작하는 데 필요한 다음 파일들을 추가해 보겠습니다:

index.html : 이 파일에는 모든 HTML 코드가 포함됩니다.
styles.css : 웹사이트 스타일 지정을 위한 모든 CSS 파일을 여기에 보관합니다.
images : 필요한 모든 이미지는 이 폴더에 보관해야 합니다.

이제 프로젝트 디렉토리를 생성하고 필요한 파일을 추가했으므로, 다음 단계로 넘어가 index.html 파일에 HTML 콘텐츠를 추가해 보겠습니다.

2단계 - index.html 파일에 HTML 콘텐츠 추가하기

이전 단계에서 생성한 index.html 파일에 기본 HTML 코드를 추가합니다. 이 기본적인 HTML 줄들은 브라우저에 대한 지침 역할을 하지만 웹페이지에는 표시되지 않습니다.

다음 코드 블록을 index.html 파일에 추가합니다:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welcome to CloudSigma!</title>

</head>

<body>

</body>

</html>

참고: 이 코드 블록을 추가하기 전에 index.html 파일이 비어 있는지 확인하세요. 또한, <title> 섹션에 강조 표시된 대로 제목을 변경하는 것을 고려해 보세요.

Let’s understand the terms used:

<!DOCTYPE html> : HTML 문서에 사용된 HTML 유형을 브라우저에 알리는 선언입니다.
- 여러 버전의 HTML 표준이 존재하므로, DOCTYPE 을 지정하면 브라우저가 HTML 버전을 쉽게 식별할 수 있습니다. 예를 들어, 이 가이드에서는 최신 버전인 HTML5.
<html> : 이 태그는 내부에 포함된 콘텐츠를 HTML로 처리해야 함을 브라우저에 알립니다. <html> 파일을 열 때는 반드시 </html> 태그를 사용하여 닫아야 합니다. 이 태그는 lang 속성을 지원하며, 웹페이지의 언어를 지정할 수 있습니다. 본 튜토리얼에서는 en 언어 태그를 사용하여 언어를 영어로 설정했습니다.
- 사용 가능한 다른 언어를 확인하려면 IANA Language Subtag Registry를 방문해 보세요.
<head> : HTML 문서에서 섹션을 생성하고 웹페이지에 대한 정보를 포함합니다. 그러나 콘텐츠 세부 정보는 없으며, 브라우저는 이 head 섹션에 어떠한 정보도 표시하지 않습니다.
<meta charset="utf-8"> : 문서의 문자 세트를 지정합니다. 이는 유니코드 형식, 즉 UTF-8이어야 하며, 대부분의 공인된 문자 언어를 지원합니다.
<title> : <title> 태그는 브라우저에 웹페이지의 이름을 알립니다. 제목은 웹사이트가 검색 결과에 나열될 때 브라우저 탭에 표시됩니다.
<link rel="stylesheet" href="css/styles.css"> : 브라우저가 CSS 스타일이 포함된 스타일시트를 식별하도록 알립니다.
<body> : 이 태그는 웹페이지의 주요 콘텐츠를 포함합니다. <body> 태그를 사용할 때는 반드시 </body> 태그를 사용하여 닫아야 합니다.

3단계 - CSS를 사용한 스타일 지정

앞서 생성한 styles.css 파일에 프로젝트 요구 사항에 맞게 스타일을 추가합니다. 이 예제에서는 다음 코드 줄을 귀하의 styles.css 파일:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

마침내 웹사이트를 시작하는 데 필요한 기본 HTML 및 CSS 파일을 생성했습니다. 또한 이미지를 추가하고 images 폴더에 보관할 수 있습니다. 파일을 저장하고 닫습니다. 그런 다음 index.html 파일을 즐겨 사용하는 웹 브라우저에서 열면 화면에 기본 페이지가 표시됩니다.

결론

이 입문 튜토리얼에서는 HTML 및 CSS 설정의 기본 사항을 배우고 기본적인 웹사이트를 만들었습니다. 이제 새 페이지를 만들고, 조정하고, 콘텐츠를 추가하고, 탐색 모음에서 모든 것을 연결할 시간입니다. 다음 단계로, index.html 파일에 더 많은 콘텐츠를 추가하고 CSS를 사용하여 스타일을 지정해 보세요.

또한 다음에서 다른 HTML 및 CSS 튜토리얼을 찾을 수 있습니다: 저희 블로그:

즐거운 컴퓨팅 되세요!

Preslav Dobrev

작성자 · CloudSigma

Preslav Dobrev는 CloudSigma의 크리에이티브 디자이너로서, 전통적이고 혁신적인 마케팅 채널을 활용하여 일관된 비즈니스 정체성을 구축하는 데 중점을 두고 있습니다. 그는 영향력 있는 브랜드 내러티브를 창출하기 위해 예술적 비전과 전략적 마케팅을 결합하는 데 능숙합니다.