Web

개발냥이·2025년 1월 31일

데브코스

목록 보기
5/75

Web

world wide web의 줄임말로 인터넷에 연결된 컴퓨터를 통해 정보를 공유할 수 공간

  • Web의 구조

    • 클라이언트(고객)서버(직원)로 구성
    • 클라이언트 : 서비스 요청
    • 서버 : 서비스 제공

  • 프로토콜

    • 클라이언트와 서버 간의 약속
    • 클라이언트와 서버 간 대화(통신)하는 방법
    • 웹 프로토콜 HTTP 사용

HTML / CSS / JS

  • HTML : 웹 페이지 구성 요소들의 구조 (뼈대)

    • <>태그를 사용 (웹 페이지의 구성 요소)
    • 기본 구조
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>	
  • 자주 쓰이는 태그 모음
    • a : 하이퍼 링크를 걸어줌 (다른 페이지를 열거나 이동할 때 사용)
    • h(숫자) : 제목을 나타냄 (숫자가 클수록 큰 제목)
    • form : 사용자 입력을 받을 수 있는 인터페이스
  • 위의 태그들을 사용해서 로그인 화면 만들어보기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>login page</title>
  </head>
  <body>
    <h1>🔒Login</h1>
    <form>
      ID : <input type="text" required />
      <br />
      PW : <input type="password" required />
      <br />
      <button>🔓Login</button>
    </form>
  </body>
</html>

  • CSS : 웹 페이지 구성 요소들 꾸미기 (스타일)

  • JS : 웹 페이지 구성 요소들에게 생명력 (동작)

profile
웹 개발자가 되고픈

0개의 댓글