스마트한 개발 공부/Node.js | Java | html

[HTML] 웹서버프로그래밍 기초 #1

스마트한지노 2021. 6. 28. 12:45
728x90
반응형

1. 웹 서버란?

1.1 하드웨어, 소프트웨어 두가지로 구분할 수 있다.

  • 하드웨어
    • 웹 사이트의 컴포넌트 파일들을 저장
    • 컴포넌트 파일의 종류는 HTML, CSS, Image, Javascript가 있다
    • 컴포넌트 파일을 인터넷을 통해 클라이언트에게 전달한다.
  • 소프트웨어
    • 사용자가 어떻게 호스트 파일에 전달하는지 관리
    • HTTP 프로토콜을 사용하여 클라이언트의 요청을 처리 및 응답

브라우저는 HTTP를 통해 파일을 요청하는데, 요청이 올바른 웹 서버(하드웨어)에 도달했을 때, HTTP서버(소프트웨어)는 요청된 문서를 HTTP를 이용하여 보낸다.

1.2 정적 / 동적 웹 페이지

  • 정적 웹 페이지는 웹 서버에 미리 저장된 파일이 그래도 전달되고 유저는 저장된 데이터로 구성된 고정된 페이지를 보게 된다 
    • 빠르고 비용이 적게 들지만 제공하는 서비스가 한정적임
  • 동적 웹 페이지는 웹 서버에 있는 데이터들을 스크립트에 의해 가공 처리 된 후 생성되어 전달되는 웹 페이지로 유저는 상황, 시간 , 요청 등에 따라 달라지는 웹페이지를 보게 된다.
    • 제공하는 서비스가 다양하고 정보 관리가 쉽지만 정적 웹 페이지에 비해 상대적으로 느리고 추가 비용이 발생함.

2. 웹 개발 언어 HTML (HyperText Markup Language)

2.1 HTML이란

HTML은 웹페이지를 기술하기 위한 마크업 언어이다. 웹페이지의 내용과 구조를 담당하는 언어이다.

* 마크업 언어 : 특별한 기호나 표기를 사용하여 글의 서식과 스타일을 정해주는 언어 (프로그래밍 언어가 아니라는 의견과 맞다는 의견이 공존하는....)

몇 가지 속성 

  • HTML 문서는 반드시 <!DOCTYPE html>로 문서 형식을 지정
  • <html> ... </html> 사이에 코드를 기술
  • <head> ... </head> 부분에는 참조, 설정, title 등이 위치하며 웹 브라우져에는 표시되지 않는다.
  • <body> ... </body> 부분이 웹 브라우저에 표시된다.
    <!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
</body>
</html>​

2.2 HTML 문법

2.2.1 요소

HTML 요소는 시작태그와 종료태그 그리고 그 사이에 내용으로 구성된다.

<시작태그>내용 </종료태그>

2.2.2 속성

속성이란 요소의 성질, 특징을 정의하는 명세. 요소에 추가적인 정보를 제공함. 속성은 시작태그에 위치해야 하며 속성명과 값으로 구성된다.

<속성명 = "속성값">

2.2.3 주석

주석은 코드를 설명하기 위해 사용되며 브라우저에는 표시되지 않는다!

<!-- 주석으로 적을 내용 -->

2.2.4 Tag

  • <!DOCTYPE html> : 문서 형식 정의 태그. 문서의 최상위에 위치해야 하며 출력할 웹 페이지의 형식을 브라우저에 전달함.
  • <html> : 전체 HTML 문서를 감싸는 태그로 하나만 있어야 하고 HTML 해당 태그 바깥에는 DOCTYPE을 제외한 다른 태그가 존재하면 안된다.
  • <head> : 정보를 나타내는 부분이며 외부 소스를 참조해야 할 때 사용함. 하나만 있어야하고 <html> 바로 아래에 위치한다.
    1. title tag : 문서의 제목을 정의. 브라우저의 탭에 표시된다. ex) Tistory에서 글을 쓸 때 탭에 표시되는 "글쓰기"
    2. style tag : html 문서에서의 style을 정의. 배경색이나 글씨색 등
    3. link tag : 외부 리소스와의 정보를 정의함.
    4. script tag : 데이터나 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 javascript 코드랑 함께 사용
    5. meta tag : 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용된다. 특수 태그로서 웹 브라우저에는 어떠한 영향을 미치지 않지만 브라우저의 저자, 키워드, 내용 등과 같은 문서 자체의 특서을 표시한다.
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                background-color:white; //배경화면의 색 
                color: black; //body의 폰트색
            }
        </style>
        <link rel = "stylesheet" href = "style.css">
        <script>
            document.write(1+1); //실행가능한 코드 , 보통 javascript 코드
        </script>
        <meta name ="author" content ="스마트한지노"> 웹페이지의 저자를 명시
    </head>
    <body>
        <p>HTML head tag 연습</p>
    </body>
</html>
  • <body> : 브라우저에 보여지는 부분이고 하나만 있어야함. <head> 다음에 위치한다.
    1. Heading tag : 제목을 표시할 때 사용하는 태그로 h1부터 h6까지 존재한다. h1이 가장큼.
    2. Text tag : 굵기, Italic, 글씨 크기, 하이라이트 효과 등을 표시
    3. p tag : 단락을 지정하는 태그 
      <!DOCTYPE html>
<html>
    <body>
        <h1>heading</h1> <!--Heading tag, h1이 가장 큼 -->
        <h2>heading</h2>
        <h3>heading</h3>
        <h4>heading</h4>

        <b>굵은 글씨</b> 
        <p style = "font-weight:bold"> 스타일 굵은 글씨</p> <!--p를 사용한 bold체-->
        <strong>스트롱 글씨</strong> 
        <br>
        <i>i태그</i>
        <p style = "font-style : italic">style italic</p> <!--p를 사용한 italic체-->
        <em>em태그</em>
        <br>
        <small>Small</small> <!--작은 글씨-->
        <p><mark>하이라이트</mark>효과</p> <!--"하이라이트" 글씨에만 효과적용-->
    </body>
</html>​
    4. br tag : 강제로 줄 바꿈, 종료 태그 사용하지 않아도 됨
    5. hr tag : 수평줄 삽입. 종료 태그 사용하지 않아도 됨
    6. blockquote tag : 들여쓰기 형식으로 표현되는 블록 
      <!DOCTYPE html>
<html>
    <body>
        <p>HTML이란?</p>
        <br>
        <p>body tag의 종류</p>
        <hr>
        <blockquote>줄바꿈, 수평줄, 들여쓰기 인용문</blockquote>
</html>​
728x90
반응형

'스마트한 개발 공부 > Node.js | Java | html' 카테고리의 다른 글

[Node.js] Node.js에서 mysql을 이용하여 웹서비스 만들기 #1  (0) 2021.07.05
[Node.js] Node.js 로 간단한 웹서비스 만들기 #2  (1) 2021.07.02
[Node.js] Node.js 로 간단한 웹서비스 만들기 #1  (0) 2021.07.02
[HTML] 웹서버프로그래밍 기초 #3  (0) 2021.06.30
[HTML] 웹서버프로그래밍 기초 #2  (0) 2021.06.29

'스마트한 개발 공부/Node.js | Java | html'의 다른글

  • 현재글[HTML] 웹서버프로그래밍 기초 #1

관련글

댓글

티스토리툴바