HTML과 CSS의 기초

HTML과 CSS는 웹페이지를 구성하는 가장 기본적인 구성 요소이자 웹 개발자가 되기 위한 첫 번째 단계이기도 합니다. HTML은 웹페이지의 레이아웃과 콘텐츠를 제공하고 CSS는 웹페이지의 스타일과 모양을 정의합니다. 이 튜토리얼에서는 HTML과 CSS의 기본 사항을 다루며, 마지막에는 모든 크기의 기기에서 원활하게 작동하는 반응형 웹페이지를 디자인할 수 있게 될 것입니다.

HTML이란 무엇입니까?

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 문서를 빠르게 생성하기 위한 단축키입니다. ↑ 또는 ↓ 키를 사용하여 탐색할 수 있습니다. 첫 번째 옵션을 선택하면 다음 코드가 생성됩니다.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  

VSCode 창 오른쪽 하단에 Go Live 버튼이 있습니다.

이 버튼을 클릭하면 라이브 서버 확장 프로그램이 활성화됩니다. 방금 생성한 index.html 파일을 호스팅하는 로컬 개발 서버가 시작됩니다.

물론 지금은 아직 파일이 비어 있어서 아무것도 볼 수 없습니다.

사이에 내용을 추가하세요. 및 태그.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  
    Hello, world!
  

변경 사항을 저장하면 웹페이지가 새 콘텐츠로 자동으로 새로 고쳐집니다.

HTML 문서의 구조

일반적인 HTML 문서는 항상 다음과 같은 구조를 갖습니다.

  
    . . .
  
  
    . . .
  

태그는 문서 유형을 정의합니다. 웹 브라우저가 을 발견하면 HTML 표준의 최신 버전인 HTML5의 사양에 따라 페이지를 구문 분석하고 표시해야 한다는 것을 이해합니다. 이렇게 하면 최신 브라우저가 웹페이지의 콘텐츠와 레이아웃을 올바르게 해석할 수 있습니다.

파일의 다른 모든 내용은 여는 태그()와 닫는 태그()로 정의되는 요소입니다.

lang은 속성이라고 하며 "en"이라는 값을 갖습니다. 이는 영어가 이 웹페이지에 사용되는 기본 언어임을 브라우저와 검색 엔진에 알려줍니다.

요소에는 두 개의 하위 요소인

가 있습니다. 및 . HTML 문서에 대한 메타데이터 및 기타 정보가 포함되어 있습니다. 이 정보는 브라우저에 표시되지 않지만 SEO(검색 엔진 최적화) 목적으로 검색 엔진에서 자주 사용됩니다.

는 사용자에게 표시되는 웹페이지의 주요 내용을 담고 있기 때문에 이번 강좌에서 중점적으로 다룰 HTML 파일의 일부이기도 합니다. .

요소 및 속성

이전 예를 자세히 살펴보고 HTML 문서가 중첩 구조의 다양한 요소로 구성되어 있음을 확인하세요. HTML에서는 대부분의 요소에 여는 태그와 닫는 태그가 모두 있습니다.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  

이 경우 은 여는 태그이고 닫는 태그이며 함께 HTML 요소를 형성합니다. 요소는 여는 태그와 닫는 태그 사이에 텍스트 내용을 담을 수 있습니다.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  
    Hello, world!
  

요소는 다른 요소를 둘러싸 중첩 구조를 형성할 수도 있습니다.

  
    . . .
  
  
    . . .
  

여는 태그 내에서 클래스, ID 등과 같은 요소에 대한 추가 정보를 지정하는 데 사용되는 속성을 정의할 수 있습니다.

<tag>. . .</tag>

속성은 일반적으로 키/값 쌍으로 구성되며 값은 항상 일치하는 따옴표(큰따옴표 또는 작은따옴표)로 묶어야 합니다.

이러한 일반 형식에는 몇 가지 예외가 있습니다. 예를 들어
줄바꿈을 만드는 요소에는 닫는 태그가 필요하지 않습니다. 다중과 같은 일부 속성에는 값이 필요하지 않습니다. 이러한 예외가 발생하면 이 과정의 뒷부분에서 이에 대해 논의하겠습니다.

그러나 요소에 닫는 태그가 필요한 경우 이를 생략해서는 안 된다는 점을 기억해야 합니다. 대부분의 경우 웹페이지는 여전히 올바르게 렌더링될 수 있지만 HTML 문서의 구조가 더욱 복잡해짐에 따라 예기치 않은 오류가 발생할 수 있습니다. 관심이 있으시면 HTML 및 CSS 작성에 대한 모범 사례 지침을 살펴보십시오.

추가 자료

• 캐스케이딩 스타일 시트(CSS) 소개
• 자바스크립트 소개
• 반응형 디자인이란
• HTML과 CSS를 사용하여 대화형 양식을 작성하는 방법

위 내용은 HTML과 CSS의 기초의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!