웹사이트는 어떻게 작동합니까? 초간단 설명

3983 단어 javascripthtmlcsstutorial
인터넷 및 웹 주소:
  • 월드 와이드 웹에서 웹 사이트에 액세스하기 위해 IP 주소를 사용합니다
    • .
  • 각 웹사이트에는 연결된 IP 주소가 있습니다(집 주소와 유사함)
  • 웹 브라우저에 IP 주소(실제로 www.google.com와 같은 웹 주소를 입력하면 브라우저가 IP 주소로 변환)를 입력하면 웹 브라우저가 웹 서버(사용자 요청을 처리하고 응답) 그런 다음 HTML 파일, CSS 파일 및 javascript 파일의 세 파일을 다운로드합니다.
  • 그런 다음 웹 브라우저는 이 세 파일을 가져와 웹 페이지를 표시합니다
    • .

    HTML 파일이란 무엇입니까?
  • HTML 파일은 "돌 벽돌"과 유사합니다. 우리는 집을 짓는 데 사용합니다.
  • 즉, 유일한 목적은 웹 페이지의 구조를 정의하는 것입니다
    • .

  • 예를 들어:

    <HTML>
    <HEAD>
        <TITLE> My Personal Website </TITLE>
    <HEAD>
    <BODY>
            Hello World, My name is Chandan.
    <BODY>
</HTML>


    • 산출:


    설명:
  • 위의 HTML 스니펫에서 HTML 태그가 웹 페이지를 식별하는 구조를 제공하는 것을 볼 수 있습니다. 이 경우
  • <TITLE> My Personal Website </TITLE>이 행은 당사 웹 사이트의 제목이 "내 개인 웹 사이트"
    • 라는 것을 확인합니다.
  • <BODY> Hello World, My name is Chandan </BODY>이 행은 당사 웹 사이트의 콘텐츠 또는 본문에 "Hello World, My name is Chandan"이라는 행을 표시하도록 합니다
    • .

    .CSS 파일이란 무엇입니까?
  • CSS는 HTML 요소를 표시하는 방법을 웹 브라우저에 알려줍니다.
  • 즉, 헤어 스타일리스트가 우리 머리에 모양, 길이, 색상을 부여하는 것과 유사합니다
    • .

  • 예를 들어:

    body{
    color: lightgreen;
    background-color: grey;
    text-align: center
}

    산출:



    위의 예는 HTML이 웹 브라우저에 "WHAT"를 표시하도록 지시하고 CSS는 웹 브라우저에 "HOW"를 표시하도록 지시함을 보여줍니다.


    • JavaScript 파일이란 무엇입니까?
  • JS 파일은 웹 페이지의 기능 또는 "액션"을 제공합니다.
  • JavaScript가 없으면 HTML 및 CSS를 사용하여 일부 콘텐츠만 아름답게 표시할 수 있습니다.
  • 그러나 일부 기능을 제공하려면 JavaScript를 사용해야 합니다.

  • 예를 들어:

    let entireDocumentVariable = document.querySelector("html");

entireDocumentVariable.addEventListener("click", () => alert("Hello, Welcome to my website"));

    결과:



    • 설명:
  • javascript를 사용하여 사용자가 웹 페이지 내부의 영역을 클릭하면 "안녕하세요, 내 웹사이트에 오신 것을 환영합니다."라는 경고 메시지가 표시되는 기능을 작성했습니다.

    • 소스 코드: https://codepen.io/chandanbsd/pen/WNMdBZm
    백엔드 개발자를 위한 내 설정 Mac
    【Docker】dockerfile을 이용하여 EC2에 Apache 컨테이너를 구축

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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