HTML과 CSS는 웹페이지를 구성하는 가장 기본적인 구성 요소이자 웹 개발자가 되기 위한 첫 번째 단계이기도 합니다. HTML은 웹페이지의 레이아웃과 콘텐츠를 제공하고 CSS는 웹페이지의 스타일과 모양을 정의합니다. 이 튜토리얼에서는 HTML과 CSS의 기본 사항을 다루며, 마지막에는 모든 크기의 기기에서 원활하게 작동하는 반응형 웹페이지를 디자인할 수 있게 될 것입니다.
HTML은 웹페이지를 만드는 데 사용되는 표준 마크업 언어입니다. 제목, 단락, 이미지, 링크, 양식 등과 같은 HTML 요소를 사용하여 웹페이지의 구조와 콘텐츠를 정의합니다.
HTML 코드 작성을 시작하려면 아래 CodePen 데모를 사용할 수 있습니다.
코드 데모?
왼쪽에는 표시될 내용의 기본 청사진인 HTML 소스 코드가 있습니다. 그러면 브라우저는 이 청사진을 오른쪽에 보이는 웹페이지로 변환합니다.
소스 코드를 직접 수정하여 표시되는 웹페이지에 어떤 영향을 미치는지 확인할 수 있습니다.
물론 실제로는 CodePen과 같은 도구를 사용하여 제대로 작동하고 모든 기능을 갖춘 웹 애플리케이션을 만들 수는 없습니다. 더 강력한 것이 필요하므로 웹 개발을 위해 컴퓨터를 설정해 봅시다.
시작하려면 브라우저가 설치되어 있는지 확인하세요. 이 과정에서는 Google Chrome, Microsoft Edge, Safari 또는 Firefox와 같은 널리 사용되는 웹 브라우저이면 충분합니다. 링크된 웹사이트에서 브라우저를 다운로드하여 설치하실 수 있습니다.
또한 코드를 작성하고 편집하려면 코드 편집기가 필요합니다. Visual Studio Code는 초보자(및 전문가)에게 훌륭한 옵션입니다. 전 세계에서 가장 일반적으로 사용되는 코드 편집기입니다. 공식 웹사이트에서 운영 체제에 맞는 설치 프로그램을 다운로드하세요.
VSCode를 설치한 후 Live Server 확장도 설치해야 합니다. 왼쪽 사이드바의 확장 프로그램 탭으로 이동한 후 검색창에 라이브 서버를 입력하세요. 여기에서 확장 프로그램을 다운로드하고 설치할 수 있습니다.
라이브 서버는 자동 다시 로드 기능을 사용하여 로컬 개발 서버를 생성합니다. 예를 들어, 새 작업 디렉토리를 생성하고 VSCode를 사용하여 엽니다.
이 디렉토리 아래에 index.html이라는 새 파일을 만듭니다. .html 확장자는 이것이 HTML 문서임을 나타냅니다. 를 입력하세요! VSCode에서 다음과 같은 제안이 표시됩니다.
HTML 문서를 빠르게 생성하기 위한 단축키입니다. ↑ 또는 ↓ 키를 사용하여 탐색할 수 있습니다. 첫 번째 옵션을 선택하면 다음 코드가 생성됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
VSCode 창 오른쪽 하단에 Go Live 버튼이 있습니다.
이 버튼을 클릭하면 라이브 서버 확장 프로그램이 활성화됩니다. 방금 생성한 index.html 파일을 호스팅하는 로컬 개발 서버가 시작됩니다.
물론 지금은 아직 파일이 비어 있어서 아무것도 볼 수 없습니다.
사이에 내용을 추가하세요. 및 태그.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
변경 사항을 저장하면 웹페이지가 새 콘텐츠로 자동으로 새로 고쳐집니다.
일반적인 HTML 문서는 항상 다음과 같은 구조를 갖습니다.
<!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
태그는 문서 유형을 정의합니다. 웹 브라우저가 을 발견하면 HTML 표준의 최신 버전인 HTML5의 사양에 따라 페이지를 구문 분석하고 표시해야 한다는 것을 이해합니다. 이렇게 하면 최신 브라우저가 웹페이지의 콘텐츠와 레이아웃을 올바르게 해석할 수 있습니다.
파일의 다른 모든 내용은 여는 태그()와 닫는 태그()로 정의되는 요소입니다.
lang은 속성이라고 하며 "en"이라는 값을 갖습니다. 이는 영어가 이 웹페이지에 사용되는 기본 언어임을 브라우저와 검색 엔진에 알려줍니다.
요소에는 두 개의 하위 요소인
가 있습니다. 및 <본문>. <머리> HTML 문서에 대한 메타데이터 및 기타 정보가 포함되어 있습니다. 이 정보는 브라우저에 표시되지 않지만 SEO(검색 엔진 최적화) 목적으로 검색 엔진에서 자주 사용됩니다. 는 사용자에게 표시되는 웹페이지의 주요 내용을 담고 있기 때문에 이번 강좌에서 중점적으로 다룰 HTML 파일의 일부이기도 합니다. .이전 예를 자세히 살펴보고 HTML 문서가 중첩 구조의 다양한 요소로 구성되어 있음을 확인하세요. HTML에서는 대부분의 요소에 여는 태그와 닫는 태그가 모두 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
이 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
요소는 다른 요소를 둘러싸 중첩 구조를 형성할 수도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
여는 태그 내에서 클래스, ID 등과 같은 요소에 대한 추가 정보를 지정하는 데 사용되는 속성을 정의할 수 있습니다.
<tag>. . .</tag>
속성은 일반적으로 키/값 쌍으로 구성되며 값은 항상 일치하는 따옴표(큰따옴표 또는 작은따옴표)로 묶어야 합니다.
이러한 일반 형식에는 몇 가지 예외가 있습니다. 예를 들어
줄바꿈을 만드는 요소에는 닫는 태그가 필요하지 않습니다. 다중과 같은 일부 속성에는 값이 필요하지 않습니다. 이러한 예외가 발생하면 이 과정의 뒷부분에서 이에 대해 논의하겠습니다.
그러나 요소에 닫는 태그가 필요한 경우 이를 생략해서는 안 된다는 점을 기억해야 합니다. 대부분의 경우 웹페이지는 여전히 올바르게 렌더링될 수 있지만 HTML 문서의 구조가 더욱 복잡해짐에 따라 예기치 않은 오류가 발생할 수 있습니다. 관심이 있으시면 HTML 및 CSS 작성에 대한 모범 사례 지침을 살펴보십시오.
위 내용은 HTML과 CSS의 기초의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
