Learn & Record
HTML CSS (Semantic Tag 시맨틱 태그, 연습문제, form 태그, form 특성/요소, text, password, checkbox, radio, file, color, date, etce, textarea) 본문
Dev/HTML CSS JS
HTML CSS (Semantic Tag 시맨틱 태그, 연습문제, form 태그, form 특성/요소, text, password, checkbox, radio, file, color, date, etce, textarea)
Walker_ 2024. 3. 22. 17:081. Semantic Tag (시맨틱 태그)
- 시맨틱 구조
- 검색 엔진 같은 프로그램에서 자료를 검색하여 정보의 의미를 분석할 수 있게 도와주는 지능형 웹
- 어떤 요소가 어떤 내용 또는 태그를 포함할 수 있는 지에 관한 정의
- 웹 페이지의 구조를 더욱 쉽게 이해
- 의미 요소를 가진 태그
- 자신의 컨텐츠를 명확하게 정의
- 코드의 가독성을 높이고 의미를 명확하게 해주는 장점
- 컴퓨터의 정보를 이해, 논리적인 추론이 가능한 구조
- 시맨틱 태그 종류
- header
- 머리말 의미, 헤더, 로고, 네비게이션, 검색창,
- 페이지 맨 위쪽에 삽입하는 머리말을 의미
- 주로 로고를 중심으로 네비게이션 메뉴와 검색 창이 들어가며, 내비게이션 메뉴는 <nav> 태그로 구성
- nav
- navigation 줄임말
- 어느 부분이 메뉴인지 쉽게 파악할 수 있고 사이트 내에 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있음
- 문서 안에 여러 개의 <nav> 태그를 사용할 경우 id 선택자로 구분하여 스타일을 꾸미고,
- 메뉴로 구성되어 있는 영역에 대해서는 <nav> 태그를 언제든지 내부적으로 사용하거나 독립하여 사용할 수 있음
- sesction
- 콘텐츠 영역을 포함하는 태그
- 해당 콘텐츠를 주제별로 묶을 때 사용하며 내부에는 <h1> ~ <h6> 제목 태그가 함께 사용
- <section> 태그 안에는 다른 <section> 태그를 넣을 수 있음
- article
- section 안에서 더 세부적으로 나눌 때 사용
- 사전적 의미는 신문이나 잡지의 '가사'를 뜻함
- 웹 상의 실제 내용을 작성하는 것. 블로그 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당
- section 태그는 문맥의 흐름 중 콘텐츠를 주제별로 묶을 때 사용
- aside
- 왼쪽이나 오른쪽 또는 하단에 사이드 바를 만들 때 사용. 메인 영역은 아님
- 필수 요소가 아니며 광고나 일반적인 링크 모음처럼 문서의 메인 내용에 영향을 미치지 않는 내용을 넣을 때 사용
- footer
- 웹 문서 하단의 저작권 표시 같은 내용과 연락처 정보를 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/reset.css" type="text/css">
<style>
header {
width: 1000px;
height: 100px;
margin: 0 auto; /* block 속성일 때 가운데 배치 */
margin-top: 10px;
border: 2px solid black;
overflow: hidden;
box-sizing: border-box;
}
header h1 { /* logo */
width: 200px;
line-height: 100px;
background-color: yellow;
float: left;
text-align: center;
}
header nav { /* 오른쪽 메뉴 */
float: right;
overflow: hidden;
}
header nav ul {
overflow: hidden;
background-color: antiquewhite;
}
header nav ul:nth-of-type(1) li {
float: left;
padding-left: 20px;
background-color: yellow;
line-height: 30px;
}
header nav ul:nth-of-type(2) li {
float: left;
padding-left: 20px;
background-color: orange;
line-height: 30px;
margin-top: 40px;
}
#main{
width: 1000px;
margin: 10px auto;
overflow: hidden;
}
#main section {
width: 700px;
float: left;
overflow: hidden;
}
#main section article {
box-sizing: border-box;
width: 700px;
padding: 20px;
border: 2px solid black;
margin-bottom: 10px;
overflow: hidden;
}
#main section article > h2 {
background-color: antiquewhite;
}
#main aside {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid black;
float: right;
overflow: hidden;
}
#main aside div.bannerbox {
margin-top: 10px;
margin-bottom: 10px;
background-color: gray;
}
footer {
box-sizing: border-box;
width:1000px;
height: 50px;
border: 2px solid black;
margin: 10px auto;
line-height: 50px;
text-align: center;
background-color: antiquewhite;
}
</style>
</head>
<body>
<!-- header(시맨틱 태그) -->
<header>
<h1>WEB-logo</h1>
<!-- nav(시맨틱 태그) -->
<nav>
<ul>
<li>menu-1</li>
<li>menu-1</li>
<li>menu-1</li>
<li>menu-1</li>
</ul>
<ul>
<li>menu-2</li>
<li>menu-2</li>
<li>menu-2</li>
<li>menu-2</li>
</ul>
</nav>
</header>
<!--본문 감싸주는 박스는 일반 선택자 박스로 지정-->
<div id="main">
<!--왼쪽 section (시맨틱 태그)-->
<section>
<!--article (시맨틱 태그)-->
<article>
<h2>Main Article</h2>
<p>
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
</p>
</article>
<!--article (시맨틱 태그)-->
<article>
<h2>Main Article</h2>
<p>
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
</p>
</article>
<!--article (시맨틱 태그)-->
<article>
<h2>Main Article</h2>
<p>
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
</p>
</article>
</section>
<!--오른쪽 aside (시맨틱 태그)-->
<aside>
<h2>Right aside</h2>
<p>
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced.
</p>
<input type="email" />
<button>mailto</button>
<div class="bannerbox">
<h2>TEXT</h2>
<p>banner</p>
</div>
</aside>
</div>
<!--하단 footer(시맨틱 태그)-->
<footer>
<p>HTML5 COPYRIGHT</p>
</footer>
</body>
</html>* {
margin: 0;
padding: 0;
}
a {
text-decoration: none; /* 링크속성 밑줄 없앰 */
}
li {
list-style: none; /* 항목 태그 블릿 아이콘 장식 없앰 */
}
img {
display: block; /* inline속성을 지니고 있는 img 태그의 오자 간격을 없애기 위함 */
border: none;
}
body {
font-family: 'Verdana';
font-size: 14px;
color: black;
line-height: 28px;
}
2. 연습문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Practice</title>
<style>
*{
padding: 0;
margin: 0;
}
.img1 {
width: 750px;
height: 500px;
background-image: url("img/0320-1.jpg");
float: left;
}
.full {
width: 1000px;
height: 1050px;
margin: 0 auto;
}
.global{
float: left;
padding-top: 260px;
padding-left: 20px;
}
.img2{
width: 250px;
height: 250px;
background-image: url("img/0320-2.jpg");
float: right;
}
.top {
width: 1000px;
height: 500px;
}
.img3 {
width: 250px;
height: 250px;
background-image: url("img/0320-3.jpg");
float: right;
}
.list_one li{
list-style: none;
float: left;
width: 230px;
height: 230px;
padding: 10px;
}
.list_one li:nth-child(2n) {
background: rgb(255, 218, 95);
}
.list_one li:nth-child(2n+1) {
background: rgb(250, 105, 115);
}
.box_all{
width: 1000px;
height: 250px;
margin: 0 auto;
}
.box_six{
width: 750px;
height: 500px;
float: left;
}
.box_six p {
font-weight: bold;
}
.box_last{
width: 230px;
height: 480px;
float: right;
padding: 10px;
background-color: #f8fa61;
}
.footer {
width: 1000px;
height: 50px;
}
.list_two li {
list-style: none;
float: left;
padding-left: 20px;
font-size: 14px;
color: white;
padding-top: 8px;
}
.footer_one {
width: 750px;
height: 35px;
background: #797792;
float: left;
}
.footer_two {
width: 250px;
height: 35px;
float: right;
background-color: black;
}
.cj p{
color: white;
font-size: 12px;
padding-left: 25px;
}
.cj{
width: 200px;
height: 20px;
background-color: #6c9198;
margin: 10px;
margin-right: 10px;
}
.list_two li:nth-child(2n) {
color: #ff7100;
}
</style>
</head>
<body>
<div class="full">
<div class="top">
<div class="img1">
<div class="global">
<h2>GLOBAL <br>BUSINESS</h2>
<p>GLOBAL NO.1 lifestyle laedia<br>Shopping Leader<br>라이프스타일을 선도하는 <br>세계최고의 미디어 쇼핑리더</p>
</div>
</div>
<div class="img2">
</div>
<div class="img3">
</div>
</div>
<div class="box_all">
<div class="box_six">
<ul class="list_one">
<li><p>CSV</p><br>상생 이념을 통해 함께 성장하고,사회에 공헌하는 CSV프로그램과활동소식을 안내합니다.</li>
<li><p>입점안내</p><br>고객에게 늘 새롭고 Trendy한 제안을 하는 CJ O Shopping! 힘찬도약을 함께 할 동반자를 찾습니다.</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="box_last">
7
</div>
</div>
<div class="footer">
<div class="footer_one">
<ul class="list_two">
<li>법적고지</li>
<li>|</li>
<li>이메일무단수집거부</li>
<li>|</li>
<li>이용약관</li>
<li>|</li>
<li>개인정보취급방지</li>
<li>|</li>
<li>고객센터</li>
<li>|</li>
<li>입찰공고</li>
</ul>
</div>
<div class="footer_two">
<div class="cj">
<p>cj그룹계열사바로가기</p>
</div>
</div>
</div>
</div>
</body>
</html>
3. form 태그
- 여러 입력 양식을 그룹화 하고 전송
- form을 만들고 사용자 화면을 구성하는 영역은 프론트엔드 영역에서 담당
- from을 통해 전달 받은 데이터를 가공하는 일은 백엔드 영역에서 처리
- FTP에 올려서 확인
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="action.php" method="post">
<label for="mId">아이디</label>
<input type="text" name="memberId" id="mId"/>
<label for="pwd">비밀번호</label>
<input type="password" name="password" id="pwd"/>
<input type="reset"/>
<input type="submit"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 확인</title>
<style>
* { padding: 0; margin: 0; }
article table { width:300px; margin-top:10px; border:1px solid #ccc; }
article th { height:28px; padding:3px; border:1px solid #ccc; background:#f0f0f0; color:#333; }
article td { height:28px; padding:3px; padding-left:10px; border:1px solid #ccc; text-align:left; font-weight:normal; }
</style>
</head>
<body>
<article>
<?
if (is_array($_REQUEST)) {?>
<table>
<tr>
<th>name</th>
<th>value</th>
</tr>
<?
foreach ($_REQUEST AS $key => $value) {?>
<tr><?
if (is_array($value)) {?>
<td><?=$key?></td><td><?
foreach ($value AS $key2 => $value2) {?>
<?=$value2?>, <?
}?>
</td>
<?
}
else {?>
<td><?=$key?></td>
<td><?=$value?></td>
<?
}?>
</tr><?
}?>
</table><?
}
?>
<?
if (is_array($_FILES)) {?>
<table>
<tr>
<th>name</th>
<th>value</th>
</tr>
<?
foreach ($_FILES AS $key => $value) {?>
<tr><?
if (is_array($value)) {?>
<td><?=$key?></td><td><?
foreach ($value AS $key2 => $value2) {?>
<?=$value2?>, <?
}?>
</td>
<?
}
else {?>
<td><?=$key?></td>
<td><?=$value?></td>
<?
}?>
</tr><?
}?>
</table><?
}
?>
</article>
</body>
</html>
- action : 특정 주소값이나 파일 위치. 폼 데이터가 전송되는 곳
- method : 폼을 서버로 전송할 때 http 메소드를 지정 (=전송방식)
- get : 주소표시줄에 사용자가 입력한 내용이 그대로 표시 : 보안이 위험
- post : 대부분이 사용하는 방식, 내부적으로 보이지 않게 전송
- type='reset' : 기존에 입력한 모든 값을 비우는 초기화 버튼
- type='submit' : 사용자가 폼에 입력한 모든 데이터를 서버에 전송하는 버튼
- input: type="속성" name="이름(서버에서 사용하는 이름) 필수" id="css나 자바스크립트에서 제어할 때 사용"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=text] {
width: 200px;
height: 16px;
border: 1px solid #999;
}
</style>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<label for="memberID">아이디</label>
<input type="hidden" name="loginType" value="general">
<input type="text" name="memberID" id="memberID" value="1">
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<label>비밀번호</label>
<input type="password" name="pass">
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<h4>취미</h4>
<!-- label: 폼 요소에 레이블을 붙이기 위해 사용.
label 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 없다는 것을 브라우저가 인식
for에 해당 태그의 아이디 값을 지정하면 label 클릭 시에 해당 체크박스 선택, 해제 됨-->
<input name="hobby[]" type="checkbox" value="sports" id="sportsId">
<label fro="sportsId">스포츠</label>
<!-- label 태그로 전체를 감사도 동일한 기능 -->
<label>
<input name="hobby[]" type="checkbox" value="game">
게임</label>
<!-- 분리해서 사용하면 선택, 해제 기능 안 됨 -->
<input name="hobby[]" type="checkbox" value="cook">
<label>요리</label>
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<h4>직업</h4>
<input type="radio" name="job" value="design" id="design" checked="checked">
<label for="design">UI/UX 디자이너</label>
<input type="radio" name="job" value="front_end dev" id="front_end">
<label for="front_end">프런트엔드 개발자</label>
<input type="radio" name="job" value="back_end dev" id="back_end">
<label for="back_end">백엔드 개발자</label>
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="frmPost" action="action.php" method="post" enctype="multipart/form-data">
<label>첨부파일</label>
<input type="file" name="addFile">
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>색을 결정하세요:</p>
<div>
<input type="color" id="head" name="head" value="#e66465">
<label for="head">머리</label>
</div>
<div>
<input type="color" id="body" name="body" value="#f6b73c">
<label for="body">몸통</label>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>date</title>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<label for="date2">날짜 선택</label>
<input type="date" name="date" id="date2">
<br>
<input type="month" name="month">
<br>
<input type="week" name="week">
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="etc" action="action.php" method="post">
<label>검색<input type="search" name="search"/></label>
<label>url<input type="url" name="url"></label>
<label>email<input type="email" name="email"></label>
<label>tel<input type="tel" name="tel"/></label>
<label>number<input type="number" name="number" min="1" max="100" step="5"/></label>
<label>range<input type="range" name="range" min="1" max="5" value="3"/></label>
<label>time<input type="time" name="time"></label>
<label>datetime<input type="datetime-local" name="datetime-local"/></label>
<input type="reset"/>
<input type="submit"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
textarea[name=contents] {
width: 500px;
height: 200px;
border: 1px solid #6666;
background: #eaeaea;
padding: 20px;
font-size: 16px;
}
textarea[name=contents]:focus {
outline: none;
}
textarea[name=contents2]:focus {
outline: 2px solid #a00;
}
</style>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<textarea name="contents"></textarea>
<textarea name="contents2" cols="60" row="18"></textarea>
<input type="submit" values="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="frmPost" action="action.php" method="post">
<select name="part">
<option value="H">HTML</option>
<option value="C">CSS</option>
<option value="" selected>JAVASCRIPT</option>
</select>
<!-- select multiple로 입력하면 키보드의 crtl 키를 누른 상태에서 여러 개 선택 가능 -->
<select multiple name="part2[]">
<option value="H">HTML</option>
<option value="C">CSS</option>
<option value="" selected>JAVASCRIPT</option>
<option value="H">HTML</option>
<option value="C">CSS</option>
<option value="" selected>JAVASCRIPT</option>
</select>
<input type="submit" value="전송">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/reset.css" type="text/css">
<style>
.full {
width: 800px;
margin: 0 auto;
height: auto;
}
h1 {
text-align: center;
}
textarea[name=contents] {
width: 800px;
height: 100px;
margin-top: 5px;
background: #eaeaea;
outline: none;
border: 0px;
}
textarea[name=contents]:focus{
outline: none;
}
.div_label {
width: 150px;
float: left;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="full">
<hr>
<br>
<h1>약관동의</h1>
<form name="frmPost" action="action.php" method="get">
<textarea name="contents">제1조(목적)
이 약관은 회사(전자거래 사업자)가 운영하는 사이버 몰(이하 "몰"이라 한다)에서 제공하는 인터넷 관련 서비스(이하 "서비스"라 한다)를 이용함에 있어 사이버몰과 이용자의 권리·의무 및 책임사항을 규정함을 목적으로 합니다. ※ 「PC통신등을 이용하는 전자거래에 대해서도 그 성질에 반하지 않는한 이 약관을 준용합니다」
제2조(정의)
"몰"이란 회사가 재화 또는 용역을 이용자에게 제공하기 위하여 컴퓨터등 정보통신설비를 이용하여 재화 또는 용역을 거래할 수 있도록 설정한 가상의 영업장을 말하며, 아울러 사이버몰을 운영하는 사업자의 의미로도 사용합니다."이용자"란 "몰"에 접속하여 이 약관에 따라 "몰"이 제공하는 서비스를 받는 회원 및 비회원을 말합니다.회원’이라 함은 "몰"에 개인정보를 제공하여 회원등록을 한 자로서, "몰"의 정보를 지속적으로 제공받으며, "몰"이 제공하는 서비스를 계속적으로 이용할 수 있는 자를 말합니다.비회원’이라 함은 회원에 가입하지 않고 "몰"이 제공하는 서비스를 이용하는 자를 말합니다.</textarea>
<input type="radio" name="not_agree" value="not_agree" id="not_agree" checked="checked">
<label for="not_agree">동의 안함</label>
<input type="radio" name="agree" value="agree" id="agree">
<label for="agree">동의함</label>
<hr>
<label for="memberID"><div class="div_label" >아이디</div></label>
<input type="text" name="memberID" id="memberID">
<hr>
<label><div class="div_label" >비밀번호</div></label>
<input type="password" name="pass" id="pass">
<hr>
<label for="memberID"><div class="div_label" >비밀번호 확인</div></label>
<input type="password" name="passcheck" id="passcheck">
</form>
</div>
</body>
</html>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
'Dev > HTML CSS JS' 카테고리의 다른 글
'Dev/HTML CSS JS' Related Articles
more
