ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 📣 2주차 웹해킹 스터디 정리
      Study/WebHacking 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에 작성한 글
      저작자표시 비영리 변경금지

      'Study > WebHacking' 카테고리의 다른 글

      📣 3주차 웹해킹 스터디 정리  (0) 2022.03.06
      📣 1주차 웹해킹 스터디 정리  (0) 2022.03.06

      관련글 관련글 더보기

    티스토리툴바