완전한 인터넷 개발 초보자 안내서
만약 네가 프로그래밍 초보라면, 너는 아마도 댓글을 보고 싶을 것이다.
브라우저의 작동 방식
만약 당신이 이 글을 읽고 있다면, 당신은 이전에 웹 브라우저를 사용한 적이 있습니다.Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari 등의 브라우저를 통해 인터넷에 액세스할 수 있습니다.
먼저 사용자가 방문하고 싶은 URL을 선택하십시오. 예를 들어 URL 표시줄에 '을 입력한 다음 enter 키를 누르거나 다른 온라인 위치의 링크를 클릭할 수 있습니다.서버에 요청을 보냅니다.
서버는 이러한 요청을 처리하고 브라우저로 정보를 되돌릴 수 있는 컴퓨터입니다.이 데이터를 응답이라고 부른다.일반적으로 이 응답에는 브라우저가 사용자에게 표시할 수 있는 HTML 페이지가 포함됩니다.
이 과정을 요청-응답 주기라고 부른다.
트위터
우리 하나의 예로 좀 더 깊이 들어가자.먼저 URL 표시줄에 ""를 입력하여 트위터에 요청합니다.그리고 트위터 서버는 요청자에게 어떤 정보를 되돌려야 할지 결정한다.
URL: "홈 페이지로 돌아가기"에 대해 다시 한 번 토론합시다.만약 사용자가 ""를 내비게이션한다면, 그들은 나의 개인 자료와 트윗을 보기를 희망할 것이다.서버는 사용자의 요청에 따라 적당한 정보를 얻는 것을 책임진다.트윗과 사용자 등 사이트의 데이터는 데이터베이스에 저장된다.서버는 이 데이터베이스에 페이지의 적당한 데이터를 조회하고 다른 논리를 실행하여 이 데이터를 처리한다.
마지막으로 서버는 응답을 사용합니다. 응답은 정확한 데이터를 삽입하는 HTML 페이지입니다.
프런트엔드 및 백엔드 개발
웹 개발 중인 기술에 대해 이야기해 봅시다.우리는 보통 개발을 전단과 후단으로 나눈다.전방 개발자는 사이트의 사용자 인터페이스 방면의 업무를 책임지는데 페이지의 외관, 내용의 표시와 사용자와 사이트의 상호작용 방식을 포함한다.백엔드 개발자들은 서버에 어떤 데이터를 사용자에게 보낼지 결정하기 위해 논리를 작성한다.
프런트엔드 개발자는 일반적으로 HTML, CSS, 자바스크립트를 사용합니다. 본 논문에서 이 내용을 상세하게 논의할 것입니다.백엔드 개발자는 파이썬, PHP, 자바, C# 등 선택할 수 있는 언어가 많다.
우선, 우리는 전방 사이트를 하나 만들자.
프런트엔드 기술
HTML, CSS, JavaScript 등 세 가지 주요 언어로 웹 사이트에 접속할 수 있습니다.
HTML은 웹 페이지의 내용인 텍스트, 이미지, 비디오, 제목 등을 HTML로 제어합니다.
CSS는 사이트 스타일을 디자인하는 데 사용되기 때문에 색깔, 글씨체와 요소의 포지셔닝이 모두 이렇다.CSS를 사용하여 HTML로 만든 컨텐트의 스타일을 설정할 수 있습니다.
마지막으로 JavaScript는 웹 페이지를 상호 작용하도록 만듭니다.예를 들어 팝업 창과 변경된 데이터입니다.또한 JavaScript를 사용하여 HTML을 작성하거나 업데이트할 수 있기 때문에 현재 일부 사이트는 완전히 JavaScript를 사용합니다!
이러한 프런트엔드 언어의 기초 지식을 배우고 HTML과 CSS로'나에 대해'사이트를 구축합시다.
웹 사이트를 만들래요.
우리가 해야 할 첫 번째 일은 코드를 작성할 수 있도록 텍스트 편집기를 다운로드하는 것이다.많은 옵션을 사용할 수 있지만 내가 가장 좋아하는 것은 Visual Studio Code이다.계속 컴퓨터에 다운로드해.
다운로드한 후 프로그램을 엽니다.또한 컴퓨터에 폴더를 만듭니다.Mac 컴퓨터에서
finder 프로그램을 열고 file > new folder 를 누르십시오.Windows 컴퓨터에서는 File Explorer 어플리케이션을 사용하여 비슷한 작업을 수행할 수 있습니다.폴더about-me나 당신이 부르고 싶은 이름으로 전화하세요!이제 VS 코드로 이동합니다.
Open folder...에서 Start 링크를 클릭하십시오.그런 다음 방금 만든 폴더를 선택합니다.
현재, 우리는 두 개의 파일
index.html 과 style.css 을 만들 것이다.VS 코드에서는 왼쪽 열에 두 장의 종이처럼 보이는 아이콘을 클릭하면 이를 실현할 수 있다.
그런 다음 폴더 이름 옆에 있는
new file 단추를 클릭합니다.왼쪽의 "자원 관리자"부분에 마우스를 놓고 "종이 두 장"단추를 눌렀을 때 이 부분을 열어야 할 수도 있습니다.그런 다음 파일 이름을 입력하고 enter 키를 누릅니다.
당신
finder이나 file explorer에서 파일을 만들 수 있습니다. 더 편하시다면!HTML
이러한 컨텐트 유형을 설명하는 태그를 사용하여 HTML을 작성합니다.예를 들면 다음과 같습니다.
<h1>Hello World</h1>
<h1>는 오픈 라벨로 우리의 내용인 Hello World가 일급 제목임을 나타낸다.</h1>는 끝 제목의 끝 표시입니다.계속해서 우리 사이트에 코드를 추가합시다.
VS 코드에서 생성한
index.html 파일을 클릭하여 엽니다.파일에 다음 코드를 추가합니다.
<html></html>이러한 태그는 이러한 태그 사이의 모든 컨텐트가 HTML임을 나타냅니다. 이것은 우리에게 명백할 수 있지만 브라우저에 이 점을 알려주는 것도 좋은 방법입니다.계속해서
<head> 탭에 <body> 및 <html> 탭을 추가하겠습니다.<html>
<head></head>
<body></body>
</html>
body 레이블은 모든 페이지 내용을 포함합니다. 이러한 내용은 사용자에게 표시됩니다.head 레이블에는 페이지에 대한 구성 정보가 포함됩니다.head 라벨에 title 라벨을 추가하고 body 라벨에 h1 라벨을 추가합니다.<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
cmd + s 또는 ctrl + s를 사용하거나 컴퓨터 메뉴 모음에서 file > save를 클릭하여 이 작업을 수행할 수 있습니다.지금 당신의 컴퓨터에서 이 사이트를 열어 봅시다.finder에서 파일을 오른쪽 단추로 클릭하고
open with > Chrome 또는 선택한 브라우저를 누르십시오.Mac 컴퓨터에서도 파일을 두 번 클릭할 수 있습니다.브라우저에서 웹 페이지를 열어야 합니다:
Hello World 라벨에서 왔고, 라벨의 텍스트는 h1 라벨에서 왔다.더 많은 정보를 추가합시다!<html>
<head>
<title>About Blair</title>
</head>
<body>
<h1>About Blair</h1>
<p>
Blair is a very sweet mini double doodle.
She likes chasing balls and eating peanut butter.
She also likes napping on her mama's lap while she works.
</p>
<img src="https://pbs.twimg.com/media/EiAQnwXX0AESbgZ.jpg">
</body>
</html>
우리 이 두 개의 새로운 라벨을 토론합시다.
title 태그는 단락에 사용됩니다.p 라벨이 좀 달라요.우선, 이것은 자동으로 탭을 닫는 것입니다. 이것은 우리가 탭을 닫을 필요가 없다는 것을 의미합니다.그것은 또 하나 있다img.속성은 우리가 태그에 추가할 수 있는 추가 정보입니다.attribute 속성은 이미지의 URL을 저장합니다.너는 인터넷에서 어떤 그림을 고를 수 있다.src 표시img에 두 번째 속성을 추가합니다.altAlt-text는 사용자가 화면 판독기로 읽는 내용으로, Alt-text 등의 도구를 사용하여 HTMLhttps://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility을 만드는 것이 중요하다.이것은 우리가 HTML로 할 수 있는 일의 작은 예일 뿐이다. here 는 당신이 탐색할 수 있는 더 많은 자원의 목록이다.
CSS
우리의 웹 페이지는 정상적으로 작동할 수 있지만, 그다지 예쁘지는 않다. 그것은 단지 흰색 배경의 검은색 텍스트일 뿐이다.CSS를 추가해서 페이지를 디자인합시다!
먼저 스타일시트를 HTML 페이지에 링크해야 합니다.Dell은
<img src="https://pbs.twimg.com/media/EiAQnwXX0AESbgZ.jpg" alt="Blair lying on her back on her bed"> 탭에서 다음과 같은 이점을 제공합니다.<head>
<title>About Blair</title>
<link rel="stylesheet" href="style.css">
</head>
head을 엽니다.CSS를 사용하여 HTML에서 요소를 선택하고 스타일을 추가합니다.이제 이미지를 조금 줄입니다.
img {
height: 200px;
}
style.css는 img 라벨에 스타일을 추가하고 있음을 나타낸다.<img>의 모든 내용은 {}s에 적용됩니다. 그리고 img는 하나의 규칙입니다.이런 상황에서, 우리는 우리의 이미지가 200픽셀이 높을 것이라고 말한다.
페이지에 배경색을 추가하려면 다음과 같이 하십시오.
body {
background-color: lightpink;
}
만약 당신이 CSS를 더욱 깊이 이해하고 싶다면, 나는 또한 완전한 CSS 안내서를 썼다.
배치하다
현재 우리는 웹 사이트가 하나 생겼지만, 우리는 컴퓨터에서만 그것을 방문할 수 있다.네트워크상의 다른 사용자가 사용할 수 있도록 서버를 사용해야 합니다.우리의 서버를 관리하는 것은 상당히 많은 업무가 될 뿐만 아니라, 상당히 비싸게 될 것이다.우리는 AWS를 통해 클라우드 기반 서버를 사용할 것이다.이것은 당신이 당신의 파일을 올릴 수 있다는 것을 의미한다. AWS는 당신을 위해 위탁 관리할 것이며, 첫해에도 무료이다.그 후에 정가는 like this일 것이다.
우선create an AWS account.그런 다음 AWS Amplify Console로 이동합니다.
height: 200px; 버튼을 클릭하고 다음 페이지에서 Connect app(마지막 옵션)를 선택합니다.우리는 우리의 서류를 압축해야 한다.finder나 파일 자원 관리자에서
Deploy without Git provider 폴더를 오른쪽 단추로 누르고 about-me 를 누르십시오.그런 다음 생성된 zip 파일을 AWS로 드래그 앤 드롭합니다.
마지막으로
compress folder 버튼을 클릭합니다.다음 페이지에서 사이트가 구축될 때까지 몇 초를 기다려야 할 수도 있습니다.일단 이렇게 하면 URL을 볼 수 있고 누구에게도 보낼 수 있습니다!Here 내 거야.결론
인터넷 개발은 아주 좋은 직업의 길이다. 너는 많은 것을 배울 수 있다.이 강좌가 너로 하여금 더욱 많은 학습에 흥미를 가지게 할 수 있기를 바란다.Here는 내가 가장 좋아하는 입문 자원이다.
Reference
이 문제에 관하여(완전한 인터넷 개발 초보자 안내서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aspittel/a-complete-beginner-s-guide-to-web-development-cl4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
