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

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

스마트한지노 2021. 6. 29. 14:20
728x90
반응형

2021.06.28 - [스마트한 코딩 공부] - [Node.js] 웹서버프로그래밍 기초 #1

 

[Node.js] 웹서버프로그래밍 기초 #1

1. 웹 서버란? 1.1 하드웨어, 소프트웨어 두가지로 구분할 수 있다. 하드웨어 웹 사이트의 컴포넌트 파일들을 저장 컴포넌트 파일의 종류는 HTML, CSS, Image, Javascript가 있다 컴포넌트 파일을 인터넷

smartseoullife.tistory.com

저번글에서 기본 정의와 속성부터 body tag까지 정리를 했었는데 이어서 정리를 해보자!

웹개발 언어 HTML (HyperText Markup Language)

1. HTML 문법

1.1 Hyperlink

  • 하이퍼링크란 동영상, 음악, 그림, 프로그램, 파일. 글 등의 형식의 자료들을 지정할 수 있게 해주는 참조고리이다. 간단하게 말하면 누르면 웹 사이트나 프로그램 등으로 이동된다.
  • href 속성으로 받기 
    <a href = "http://www.google.com">Google</a>​
  • 디렉토리
    루트 디렉터리 파일 시스템 계층 구조 상의 최상위 디렉터리이다. Unix : /
    Windows : C:\
    홈 디렉토리 시스템의 사용자에게 각각 할당된 개별 디렉터리이다. Unix : /Users/{계정명}
    Windows : C:\Users\{계정명}
    작업 디렉토리 작업 중인 파일의 위치한 디렉터리이다. 공통 : ./
    부모 디렉토리 작업 디렉터리의 부모 디렉토리이다. 공통 : ../
  • 파일의 경로
    절대 경로 현재 소속 폴더와 상관없이 절대적인 위치를 지정 C:\users\nodejs\Desktop\hyperlink.html
    상대 경로 현재 웹페이지의 소속 폴더가 기준점 ../Desktop/hyperlink.html

1.2 list tag

  • 비순서형 리스트 
  • 순서형 리스트 
    <!DOCTYPE html>
<html>
    <head>
        <body>
            <h1>
                비순서형 리스트 <!--unorder list의 약자로 순서가 없는 목록 --->
            </h>
            <ul> <!-- -->
                <li>아메리카노</li> <!--항목을 적는 list item-->
                <li>카페라떼</li> 
                <li>카푸치노</li> 
            </ul>
            <h1>
                순서형 리스트
            </h>
            <ol type ="1"> <!--order list의 약자로 순서가 있는 목록 --->
                <li>아메리카노</li>
                <li>카페라떼</li>
                <li>카푸치노</li>
            </ol>
        </body>
    </head>
</html>
  • 순서형 리스트 type 
    1 A a l i
    숫자(기본) 대문자 알파벳 소문자 알파벳 대문자 로마숫자 소문자 로마숫자

1.3 table tag 

  • table : 표를 구성하는 태그
  • tr : 표의 행을 표시
  • th : 표의 열에서 열의 제목을 표시

td : 표의 열을 표시

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <tr>
                <th>제목1</th>
                <th>제목2</th>
            </tr>
            <tr>
                <td>본문1</td>
                <td>본문2</td>
            </tr>
        </table>
    </body>
</html>​
border 태두리 두께
rowspan 해당하는 셀의 행 갯수
colspan 해당하는 셀의 열 갯수

1.4 image tag

  • HTML img tag : 웹 페이지에 이미지를 삽입할 때 사용
  • img 속성
    src 이미지 파일 경로
    alt 이미지 파일이 없을 경우 표시되는 내용
    width 이미지의 너비
    height 이미지의 높이

1.5 form tag

  • form tag는 유저가 입력한 데이터를 입력할 수 있도록 한다
  • 입력 데이터가 전송될 URL 지정하는 action 속성과 입력 데이터 전달 방식을 지정하는 method 속성이 있다.
  • method 속성에는 get 방식과 post 방식이 있다.
    • get : 입력 데이터를 쿼리스트링 형식으로 보냄. 전송 URL 뒤에 '?'를 통해 보내질 데이터의 시작을 알리고 'key = value' 형태의 데이터를 보낸다. URL에 전송 데이터가 노출되기 때문에 보안에 취약하며, 데이터가 최대 255자라는 한계가 존재한다.
      쿼리스트링의 간단한 예시
    • post : get과는 다르게 request body 에 데이터를 담아 보내는 방식이다. URL에 전송 데이터가 노출되지 않아 보안은 뛰어나지만 get에 비해서 속도가 느리다. (보안도 결국에는 둘 다 따로 관리를 해야한다. 그리고 요즘 인터넷 속도로는 둘 사이에 차이를 느끼긴 어렵다)
      request body의 간단한 예시

1.6 input tag

  • form 태그 중에서 사용자로부터 데이터를 입력 받기 위해 사용되는 태그. form 태그 안에 있어야만 입력된 데이터를 전송할 수 있으며 'key = name' 형태로 전송된다. 
    <!DOCTYPE html>
<html>
    <body>
        <h3>button</h3> <!-- 버튼 생성 -->
        <input type ="button" value = "click" onclick ="alert('butoon click')">
        <br>
        <h3>checkbox</h3> <!-- checkbox 네모난 선택지 -->
        <input type = "checkbox" name = "coffee1" value = "coffee1" checked>아메리카노
        <input type = "checkbox" name = "coffee2" value = "coffee2" >카페라떼
        <input type = "checkbox" name = "coffee3" value = "coffee3" >카페모카
        <br>
        <h3> date</h3> <!-- 날짜 -->
        <input type = "date" name = "date">
        <br>
        <h3> email</h3> <!-- 이메일 -->
        <input type = "email" name = "email">
        <br>
        <h3> file</h3> <!-- 파일 -->
        <input type = "file" name = "upload">
        <br>
        <h3> number</h3> <!-- 2부터 8까지 2씩 증가하는 숫자중에서 선택 -->
        <input type = "number" name = "num" min = "2" max = "8" step = "2" value = "2">
        <br>
        <h3> password</h3> <!-- 비밀번호 -->
        <input type = "password" name = "pwd">
        <br>
        <h3> radio</h3> <!-- 목록에서 하나 선택하는 동그란 선택지 방법 -->
        <input type = "radio" name = "gender" value = "male" checked>남자
        <input type = "radio" name = "gender" value = "male" >여자
        <br>
        <h3>submit</h3> <!-- 데이터를 입력해서 보낼 때 사용하는 제출버튼 -->
        <input type = "submit" name = "submit">
        <br>
        <h3> text</h3> <!-- 텍스트 입력 -->
        <input type = "text" name = "text">
        <br>
        <h3> time</h3> <!-- 시간 선택 -->
        <input type = "time" name = "time">
    </body>
</html>

1.7 select tag

  • 여러 개의 리스트중에서 여러 개의 아이템을 선택할 때 사용.
  • select 요소의 name을 속성의 키 값으로, option 요소의 value 를 key 값으로 하여 key = value 형태로 전송
    Select Select 생성
    Option Option 생성
    optgroup Option을 그룹화하여 보여줌 
    <!DOCTYPE html>
<html>
    <body>
        <select name = "cafe">
            <optgroup label="coffee">
                <option value ="americano" selected>아메리카노</option>
                <option value ="latee" >카파라떼</option>
                <option value ="moka" >카페모카</option>
            </optgroup>
            <optgroup label="Non-coffee">
                <option value ="greentea" selected>녹차</option>
                <option value ="choco" >핫초코</option>
                <option value ="lemonade" >레몬에이드</option>
            </optgroup>
        </select>
    </body>
</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] 웹서버프로그래밍 기초 #1  (0) 2021.06.28

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

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

관련글

댓글

티스토리툴바