HTML (HyperText Makrup Language)
(HyperText)하이퍼텍스트[링크]를 가장 중요한 특징으로 하는 (Markup) 마크업이라는 형식을 가진 (Lanugage)언어
: 웹 브라우저에게 표시되는 웹 페이지를 만들어 달라고 서버에 요청하는 언어
Tag
HTML의 강점 데이터를 어떻게 표현할지 선언하는 문법이다.
< > : 시작 태그 , < / > : 닫히는 태그
하이퍼 텍스트와 속성
속성
속성에 이름에 따라 그 기능이 정해져있고 , 순서는 상관하지 않는다.
속성을 통해서 태그로는 제한적이었던 추가적인 기능들을 구현할 수 있게 되었다.
<속성네임> </속성네임>
하이퍼 텍스트
<a> tag : 링크와 링크를 연결하는 하이퍼 텍스트 태그 즉, 링크를 만드는 태그이다.
< href = "URL" target="_blank" 등등 > ... </a>
해당 하는 태그를 통해서 새로운 페이지로 이동하는 것을 의미한다.
태그의 중첩과 목록
<ol>
<li> 기술 소개 </li>
<li> 기본 문법 </li>
<li> 리스트와 태그의 중첩 </li>
</ol>
<ul>
<li> 한재민 </li>
<li> 티스토리 </li>
<li> ----- </li>
</ul>- <ol> 리스트 형식에 대해서 순서대로 표시해준다 (ordered list)
- <ul> 리스트 형식에 대해서 순서없이 표시해준다 (unordered list)
- <li> 줄 바꿈을 해주는 태그
- 위의 예제와 마찬가지로 HTML에서는 태그의 중첩이 가능하다.
- HTML은 스페이스, 엔터 등에 구분되지 않고 태그에 의해 구분되므로 시각적으로 분리되게 보여줄 수 있다.
HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
<title> 주제명 </title>
<meta charset="utf-8">
</head>
<body>
<...>
</body>
</html>
1. <html> - </html> : html은 항상 head, body 태그를 감싸주어야 한다.
2. <head> - </head> : 본문 내용이 아닌 html 파일의 헤더 정보를 설정할 수 있다.
<title> : 웹 페이지의 탭 네임을 정할 수 있다.
3. <body> - </body> : 웹 페이지에 대한 본문 내용을 담고 있는 태그이다.
4. <!DOCTYPE html> : 브라우저에게 태그의 정의 버전을 알려줌 (HTML 5)
HTML 주요 태그
| < p > ... < /p > | 글에서 단락을 지정한다. 단락 크기는 CSS에서 지정하여 처리할 수 있다. |
| < br > | 글의 라인을 띄운다. |
| <img> </img> | 이미지를 페이지에 넣어줄 수 있는 태그 속성 [src] : 이미지 파일 위치 [height] : 높이 [width] : 너비 [alt] : 이미지가 없을 경우 대체될 텍스트 [title] : 이미지 타이틀 ( 커서에 위치했을 때 뜨는 문구 ) |
| <table> </table> | 테이블을 만들어주는 태그 속성 [border] : 테이블의 태두리 너비 |
| <tr> : 테이블 row (행) <td> : 테이블에 들어갈 데이터 (행/열) |
|
Form 태그
HTML의 입력 폼
[1] 기초
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<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>
</body>
</html>Form : 입력된 데이터들을 묶고 그 데이터들이 어디로 전송되는지 지정하는 태그이다.
Form - action 속성은 Form안에 입력 정보들이 submit 버튼을 눌러졌을 때 사용자의 정보는 name으로 구분되어 QureyString으로 처리된 action의 URL로 이동하게 된다.
즉 위의 예제를 통해서 이동하는 URL은
"http://localhost/login.php?id=hanjaemin&pwd=1234&address=ulsan" 이라는 URL로 이동하게 된다.
이는 login.php라는 웹 어플리케이션에 데이터를 전송하는 데 이는 id값은 hanjaemin, pwd값은 1234, address값은 ulsan으로 전송이 된 것이다.
[2] 텍스트 입력
<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>
</form>텍스트를 입력받는 방법 중 가장 주로 쓰이는 3가지는 아래와 같다.
그 중 textarea는 높이,너비를 직접 정하여서 여러 줄의 데이터를 입력 받을 수 있는 태그 중 하나이다.
입력 태그는 이 외에도 여러가지가 있다.
우리가 정보를 전달할 때, 유저에게는 정보를 전달하지 않고 서버와 소통할 수 있는 필드가 필요할 수도 있다.
이럴 경우에는 hidden 이라는 입력 form을 사용하게 된다.
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="jamjam">
<input type="submit">이러한 Html 소스를 작성하고 text 창에 id를 jaemin이라고 입력하게 된다면
UI의 입장에서는 정보가 전달되는 것이 id라는 변수에 jaemin이라는 정보만 전달되는 것처럼 보이지만,
숨겨진 hidden이라는 입력 form으로 인해서 이동하는 url은 아래와 같다.
" http://localhost/hidden.php?id=jaemin&hide=jamjam
[3] 선택지 입력
1. dropdown list
<form action="http://localhost/color.php">
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
2. radio & check box
<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>
ratio : 라디오 박스로 단일 선택만 가능한 입력 폼이다.
checkbox : 다중 선택이 가능한 입력 폼이다.
위와 마찬가지로 입력 폼을 선택한 뒤에 submit을 하게 되면 url을 통해 정보가 전달되게 된다.
checked로 선택되어진 default 인자로 이동을 예시로 들면 아래의 링크로 이동하게 된다
" http://localhost/order.php?color=black&size=100&size=105 "
Label 태그
label태그는 특별한 기능이 있기보다는 무언가의 이름표라는 기능을 가짐.
Tag <---( label ) ---> Form
즉 lable은 필수적인게 아니라 작업의 유연성을 더욱 올려줄 수 있는 선택적 사항이다.
각각의 label은 누구의 이름표인지 연결시켜줄 수가 있는데 방법은 아래와 같다.
<1> <label for="id_text">text:</label>
<input id="id_text" type="text" name="id" value="default value">
<2> <label>text:
<input type="text" name="id" value="default value">
</label>
label이 잘 지정되었다면, label로 지정된 문자를 눌러보면 커서가 input form에 이동된다.
[4] 입력폼 Method
우리가 example.html 파일에 id와 pwd 텍스트 입력창에 입력을 한뒤
submit 버튼을 누르게 되면 어떻게 동작할까?
이 때는 action에 지목된 URL에 향해서 Query String을 더한채로 url을 이동하게 된다.
이 때 우리는 "기존 URL + id + pwd"라는 링크로 넘어가게 되는데, 이는 보안에 상당히 취약한다.
왜냐하면 내 ID , PWD가 링크에 그대로 유츌되기 때문이다.
이러한 방식을 GET 방식이라고 한다. ( 이는 action의 default 방식이다. )
GET 방식
간단하게 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>위의 예제를 이용해서 url을 이동하게 된다면 아래와 같을 것이다.
http://localhost/method.php?id=jaemin119&pwd=123456!
이는 링크가 그대로 유출되기 때문에 보안상으로도 취약하고 좋은 방법이 될 수 없다.
그러면 이러한 개인정보를 숨기고 싶을 때 , 우리는 어떻게 해야할까?
이때는 POST 방식을 사용한다.
Post 방식은 Get 방식과 다르게 url을 통해서 정보를 전달하는 것이 아니라, 다른 방법으로 정보를 전달한다.
POST 방식
정보를 숨겨서 보내거나, 큰 용량이 데이터를 전달하는데 사용하는 방법이다.
아래의 예제와 같이 입력폼에서 입력을 한 뒤 링크를 이동하면
링크는 http://localhost/method.php 만 표시하고, 데이터는 숨겨서 전송하게 된다.
<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>
간략하게 Post 방법의 데이터 전송을 살펴보면 , GET방식은 URL에 데이터를 붙여서 보내는 반면, POST방식은 URL에 붙여서 보내지 않고 BODY에다가 데이터를 넣어서 보낸다.
헤더필드중 BODY의 데이터를 설명하는 Content-Type이라는 헤더 필드를 이용해 어떤 데이터 타입인지 명시한다.
BODY에 데이터를 넣어 전송하며 길이의 제한이 없어서 GET과 다르게 대용량 데이터를 전송할 수 있으며, BODY에 전송되어 내용이 눈에 보이지 않아 보안적으로 안전하다고 할 수 있다.
하지만 POST요청도 크롬 개발자 도구같은 툴로 요청내용을 확인할 수 있기 때문에 민감한 데이터는 반드시 암호화 하여 전달해야 한다.
'Tech Stack > HTML&CSS' 카테고리의 다른 글
| 박스 모델과 요소의 위치와 정렬 (0) | 2023.05.12 |
|---|---|
| CSS : Selector , Style (0) | 2023.05.12 |
| 브라우저: 문서, 이벤트, 인터페이스 (0) | 2023.05.05 |
| HTML [2] (0) | 2022.02.17 |
