괴짜를 위한 텍스트 편집기인 HTML.

5110 단어 webdevcodenewbiebeginnershtml
웹 개발, 어디서부터 시작해야 할까요? 바로 여기에 HTML이 있습니다!

하지만 먼저: KISS



먼저 이 자습서 시리즈의 목표를 설명하고 싶습니다. 목표는 사람들이 웹 개발에 흥미를 갖게 하는 것이며 가능한 한 효율적으로 하고 싶습니다(대부분의 교사처럼 재미있게 만들고 싶습니다). 그래서 KISS이라는 프로그래밍 원리를 최대한 적용하려고 합니다. 기본 사항은 시리즈를 따라가기에 충분해야 하지만 주제에 대한 자세한 내용을 알고 싶다면 리소스에 대한 링크를 제공할 것입니다. 그러니 키스하고 이미 시작합시다!

HTML이란 무엇입니까?



HTML은 웹사이트/앱의 기초입니다. 브라우저가 화면의 콘텐츠로 번역하는 언어입니다. 저장된 문서를 보여주는 텍스트 편집기와 비교할 수 있습니다. 문서에는 텍스트가 포함되어 있으며 편집자가 이를 보여줍니다. 웹 페이지에서 문서의 내용은 HTML이며 화면에서 읽는 내용으로 문서를 번역하는 것은 브라우저입니다.



HTML은 어떻게 생겼습니까?



(거의) 최소 웹페이지의 소스는 다음과 같습니다.

<!DOCTYPE html> 
<html>
  <head>
    <title>My webpage!</title>
  </head>
  <body>
    <h1>I'm writing html!</h1>
    <p>
      No idea what this all means
    </p>
  </body>
</html>


태그 및 요소



따라서 다음 예를 보고 몇 가지 용어를 설정해 보겠습니다.

<!DOCTYPE html><!-- tell the browser it is going to read html -->
<!-- This is a way to make comments in HTML -->
<html><!-- html opening TAG -->
  <head><!-- head opening tag -->
    <title>My webpage!</title>
  </head><!-- head closing tag --> 
  <body><!-- body opening tag -->
    <img src="https://fonts.gstatic.com/s/i/materialicons/done/v14/24px.svg" />
    <!-- a self closing tag with an attribute -->
  </body><!-- body closing tag -->
</html><!-- html closing tag -->


따라서 HTML 문서는 html 요소로 존재하며 이러한 요소는 시작 태그(< elementName >)와 닫기 태그()를 갖거나 자체 닫기(< elementName/>)입니다.

요소의 여는 태그와 닫는 태그 사이의 모든 요소는 요소의 자식으로 간주되며 그에 따라 들여쓰기됩니다(가독성을 위해).

속성



위의 예에서 img 태그에 추가 항목(src="...")이 있음을 알 수 있습니다. 이것을 속성이라고 합니다. 속성은 요소에 대해 알려주며 요소의 여는 태그에서 찾을 수 있습니다.

기본 HTML 문서



HTML 문서를 만들어서 알아봅시다.

Create html file
Create a file with the html extension (filename.html)
If it doesn't work later on check if it is nog (filename.html.txt)



Fill it with html
Fill this file using a text editor (notepad e.g.) with one of the above examples



Open it
Open this file using a browser (Edge, Firefox, Chrome)



그리고 브라우저에서 제공하는 첫 번째 html 파일이 있습니다! 잘 했어.

HTML로 플레이하는 쉬운 방법



이것이 작동하지 않더라도 걱정하지 마십시오. 이 시리즈의 다음 몇 개의 게시물에서는 예제와 코드를 가지고 놀기 위해 codepen을 사용할 것입니다. HTML 기본 사항의 경우 다음 펜을 사용할 수 있습니다.

Basic HTML Pen

펜으로 HTML 문서의 본문 요소에 들어갈 HTML을 작성하기만 하면 미리보기가 자동으로 업데이트됩니다.

실험



저는 실험이 무언가를 실제로 배우고 고수하는 가장 빠른 방법이라는 것을 알았으니 실험해 보세요! 문서의 본문 요소 내부에 있는 모든 것이 브라우저에 표시됩니다.

Basic HTML Pen

A good resource for html elements:
Mozilla HTML elements reference
Mozilla HTML element img (shows attributes)
What is that first line in my document?



어떤 종류의 이야기, 아마도 한두 가지 목록, 제목 또는 원하는 다른 것을 만들어보십시오.

이게 다야?



이것이 HTML의 기본입니다. 물론 html보다 웹 앱을 만드는 데 더 많은 것이 있지만 이것이 기초입니다. 시리즈의 다음 게시물은 CSS를 사용하여 HTML 문서 스타일 지정, 색상 추가, 원하는 위치 배치 등에 관한 것입니다. 문제가 발생하면 언제든지 의견을 남겨 주시면 곧 연락 드리겠습니다. 가능한 한!
HDU 4359 Easy Tree DP? 띠권 두 갈래 나무의 구조 방법 dp
간단한 CUI 힌트를 만들어 보도록 하겠습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage