프론트엔드 개발 배우기 시작하기

가장 좋은 인풋이 아웃풋이라는 말이 있으니, 제가 배운 내용을 말하면서 들어보세요.

프런트 엔드를 시작하는 방법을 배울 때 HTML+CSS+JS를 배워야 한다는 말을 어디서나 듣습니다. 구글링 후 html이 HyperText Markup Language(영어: HyperText Markup Language, 약칭: HTML)라는 것을 알게 되었습니다. 마크업 언어는 프로그래밍 언어가 아니라 텍스트를 표시하는 데 사용된다는 의미입니다. 이렇게 하면 브라우저가 텍스트가 무엇인지 파악하고 더 나은 형식으로 표시할 수 있습니다. 즉, HTML+CSS만 사용하여 웹페이지를 만들면 그에 대한 다양한 특수 효과와 형식은 생성되는 것이 아니라 사용자가 선택하는 것입니다.

일반적인 HTML 파일의 내용을 살펴보겠습니다.

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>     <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>         <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>这是网页标题<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>         <span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="style"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="style.css"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span>         <span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>         <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="js.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>         <span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>     <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span>     <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">11</span>         <span style="color: #0000ff"><</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>这是最大的标题<span style="color: #0000ff"></</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
<span style="color: #008080">12</span>         <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>这是段落<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">13</span>     <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">14</span> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

이 마크업 언어로 텍스트를 표시하는 방법은 매우 간단합니다.

태그된 콘텐츠

쌍으로 나타나며, 이전보다 뒤에 "/"가 하나 더 추가됩니다.

과 같이 쌍으로 표시되지 않는 또 다른 유형의 태그가 있습니다.

위 html 문서의 내용을 위에서 아래로 설명해 보겠습니다.

1. 브라우저에 이것이 HTML5 웹 페이지임을 알리는 데 사용되는 역사적 문제입니다. 이는 이전 버전의 html이 있고 이전 버전에서 다른 것을 정의해야 함을 의미합니다. 하지만 걱정하지 마세요. 이제부터 가 될 것입니다.

2.html은 이것이 head 태그와 body 태그를 포함하는 html 문서임을 브라우저에 알려줍니다.

3.head와 body는 웹페이지의 각종 정보와 설정을 저장하는 데 사용되고, body는 웹페이지의 내용을 저장하는 데 사용됩니다

4.head　title 웹페이지 제목은 웹페이지를 열었을 때 브라우저 웹페이지 태그에 표시되는 텍스트입니다

링크는 CSS 스타일 시트를 참조하는 데 사용됩니다. 소위 스타일 시트는 브라우저의 기본 스타일이 너무 못생겼다고 생각되면 스타일을 직접 설정할 수 있다는 의미입니다.

　 스타일 CSS 스타일 시트의 내용은 HTML 문서에도 배치할 수 있습니다.

　 스크립트는 JS 파일을 의미하며, 내용은 HTML 문서로도 작성할 수 있습니다

메타, 베이스 등과 같은 태그도 있습니다. 어쨌든 머리에 있는 것들은 웹 페이지의 콘텐츠가 아닌 웹 페이지를 설정하는 데 사용됩니다

5.본문 P단락

h1 제목과 h2 h3 h4 h5 글꼴이 점차 작아집니다

처음에는 모든 것이 어렵습니다. 드디어 첫 글을 쓰기 시작했습니다. 하하.