[hidden field]
UI 는 없지만 태그는 존재해서, 서버에 보낼 추가적인 내용을 활용할 때 사용
<input> 태그의 type 옵션을 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>
결과
(hidden 이란 버튼이나 체크 박스가 없지만 전송 후 링크를 확인해보면 서버로 같이 전송된 것을 볼 수 있다.)
[레이블 생성하기]
<label></lablel> 태그를 통해 레이블을 생성할 수 있다.
<label> 은 특별한 기능이 있기보단 단순 이름의 정보를 명확하게 해주기 위해 사용한다고 보면된다.
실제로 하단에 보면 text 에 <label> 태그를 사용한 것과 password 나 textarea 처럼 태그를 사용하지 않은 것의 차이는 없다.
<html>
<body>
<form action="">
<p>
<label>text</label>:
<input type="text" name="id" value="default value">
</p>
<p>password:<input type="password" name="pwd" value="defult value"></p>
<p>
textarea:<textarea rows="2">default value</textarea>
</p>
</form>
</body>
</html>
결과
나아가 조금 더 명확하게 <label>을 정리하고자 한다면
<input> 태그의 옵션인 id 에 값을 정해주고,
<label> 태그의 for 옵션에 <input> 의 id 옵션으로 설정된 값을 매칭 시켜주면 된다.
<html>
<body>
<form action="">
<p>
<label for="id_txt">text</label>:
<input id="id_txt" type="text" name="id" value="default value">
</p>
<p>
<label for="password">password :</label>:
<input id="password" type="password" name="pwd" value="defult value">
</p>
<p>
<label>textarea:
<textarea id="comment" rows="2">default value</textarea>
</label>
</p>
</form>
</body>
</html>
결과
작성내용을 살펴보면 text 의 <label> 과 password 의 <label> 에서 콜론 : 의 위치를 일부러 다르게 설정한 것을 볼 수 있다. 이경우 text 의 <label> 은 콜론 : 이 제외되고, password 의 <label> 은 콜론 : 까지를 label 로 취급해준다. (결과 화면은 다른것이 없는 걸 확인할 수 있다.) 그리고 만약 id 설정이 귀찮다면 textarea 처림 <label> 태그 내에 <textarea> 태그를 사용해서 label 설정 해주는 방법도 있다.
[label 을 통해서 체크박스나 radio button 등의 클릭 범위 넓히기]
위에서 : 콜론의 범위가 <label> 태그에 포함 여부에 대해선 크게 체감을 할 순 없지만, 버튼을 만들어 생성할 때 체감을 할 수 있다.
<html>
<body>
<p>
<input type="checkbox" name="color" value="red"> 붉은색
</p>
<p>
<label>
<input type="checkbox" name="color" value="red"> 푸른색
</label>
</p>
<p>
<label for="yellow">
<input id="yellow" type="checkbox" name="color" value="red"> 노란색
</label>
</p>
</body>
</html>
결과
붉은색
위에서 생성된 체크 박스를 확인해보면 붉은색은 체크 박스에 정확하게 마우스로 클릭해야 체크 설정이 되지만, <label> 태그 처리를 해준 푸른색과 노란색은 글자를 클릭해도 체크 설정이 되는 것을 확인할 수 있다.
[method 활용하기]
html 3 ~ html 4 note 에서 <form> 태그를 통해 서버 쪽으로 데이터를 보내면서, 링크에서 해당 내용이 확인이 되었던걸 알 수 있었다. 이 방법은 get 을 통해 전송되는 방법이다. <form> 태그에는 method 옵션이 있는데 따로 설정을 하지않으면 기본 값으로 get 으로 설정된다(<form method="get">). 하지만 비밀번호 같은 중요한 내용 마저 링크에서 확인이 되는 단점이 있는데 이를 가리키 위한 전송 방법으로 post 방법이 있다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form cation="http"//localhost/method.php method="post">
<input type="text" name="id">
<input type="password" name="pwd">
<input type="submit">
</form>
</body>
</html>
결과
id 와 비밀번호를 입력하고 제출해보면
이처럼 get 으로 설정했을 때 표시되던 id 와 비밀번호의 내용이 post 설정을 하니 보이지 않는 것을 확인할 수 있다.
[파일 업로드하기]
<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>
결과
TMI: 작성된 코드에서 <form> 태그의 옵션으로 설정된 method 와 enctype, <input> 태그의 name 옵션들의 값은 서버 쪽과 협의해서 설정해야되기 때문에 '이러한 옵션도 있구나~' 정도로 알아두면 된다.
[사용 지양 태그]
<font></font> 태그
<font> 태그의 size 옵션 (값 1~7) , color 등의 옵션으로 설정
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<font size="7" color="red">Hello</font> word
</body>
</html>
결과
Hello word결과에서 보듯이 잘 적용된 것을 알 수 있다. 그럼 이 <font> 태그를 왜 지양해야하는가?
HTML 이 초창기에는 웹을 꾸며주는 정도에 지나지 않았으나, 현재 많은 정보들이 웹화 되어 가고 있으면서, HTML 또한 정보를 전달하는 역할의 포지션으로 바뀌었다. <font> 라는 태그는 시각적인 디자인만해줄 뿐 어떠한 정보도 없기 때문에 현재의 HTML 성격에 맞지 않기 때문에 지양하는 추세이다. 또한 디자인은 이제 CSS에서 할 것이기 떄문에 굳이 사용할 필요성도 없는것이 현 시점이다.
[웹페이지 설명하기]
<meta><meta> 태그
meta = 데이터를 설명하는 데이터
html 1 노트에서 부터 줄 곧 사용했던 <meta> 태그에 대해서 조금 더 알아보자
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="비가 오는 날에 취해야할 행동">
<meta name="keywords" content="비,파전,막걸리,술,빗소리,전">
<meta name="author" content="red_jh">
<meta http-equiv="refresh" content="30">
</head>
<body>
오늘처럼 비가오는 날에 파전에 막거리 한 잔!
</body>
</html>
결과
오늘처럼 비가오는 날에 파전에 막거리 한 잔!charset 옵션은 해당 html 파일의 문자 형식을 알려주는 것으로 설정하지 않는다면 웹페이지를 여는 곳의 기본값으로 열게 되는데 이 때 문자 형식이 맞지 않는다면 글이 깨지게 된다.
name 옵션의 description 값은 content 에 설정된 정보를 사용하는 측에서 사용하게 되는데, 이를테면 검색 엔진에서 검색 결과에 요약본 같은 곳에 사용될 가능성이 많다.
name 옵션의 keywords 값은 content 에 설정된 정보를 사용하는 측에서 검색 분류등에 사용될 가능성이 많다.
name 옵션의 author 값은 content 에 웹 제작자 이름의 정보를 알려주고
name 옵션의 http-equiv="refresh" content="num" 는 잘 사용하진 않지만 설정하면 num 만큼 웹페이지가 refresh(새로고침) 되게 된다.
[semantic 태그]
웹의 발전 과정에서 정보로써의 가치가 중요해지면서 사람에게도 의미있고, 검색엔진이나 스크린리더와 같은 기계들에게도 활용하기 좋은 형태 데이터로 웹의 발전시키기 위한 노력이 있었으면 과정에서 트렌드 중 하나인 Semantic Web 이 있다.
<hearder></header> 태그 - 화면의 상단에 위치할 사이트나 문서의 전체적인 정보를 정의
<article></article> 태그 - 페이지의 본문 정의
<section></section>태그 - 여러개의 article 이나 기타 문서의 구획을 정의
<nav></nav> 태그 - 네비게이션 역할 파트 정의
<footer></footer> 태그 - 화면의 최하단에 위치 사이트나 문서의 전체적인 정보 정의
<!DOCTYPE html>
<html>
<head>
<title>HTML - semantic_test </title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="semantic.html">HTML</a></h1>
</header>
<nav>
<ol>
<li><a href="1.html">header tag</a></li>
<li><a href="2.html">nav tag<a/></li>
<li><a href="3.html">article tag, section tag</a></li>
<li><a href="4.html">footer tag</a></li>
</ol>
</nav>
<section>
<article>
<h2>시맨틱 태그</h2>
웹 사이트에서 해당 데이터의 정보를 정의
</article>
<article>
<h2>시맨틱 태그 종류</h2>
시맨틱 태그의 대표전인 것들은 header, nav, article, section, footer 등이 있다.
</article>
</section>
<foorter>
<a href="privacy.html">개인정보정책</a>
<a herf="about,html">회사소개</a>
</foorter>
</body>
</html>
결과
HTML
시맨틱 태그
웹 사이트에서 해당 데이터의 정보를 정의시맨틱 태그 종류
시맨틱 태그의 대표전인 것들은 header, nav, article, section, footer 등이 있다.실제로 시맨틱 태그들은 별도의 특수 기능 같은걸 같지 않는다. 오로지 해당 파트가 어떠한 파트인지에 대한 정보 제공 역할로 활용한다.
이상 오늘의 html 4 note 마무리
'HTML' 카테고리의 다른 글
| HTML - Hyper Text Markup Language(3) (0) | 2024.05.25 |
|---|---|
| HTML - Hyper Text Markup Language(2) (0) | 2024.05.25 |
| HTML - Hyper Text Markup Language(1) (0) | 2024.05.24 |
