글 작성자: caputdraconis

HTML - Hyper Text Markup Language 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어

: 웹브라우저에서 strong 태그로 감싸진 부분은 진하게 표시된다.

: h6부터 h1까지 차례대로 글자가 커진다.

<a target="_blank" href="url" title="전설적인 프로그래머">도널드 커누스</a>

a 태그 : a라는 태그 안쪽이 링크라는 것을 브라우저에게 알려주는 태그. href 속성값으로 주어진 url이 링크 주소가 된다. title 속성은 '도널드 커누스' 위에 마우스를 올려놓았을때 작은 글씨로 설명해주는 속성이다!

순서가 없는 리스트

ol과 ul 태그 안에 중첩으로 li 태그가 들어간다.

<html>
<head>
<title>연습용</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</hl>
<ol>
  <li>기술소개</li>
  <li>기본문법</li>
  <li>하이퍼텍스트와 속성</li>
  <li>리스트와 태그의 중첩</li>
</ol>
</body>
</html>

본문 내용은 body 태그 안에, 아닌 것들은 head 태그 안에! head태그와 body 태그는 html태그 안에 들어오게~

Doctype : 자신이 작성한 html 코드가 어떤 방식의 html 코드로 작성되었는지 브라우저에게 알려주는 녀석

: 브라우저에게 한 단락의 범위를 알려주는 태그. p태그로 둘러싼 단락끼리는 일정한 간격 떨어져서 브라우저에 출력된다.(br태그 , css로 간격 조절 가능)

: A forced line-break의 줄임말. 줄바꿈 태그! br보단 p 태그 추천

: 웹사이트에 이미지를 사용하게끔 해주는 태그. src라는 속성에 이미지 파일의 경로 및 이름을 값으로 넣어주면 된당. width와 height 속성을 사용해 이미지의 크기 조절 가능. 만일 브라우저가 이미지를 제대로 불러오지 못할 경우 alt(alternative text)라는 속성의 값이 브라우저에 표시됨.

입력양식 - form

<form action="http://localhost/login.php">
    <p>아이디 : <input type="text" name="id"></p>
    <p>비밀번호 : <input type="password" name="pwd"></p>
    <p>주소 : <input type="text" name="address"></p>
    <input type="submit">
</form>

form 태그 : input 태그를 모두 감싸며 마지막 submit을 눌렀을때 이 정보가 전송될 PHP 파일을 action의 속성값으로 준다.

input 태그 : 입력할 수 있는 양식을 만들어준다. type의 속성값으로 text(작은 박스), submit(데이터 전송) 등등을 줄 수 있다.

name의 속성값으로 이 정보가 php 파일로 전달 됐을때 구분할 수 있는 이름을 정해준다. value의 속성값으로는 기본값을 줄 수 있다.(textarea태그의 기본값 설정은 textarea 태그 안쪽에 써준다)

<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>

색상

붉은색 검은색 파란색

select 태그안에는 option 태그가 온다 ( ul 태그 안에 li 태그가 오는 느낌)

submit 버튼을 누르면 select 태그의 속성인 name의 값 color, option 태그 안의 속성값 "red", "black", "blue" 이 전해진다.

ex) https://localhost/color.php?color=red

색상2 (다중선택)

붉은색 검은색 파란색

다중선택한 값이 모두 서버에게 전해진다.

ex) https://localhost/color.php?color2=black&color2=red

type="radio" 같은 name 값들끼리 하나만 선택 가능. 서버로 전해지는 이름은 value의 속성값으로 준다.

type="checkbox" 단일 선택만 가능한 radio 타입과 달리 체크박스 타입은 다중선택 가능. value의 속성값으로 서버로 전해지는 이름 설정

만일 페이지가 열렸을때 미리 선택되어 있었으면 하는 항목은 태그 안에 'checked'!

type="button" 버튼이 생겨부러~ value 값으로 버튼 위에 글자 새기고! onclick 속성으로 버튼이 눌렸을때 기능 넣을 수 있당

type="reset" 사용자가 입력하는 타입의 input 태그가 같은 form 태그 안에 있다면 그 값을 모두 지워버렷

<input type="hidden" name="hide" value="egoing">

type="hidden" hidden~ 브라우저에서는 보이지 않지만상 제출버튼을 누르면 name이라는 속성값으로 value가 보내진다! 위의 코드에서는 hide=egoing이 서버로 전송된다.

<form>
<p>
 <label for="id_txt">text</label>:
 <input id="id_txt" type="text" name="id">
 </p>
 </form>

text

label input 태그를 설명해주는 제목을 label 태그로 감싸주면 그 제목을 클릭해도 input 태그의 공간이 눌리게 된다.

label과 input 태그를 묶는 속성은 for 과 id이다. label의 for 속성값과 input의 id 속성값이 같아야 연결~

https://localhost.com/login.php?id=caputdraconis&pwd=1234

위와 같이 로그인을 할때 url로 id와 비밀번호가 그대로 노출되어 전송하게 되면 만약 url을 공유하거나 한다면,, 개인정보가 그대로 노출이 된다! 이렇게 url 뒤에 전송값이 붙는것은 method가 GET방식이기 때문. form 태그에서 따로 속성값을 정해주지 않으면 기본값이 GET이다. 고로 로그인과 같은 중요한 정보가 오고 가는 뽀인트라면 method="post" 라는 속성을 form 태그에 추가해야한다.

(1) Webhacking.kr old-1번

굉장히 당황스러운 첫만남..

view source를 누르니

<?php
  include "../../config.php";
  if($_GET['view-source'] == 1){ view_source(); }
  if(!$_COOKIE['user_lv']){
    SetCookie("user_lv","1",time()+86400*30,"/challenge/web-01/");
    echo("<meta http-equiv=refresh content=0>");
  }
?>
<html>
<head>
<title>Challenge 1</title>
</head>
<body bgcolor=black>
<center>
<br><br><br><br><br>
<font color=white>
---------------------<br>
<?php
  if(!is_numeric($_COOKIE['user_lv'])) $_COOKIE['user_lv']=1;
  if($_COOKIE['user_lv']>=6) $_COOKIE['user_lv']=1;
  if($_COOKIE['user_lv']>5) solve(1);
  echo "<br>level : {$_COOKIE['user_lv']}";
?>
<br>
<a href=./?view-source=1>view-source</a>
</body>
</html>

is_numeric : 값이 숫자인지 아닌지 판단. 숫자인경우 true 반환

cookie 값이 6보다 크거나 같으면 쿠키값을 1로 초기화 하고,, 쿠키값이 5보다 크면 solve(1)을 실행. 뭔가 solve라는 단어가 맘에 든다.

그럼.. 6보다 크거나 같으면 안되고 5보다는 큰 쿠키값을 가져야한다. 그래서 !!