Study/WebHacking

📣 2주차 웹해킹 스터디 정리

주미니마니모 2022. 3. 6. 15:21

1. HTML

html의 기본에 대해서 알아보았다.

👉 HyperText / Markup / Language

하이퍼 텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어
확장자는 .html

👉 태그

strong : 글씨를 진하게 해준다.

<strong>, </strong>

h로 시작하는 태그 : 제목으로 처리하여 굵고 큰 문자로 꾸며주고 줄바꿈을 한다. 숫자가 커질수록 글씨크기는 작아진다.

<h1></h1> , <h2></h2>

p : 단락을 만들어준다.

<p></p>

br : 줄바꿈을 해준다.

<br>

태그의 문법
- 시작 태그 : <태그명>
- 종료 태그 : </태그명> ;필요 없는 태그도 있다.

👉 링크

하이퍼텍스트. 문서와 문서가 링크로 연결되어있다.

<a></a>

👉 속성

태그명 만으로는 정보가 불충분하다. 기능을 추가해준다.
href : 링크를 걸어준다.

<a href="https://링크명">
<a href="파일명.html">

target : 새로운 탭이 열리면서 페이지가 열리게 해준다.

<a target="_blank">

title : 링크에 커서를 올렸을 때, 세부적인 내용을 알려준다.

<a title="세부설명">

예시코드

<a target="_blank" href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" title="전설적인 프로그래머">도널드 커누스</a>

👉 목록과 중첩

리스트 태그 : 각 항목들이 리스트화 되어 구분되어진다.

<li></li>

그룹핑 : 리스트와 리스트를 구분해준다. 서로 성격이 같은 리스트를 태그를 이용해 하나로 묶어준다.

<ul></ul>  //unordered list - 숫자 없음
<ol></ol>  //ordered list - 숫자 있음

태그안에 또 다른 태그 존재 가능하다. 중첩 사용이 가능하다.

<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>

👉 문서의 구조

부가적 태그 : head

 <title></title> //웹 주소의 이름을 바꿔준다.

 <meta charset="utf-8"> //글씨 깨지는 현상을 해결해준다.

본문 태그 : body
전체 태그 : html

<html>
  <head>
  </head>
  <body>
  </body>
</html>

👉 DOCTYPE

DOCumentTYPE declaration : 브라우저에게 이 태그들이 어떠한 표준을 따르고 있는 지 알려준다.

<!DOCTYPE html>

👉 이미지

<img src="파일이름.jpg" width="100" height="100" alt="산 이미지" title="산 이미지">
// alt는 사진 대체 텍스트, title은 tooltip

👉 입력양식(form)

사용자가 입력한 정보를 서버에 전송하는 기능
action 속성 : action안에 있는 url에(서버) 전송한다.

👉 텍스트 입력

<input type="text" name="id" value="default value">
// name 속성을 이용하면, 전송 되었을 때 정보에 문자가 붙어서 전송된다.

입력 칸이 나온다.

<input type="password" name="pwd" value="default value">

글자 수는 알 수 있지만 내용은 볼 수 없다.

<textarea>default value</textarea>

<input type="submit">

제출 버튼이 나온다.

👉 선택

여러가지 선택지들 중에서 선택하게 한다.

<select name="color">
  <option value="red">빨간색</option>
  <option value="blue">파란색</option>
</select>

빨간색 파란색 (옵션 버튼 예시)

👉 버튼

button은 그냥 버튼만 생성한다. reset은 위의 정보를 리셋해준다.

<form action="">
  <input type="submit" value="전송">
  <input type="button" value="버튼">
  <input type="reset"
</form>

👉 데이터 전송 - hidden

서버로 어떤 값을 전송할 때는 hidden을 이용하면 데이터 정보가 숨겨진다.

<form action="">
  <input type="text" name="id">
  <input type="hidden" name="hide" value="egoing">
  <input type="submit">
</form>

👉 체크박스와 컨트롤의 제목 - label

무언가의 이름표라는 의미. 특별한 기능X. 시각적 변화는 없다. 각각의 label들이 누구의 이름표인지 연결시켜야 한다(방법 2가지). 선택되는 영역을 넓게 해준다.

<form action="">
  <p>
     * 방법 1 이름 지정하기 for, id
    <label for="id_txt">text</label>:
    <input id="id_txt" type="text" name="id" value="default value">
  </p>
  <p>
    * 방법 2 전체를 label로 감싸기
    <label>textarea:
      <textarea id="comment" rows="2">default value</textarea>
    </label>
  </p>
     * checkbox기능 할 때 유용하다.
    <label> 
      <input type="checkbox" name="color" value="red">붉은색
    </label>
 </form>

text:

password:

textarea:

붉은색

👉 METHOD

서버로 데이터를 전송하는 방법
URL을 통해 뒤에 데이터를 보여주는 방법 : get

<form action="" method="get">

URL에 보여지지 않고 감춰서 데이터를 전송하는 방법 : post

<form action="" method="post">

👉 파일 업로드

파일 업로드를 하면 서버로 파일을 전송한다.
파일 업로드 기능을 쓴다면, method는 post, enctype은 multipart/form-dat로 해준다.

<form action="http://localhost/upload.php" method="post" 
enctype="multipart/form-data">
  * 이름 꼭 지정해주기
  <input type="file" name="profile">
  <input type="submit"> 
</form>

2021.01.04에 작성한 글

저작자표시 비영리 변경금지 (새창열림)