2주차 HTML

2021. 3. 29.

by. Sooming_

HTML (HyperText Markup Language)

: 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업 형식 컴퓨터 프로그래밍 언어

Tag

HTML에서 가장 중요한 문법

기본적으로 <tag> </tag>

<strong> : 진하게

<h1> : 제목

<h2> : 소제목

<a> : 링크 표시

<h1><a href="https://ko.wikipedia.org/wiki/%EC%9B%B9_%ED%95%B4%ED%82%B9" target="_blank" title="웹해킹">웹해킹이란?</a></h1>

<strong>웹해킹 : </strong> 웹사이트의 취약점을 공격하는 기술적 위협

속성

단순 Tag만으로 정보 불충분하므로 고안된 새로운 문법

Ex)

<a> 는 정보부족으로 아무런 실행이 되지 않음

<a href=" "> 에서 href가 속성

Tag의 중첩과 목록

<li> : 항목 구분

한 태그로 묶기 (Grouping)

<ul> : 순서 없는 리스트

<ol> : 순서 있는 리스트

<h1><a href="https://ko.wikipedia.org/wiki/%ED%95%B4%ED%82%B9" target="_blank" title="해킹">해킹이란?</a></h1>

<ul>
    <li>웹해킹</li>
    <li>포너블</li>
    <li>포렌식</li>
</ul>
<ol>
    <li>HTML</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ol>

문서의 구조

<html>

: <head>와 <body>를 감싸주는 태그

<head>

: 문서의 본문은 아니지만 꾸며주는 역할

<title>

: 웹사이트 이름 표시 (탭에 제목 표시)

<meta charset = "utf-8">

: 한글이 깨질 때 적용하면 정상적으로 출력됨

<body>

: 문서 본문을 감싸는 태그

DOCTYPE

어떤 표준을 따라 제정된 태그인지 브라우저에게 알려줌

<!DOCTYPE html>을 맨 위에 작성

<!DOCTYPE html>
<html>
    <head>
        <title>해킹</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1><a href="https://ko.wikipedia.org/wiki/%ED%95%B4%ED%82%B9" target="_blank" title="해킹">해킹이란?</a></h1>

        <ul>
            <li>웹해킹</li>
            <li>포너블</li>
            <li>포렌식</li>
        </ul>
        <ol>
            <li>HTML</li>
            <li>JavaScript</li>
            <li>PHP</li>
        </ol>
    </body>
</html>

다른 주요 태그

<p> </p>: 단락을 구분하는 태그

<br> : 줄바꿈 태그 => 닫는 태그 없이 단독 사용

<img> : 이미지 삽입 태그

<img scr="파일 이름" height ="높이" alt ="파일이 깨졌을 때 이름" title ="사진 이름"> 과 같이 사용됨

입력 양식 form

form : 사용자가 입력한 정보를 서버로 전송할 때 사용하는 것

<form action = " "> : " "안의 주소로 form을 전송

<input type = " "> : input 박스를 어떤 형식으로 할 지 설정

input : 입력 박스 생성

type : input 형식

text : 일반 글
password : 암호화하여 나타냄
sumbit : 제출 버튼 생성

name = " " : 이것이 무슨 용도로 쓰이는 지 표기

Ex) <p>아이디 : <input type="text" name="id"></p>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <form action="">
            <h3>아이디: <input type ="text" name="id"></h3>
            <h3>비밀번호: <input type ="password" name="password"></h3>
            <h3>주소: <input type ="text" name="adress"></h3>
            <input type="submit">
        </form>
    </body>
</html>

텍스트 입력

<input type="text">

value = " "

: default값으로 value 설정

input 박스에 기본으로 나타남

<textarea> </textarea>

: 입력 박스 크기 조절

- cols = " " : 열

- rows = " " : 행

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form action="">
        <p>text : <input type="text" name="id" value="default value"></p>
        <p>password : <input type="password" name="pwd" value="default value"></p>
        <p>textarea :
            <textarea cols="50" rows="2">default value</textarea>
        </p>
    </form>
</body>
</html>

선택

<select>

<option> </option>

</select>

: 다중 항목 중 하나 선택

value = " " : 컴퓨터가 읽기 쉬운 정보 제공

<select ~ multiple> : 다중 선택

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/color.php">
            <h1>색상</h1>
            <select name="color">
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>
            <h1>색상2 (다중선택)</h1>
            <select name="color2" multiple>
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

Radio & Checkbox

<input type = "radio">

: 라디오 버튼 생성

<input type = "checkbox">

: 체크박스 생성

checked : 기본적으로 체크되는 항목

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/order.php">
            <p>
                <h1>색상(단일선택)</h1>
                붉은색 : <input type="radio" name="color" value="red">
                검은색 : <input type="radio" name="color" value="black" checked>
                파란색 : <input type="radio" name="color" value="blue">
            </p>
            <p>
                <h1>사이즈(다중선택)</h1>
                95 : <input type="checkbox" name="size" value="95">
                100 : <input type="checkbox" name="size" value="100" checked>
                105 : <input type="checkbox" name="size" value="105" checked>
            </p>
            <input type="submit">
        </form>
    </body>
</html>

버튼

<input type = "submit">

: 기본적으로 "제출" 버튼 생성

<input type = "submit" value=" ">

: "제출"이 value값으로 바뀜

<input type = "button">

: 아무것도 없는 버튼 생성됨

<input type = "button" value=" " onclick = "alert(' ')">

: value 이름의 버튼을 누르면 ' ' 내용의 경고창 발생

<input type = "reset">

: input에 입력된 정보 초기화

<html>
<head><meta charset="utf-8"></head>
<body>
    <form action="http://localhost/form.php">
        <input type="text">
        <input type="submit" value="전송">
        <input type="button" value="버튼" onclick="alert('hello world')">
        <input type="reset">
    </form>
</body>
</html>

데이터 전송 - hidden

<input type = "hidden" value = " ">

: value 값을 가진 hidden 정보가 따로 입력하지 않아도 제출됨

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/hidden.php">
            <input type="text" name="id">
            <input type="hidden" name="hide" value="egoing">
            <input type="submit">
        </form>
    </body>
</html>

컨트롤의 제목 - label

<label> </label>

: 특별한 기능은 없지만 무언가의 이름표라는 것을 나타낼 수 있음

Method

기본적으로 method = "get" 형식 (form이 url에 노출됨)

method = "post"

: form이 url에 노출되지 않음

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/method.php" method="post">
            <input type="text" name="id">
            <input type="password" name="pwd">
            <input type="submit">
        </form>
    </body>
</html>

파일 업로드

<input type = "file">

: 파일을 선택하는 창 생성

method="post" enctype="multipart/form-data"

: input type이 file 이라면 반드시 붙혀야함

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="profile">
            <input type="submit">
        </form>
    </body>
</html>

워게임

1번) HTML - Source Code

풀이 : paka99.tistory.com/3

Root me : HTML - Source code

로그인을 해야한다! F12로 개발자 도구를 여니 비밀번호가 보인다! 입력창에 비밀번호를 입력해주면 성공! 문제 : https://www.root-me.org/en/Challenges/Web-Server/HTML-source-code

paka99.tistory.com

2번) HTML - disabled buttons

풀이 : paka99.tistory.com/4

Root me : HTML - disabled buttons

Input 텍스트와 버튼이 비활성화 되어있다! F12를 눌러 개발자 도구창을 열어 무슨 일인지 확인한다 의심스러운 disabled를 지워준다 Input 텍스트와 버튼이 활성화되었다! value 값이 없으므로? 아무