티스토리 뷰
HTML
1. html 태그(tag)
a. html의 기본 구성 요소
b. < >를 사용
c. <태그명> ~ <태그명>
d. <태그명>
e. 대/소문자를 구분하지 않음, 되도록 소문자로 작성
2.html의 기본 구조
<!DOCTYPE html> <!-- html5 문서-->
<html lang="ko"> <!-- html 문서의 시작 -->
<head>
<title> </title>
<meta charset ="utf-8">
</head>
<body>
내용
</body>
</html> <!-- html 문서의 끝 -->
a. 속성(attribute) : HTML 태그에 부가적인 정보를 제공
lang="ko", class="content", href="https://www.naver.com",...
속성 = "값"
b. 주석 : 설명글, 프로그램 실행에는 영향을 주지 않고 단지 설명만 달아 놓음
<!-- 설명글 -->
비교) 스타일시트 주석 / * 설명글 */
자바스크립트 // 한 줄 설명, /* 여러 줄 설명글 */
c. <head> ~ </head> 태그
css,javascript, 메타 태그, 외부 링크 등의 정보가 위치
★코드 작성
● 마우스 오른쪽 버튼 : Open with Live Server
Alt + L Alt + O
1. <br> 또는 <br/> 태그 - 줄바꿈
2. - 한 칸 띄우기
html은 띄어쓰기는 한 칸만 적용되며, Enter는 적용되지 않음
Enter - <br> 또는 <br/> 태그 이용
띄어 쓰기 :
<!DOCTYPE html> <!-- html5로 작성된 문서-->
<html><!-- html 태그 시작 -->
<head><!-- head 태그 시작>
<title>웹페이지연습</title><!-- title 태그 -->
</head><!-- head 태그 끝 -->
<body><!-- body 태그 시작-->
안녕!!
즐거운 시간~~~
</body><!-- body 태그 끝 -->
</html><!-- html 태그 끝 -->
<!DOCTYPE html> <!-- html5로 작성된 문서-->
<html>
<!-- html 태그 시작 -->
<head><!-- head 태그 시작>
<title>웹페이지연습</title><!-- title 태그 -->
</head><!-- head 태그 끝 -->
<body><!-- body 태그 시작-->
안녕!!<br>
<br>
<br>
즐거운 시간~~~
</body><!-- body 태그 끝 -->
</html><!-- html 태그 끝 -->
2. 제목 태그 : <hn> ~ </hn>
a. 'h'뒤의 숫자가 커질수록 작은 제목
b. 제목 태그 (heading)
제목을 나타내는 태그로 일반 텍스트 보다 크고 굵으며, 줄바꾸기 기능이 포함됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목 텍스트 연습</title>
</head>
<body>
<h1>제목 텍스트1</h1>
<h2>제목 텍스트2</h2>
<h3>제목 텍스트3</h3>
<h4>제목 텍스트4</h4>
<h5>제목 텍스트5</h5>
<h6>제목 텍스트6</h6>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목 텍스트</title>
</head>
<body>
<h1>궁궐의 역사</h1>
<h4>현재 서울에 남아 있는 조선시대의 5대 궁궐은 경복궁, 창덕궁, 창경궁, 덕수궁(경운궁) 그리고 경희궁(경덕궁)이다</h4>
<hr>
<h2>경복궁</h2>
<p>1392년 조선 건국 후 태조는 3년 뒤에 수도를 개경(지금의 북한 개성)에서 한양(지금의 서울)으로 옮기기 위해 종묘와 사직, 그리고 궁궐을 지었다.<br>
제일 처음 지어진 경복궁(景福宮)은 백악산(지금의 북악산) 아래로 넓은 지형에 건물을 배치한 법궁(法宮)으로, 태조는 이곳에서 조선왕조의 기틀을 마련하였다. 그러나 1398년 정종이 왕위에 오르면서 수도를 개경으로 옮겼다가 태종이 왕위에 오른 후 1405년(태종 5) 수도를 다시 한양으로 옮겼다.</p>
</body>
</html>
3. 문단 태그 <p> ~ </p>
a. paragraph. 글자를 입력하면 앞뒤로 빈 줄이 생기면서 텍스트 단락을 생성
b. 편집기에서는 줄을 바꾸더라도 웹브라우저에서는 한줄로 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목 텍스트</title>
</head>
<body>
<h1>궁궐의 역사</h1>
<h4>현재 서울에 남아 있는 조선시대의 5대 궁궐은 경복궁, 창덕궁, 창경궁, 덕수궁(경운궁) 그리고 경희궁(경덕궁)이다</h4>
<hr>
<h2>경복궁</h2>
<p>1392년 조선 건국 후 태조는 3년 뒤에 수도를 개경(지금의 북한 개성)에서 한양(지금의 서울)으로 옮기기 위해 종묘와 사직, 그리고 궁궐을 지었다. 제일 처음 지어진 경복궁(景福宮)은 백악산(지금의 북악산) 아래로 넓은 지형에 건물을 배치한 법궁(法宮)으로, 태조는 이곳에서 조선왕조의 기틀을 마련하였다. 그러나 1398년 정종이 왕위에 오르면서 수도를 개경으로 옮겼다가 태종이 왕위에 오른 후 1405년(태종 5) 수도를 다시 한양으로 옮겼다.</p>
<hr>
<h2>창덕궁</h2>
<p>이때 태종은 경복궁이 아닌 새로운 이궁(離宮, 법궁 외에 별도로 지은 궁궐)을 지었는데 1405년(태종 5)에 완성한 창덕궁(昌德宮)이다. 창덕궁은 정치의 공간과 생활의 공간을 지형에 맞게 조성하여 자연과 조화를 이룬 조선의 대표적인 궁궐로 조선의 역대 왕들 대부분이 창덕궁에서 생활하였으며, 조선 후기에는 실질적인 법궁의 역할을 하였다.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 홈페이지 연습입니다 </title>
</head>
<body>
<h3> 비빔밥, 이 맛 </h3>
<p>송송송 썬 김치를 넣어야지요.<br>
콩나물도 한 젓가락,<br>
고추장도 빨갛게 한 스푼,<br>
그러고 그냥 비빌 건가?<br>
쨀끔, 고소한 참기름도 넣어야지요.</p>
<p>부벅부벅부벅-
숟가락을 틀어잡고 비비다가<br>
어차, 먹어 보자 한 숟갈!<br>
오오, 맛있네!</p>
<p>근데 이 맛은 어디서 올까?<br>
서로에게 아무것도 아닌 것들이<br>
서로서로 섞여서<br>
만들어 내는 이 비빔밥 맛은,</p>
<hr>
<h3> 비빔밥, 이 맛 </h3>
<div>송송송 썬 김치를 넣어야지요.<br>
콩나물도 한 젓가락,<br>
고추장도 빨갛게 한 스푼,<br>
그러고 그냥 비빌 건가?<br>
쨀끔, 고소한 참기름도 넣어야지요.</div>
<div>부벅부벅부벅-<br>
숟가락을 틀어잡고 비비다가<br>
어차, 먹어 보자 한 숟갈!<br>
오오, 맛있네!</div>
<div>근데 이 맛은 어디서 올까?<br>
서로에게 아무것도 아닌 것들이<br>
서로서로 섞여서<br>
만들어 내는 이 비빔밥 맛은,</div>
<hr>
<h3> 비빔밥, 이 맛 </h3>
<p>송송송 썬 김치를 넣어야지요.<br>
콩나물도 한 젓가락,<br>
고추장도 <span>빨갛게</span> 한 스푼,
<span>그러고 그냥 비빌 건가?</span>
쨀끔, <b>고소한</b> 참기름도 넣어야지요.</p>
<div>부벅부벅부벅-
숟가락을 틀어잡고 비비다가<br>
어차, 먹어 보자 한 숟갈!<br>
오오, 맛있네!</div>
<div>근데 이 맛은 어디서 올까?<br>
서로에게 아무것도 아닌 것들이<br>
서로서로 섞여서<br>
만들어 내는 이 비빔밥 맛은,</div>
</body>
</html>
4. 목록 태그
a. <ul><li> </li> ,,, </ul>
순서 없는 목록을 만들 때 사용(unorderedlist)
b. <ol><li> </li> ... </ol>
순서 있는 목록을 만들 때 사용 (orderedlist)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>test home</title>
</head>
<body>
<div><h1>책 세상</h1></div> <!-- 메인 로고가 들어갈 자리 -->
<ul> <!-- nav가 들어갈 자리 -->
<li>로그인</li>
<li>회원가입</li>
<li>사이트맵</li>
</ul>
<ul>
<li>회사소개</li>
<li>추천도서
<ul>
<li>저학년</li>
<li>중학년</li>
<li>고학년</li>
</ul>
</li>
<li>프로그램</li>
<li>열린공간</li>
<li>동아리</li>
</ul>
<hr>
<div>
<h2>구방아, 목욕 가자</h2>
<div>
<p>구방아, 목욕 가자.<br>
아빠는 뭐가 무섭다고<br>
혼자 가도 될 목욕탕을 <br>
꼭 나랑 같이 가자 하시지요.</p>
<p>구방아, 산에 가자.<br>
아빠는 뭐가 무섭다고<br>
만날 가는 산을
꼭 나랑 같이 가자 하시지요.</p>
<p>넌 이거도 못하냐.<br>
그러며 날 놀리는 아빠는 <br>
어디 갈 때면<br>
꼭 나를 앞세우려 하시지요.</p>
<p>구방아, 이모네 가자.<br>
이것 좀 봐요.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>test home</title>
</head>
<body>
<div><h1>책 세상</h1></div> <!-- 메인 로고가 들어갈 자리 -->
<ul> <!-- top nav가 들어갈 자리 -->
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<ul> <!-- main nav가 들어갈 자리 -->
<li>메인 메뉴1</li>
<li>메인 메뉴2
<ul>
<li>메인 서브메뉴1</li>
<li>메인 서브메뉴2</li>
<li>메인 서브메뉴3</li>
</ul>
</li>
<li>메인 메뉴3</li>
<li>메인 메뉴4</li>
</ul>
<hr>
</body>
</html>
5. 하이퍼 링크 태그 <a> ~ </a>
<a href="url" target="창" title="툴팁"> ~ <a> : 하이퍼링크
<a href="#"> ~ </a> : null link (빈 링크),
a : 앵커(anchor)
href= "이동할 곳의 경로" (url, 경로/파일명, 확장자)
target="_blank" (새로운 창에 링크. 새 탭이 생김),
"_slef" (현재 창에 링크),
"_top" (상위 문서에 링크)
"_parent" (부모가 있으면 그 부모 영역으로 링크)
title= "tooltip" (링크 내용 요약 설명)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 태그 연습</title>
</head>
<body>
<div><h1>추천 동시</h1></div>
<ol>
<li><a href="gubang.html" target="_blank">구방아, 목욕가자</a></li>
<li><a href="bibim.html" target="_blank">비빔밥 이맛이야</a></li>
<li><a href="#" target="_blank">만돌이</a></li>
<li><a href="#" target="_blank">콜라마시는 북극곰</a></li>
</ol>
<hr>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼 링크 연습</title>
</head>
<body>
<h2>웹사이트 연결</h2>
<a href="http://www.choongang.co.kr" target="_blank">중앙</a> <br />
<a href="https://www.naver.com" target="_blank">네이버</a>
<h2>문서 연결</h2>
<a href="gubang.html" target="_blank">구방아, 목욕가자</a><br />
<a href="bibim.html" target="_blank">비빔밥 이맛이야</a>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼 링크</title>
<!-- -->
<style>/* 주석, 스타일시트를 사용하겠다. */
h2{ /* h2 - 태그 선택자 */
color: blue; /* 글자색:파랑; 속성:값; */
background-color: cyan;
}
div{
width: 300px; /* 가로크기 : 크기; */
height: 150px; /* 세로크기 : 크기; */
border: 1px solid red; /* 테두리: 굵기 선모양 색상; */
}
</style>
</head>
<body>
<h1>하이퍼링크 연습</h1>
<div><!-- 상자 -->
<h2>웹사이트 연결</h2>
<a href="http://www.choongang.co.kr" target="_blank" title="중앙정보처학원으로 이동" >중앙</a><br>
<a href="https://www.naver.com" target="_blank">네이버</a>
</div>
<div>
<h2>문서 연결</h2>
<a href="../sample.html" target="_blank">문서1</a><br>
<a href="../ol_ul.html" target="_blank">문서2</a><br>
</div>
<div>
<h2>이미지 연결</h2>
<a href="../images/background01.jpg" target="_blank">그림1</a><br>
<a href="../images/background02.jpg" target="_blank">그림1</a><br>
</div>
</body>
</html>
6. 이미지 태그 <img>
<img src="파일명" alt="설명글" title="툴팁">
src: 이미지 파일명, 확장자 및 이미지 파일의 url
alt: 설명글, 이미지가 나타내는 내용을 텍스트로 지정
이 텍스트는 이미지가 표시되지 않는 경우나
이미지만으로 의미를 잘 전달할 수 없는
경우에 사용
title: 툴팁(tooltip), 풍선 도움말
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼 링크 연습</title>
</head>
<body>
<h2>웹사이트 연결</h2>
<a href="http://www.choongang.co.kr" target="_blank">중앙</a> <br />
<a href="https://www.naver.com" target="_blank">네이버</a>
<h2>문서 연결</h2>
<a href="gubang.html" target="_blank">구방아, 목욕가자</a><br />
<a href="bibim.html" target="_blank">비빔밥 이맛이야</a>
<h2>이미지 연결</h2>
<a href="./image/1.jpg" target="_blank"> 1.jpg 이미지</a><br />
<a href="./image/big_Tree01.jpg" target="_blank">big_Tree01 이미지</a>
<h2>작은 이미지 클릭 큰이미지 연결</h2>
<a href="./image/flower_big1.jpg" target="_blank">
<img src="./image/child1.jpg">
</a>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
태그명{ } - 태그선택자
태그명, 태그명, 태그명,..{ }
.클래스명{ } - 클래스 선택자
#아이디명{ } - 아이디 선택자
*/
.map{
border : 3px solid black;
width: 400px;
height: 300px;
}
.youtube{
border : 3px solid black;
width: 450px;
height: 200px;
}
</style>
</head>
<body>
<h1>이미지 연습</h1>
<img src="../images/21.jpg" alt="1.jpg파일">
<img src="../images/2.jpg" alt="2라는 숫자가 적혀 있는 이미지입니다.">
<img src="../images/3.jpg" title="3이라는 숫자 이미지"><br>
<hr>
<h2>작은 그림 클릭 => 큰 그림</h2>
<a href="../images/flower_big3.jpg" target="_blank">
<img src="../images/flower_small1.jpg" alt="">
</a><br>
<h2>그림 클릭 => 문서</h2>
<a href="id.html" target="_blank">
<img src="../images/2.jpg" alt="">
</a>
<h2>그림을 클릭하면 => 네이버 웹사이트 </h2>
<a href="https://www.naver.com" target="_blank">
<img src="../images/3.jpg" alt="">
</a>
<h2>구글 지도</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.9395225060075!2d126.94259877499258!3d37.55648862470553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca150a056cc85%3A0x3e69b34abbd6445c!2z7KSR7JWZ7KCV67O07LKY66as7ZWZ7JuQL-ykkeyVmeygleuztOq4sOyIoOyduOyerOqwnOuwnOybkA!5e0!3m2!1sko!2skr!4v1740548484572!5m2!1sko!2skr" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<hr>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.9395225060075!2d126.94259877499258!3d37.55648862470553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca150a056cc85%3A0x3e69b34abbd6445c!2z7KSR7JWZ7KCV67O07LKY66as7ZWZ7JuQL-ykkeyVmeygleuztOq4sOyIoOyduOyerOqwnOuwnOybkA!5e0!3m2!1sko!2skr!4v1740548484572!5m2!1sko!2skr" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<h2>유튜브 영상</h2>
<div class="youtube">
<iframe width="450" height="200" src="https://www.youtube.com/embed/wDfqXR_5yyQ?si=OgOQW5zTc8LQ5eYH&start=110" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</body>
</html>
7. 예제1
● base.css 파일
/*주의 사항 <style> ~ </style>을 적지 않음 */
*{
margin: 0;
padding: 0;
}
body,ul,ol,li,div,img,a,p,h1,h2,h3,h4,h5,h6,hr,
nav, header, footer, main, aside, section, span, b
br,table,thead,tbody,tfoot,tr,th,td{
margin: 0;
padding: 0;
}
html{
font-size: 9pt; /* 10px */
}
body{
width: 980px;
margin: 0 auto;
}
a, a:visited{
color: black;
text-decoration: none;
}
ul, ol, li{
list-style: none;
}
img{
border: 0;
}
table{
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
● musiem.html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박물관</title>
<!-- 외부 스타일시트 링크 -->
<link href="../css/base.css" rel="stylesheet" type="text/css" />
<style>
/* 1. 탑 네비게이션 */
.top_nav{ /* nav.top_nav */
margin-bottom: 20px;
text-align: center; /* 글자 가운데 정렬 */
}
.top_nav li{ /* .top_nav>ul>li */
display: inline-block;
}
.top_nav a{
display: block;
font-size: 1.5rem; /* rem:root(html)요소의 크기를 기준으로 설정
14px - 10.5pt, 16px - 12pt */
/* padding: 10px 9px; 위/아래 오른쪽/왼쪽 */
padding: 10px 9px 5px 4px; /* 위 오른쪽 아래쪽 왼쪽 */
}
.top_nav a:hover{ /* 마우스가 글자 위로 올라왔을 때 */
color: red;
}
/* 탑 배너 부분 */
#banner{
width: 100%;
margin-bottom: 40px;
}
#banner>img{
width: 100%;
height: 150px;
}
/* 방문 안내 */
.header{
width: 100%;
height: 50px;
line-height: 50px; /* 줄간격, 수직정렬 */
border-bottom: 1px solid rgb(196, 194, 194);
margin-bottom: 40px;
}
.header>h1{
font-size: 3rem;
font-weight: 900; /* 글자 굵기 */
}
/* 관람 안내 부분 */
.sub_content{
width: 100%;
margin-bottom: 40px;
}
.sub_content>h2{
font-size: 2.3rem;
margin-bottom: 10px;
}
div.box{
box-sizing: border-box;
margin-left: 20px;
width: 968px;
padding: 10px;
border: 1px solid rgb(129, 184, 48);
background-color:rgba(219, 245, 219, 0.731);
}
div.box li{
font-size: 1.5rem;
line-height: 30px; /* 줄간격 */
letter-spacing: 2px; /* 글자사이 간격 */
}
</style>
</head>
<body>
<!-- 탑 네비게이션 -->
<nav class="top_nav">
<!-- ul>li*6>a[href="#"] -->
<ul>
<li><a href="#">박물관 소개 |</a></li>
<li><a href="#">방문안내 |</a></li>
<li><a href="#">관람안내 |</a></li>
<li><a href="#">개인/단체 체험 |</a></li>
<li><a href="#">고객센터 |</a></li>
<li><a href="#">공지사항</a></li>
</ul>
</nav>
<!-- 탑 배너 부분 -->
<div id="banner"><img src="../images/그대걸음 신화.jpg"></div>
<!-- 방문 안내 -->
<section class="content">
<header class="header">
<h1> + 방문안내</h1>
</header>
<article class="sub_content">
<h2>1. 관람 안내</h2>
<div class="box">
<!-- ul>li*3 -->
<ul>
<li>월·화·목·금: 10:00 ~ 18:00</li>
<li>수·토: 10:00 ~ 21:00</li>
<li>일·공휴일: 10:00 ~ 19:00</li>
</ul>
</div>
</article>
<article class="sub_content">
<h2>2. 야간 개장</h2>
<div class="box">
<!-- ul>li*3 -->
<ul>
<li>매주 수·토: 18:00 ~ 21:00</li>
<li>※ 단, 어린이 박물관은 매월 마지막 주 수요일만 야간 개장<br>
(18:00 이후는 당일 선착순 입장, 18:00/19:30 300 명씩 2회차)
</li>
</ul>
</div>
</article>
<article class="sub_content">
<h2>3. 관람료 안내</h2>
<div class="box">
<!-- ul>li*3 -->
<ul>
<li>※ 무료<br>
상설전시관, 어린이 박물관, 무료 특별전, 상설 전시관은 관람권 없이 바로 입장합니다.
</li>
</ul>
</div>
</article>
<article class="sub_content">
<h2>4. 교통 안내</h2>
<div class="box">
<!-- ul>li*3 -->
<ul>
<li>지하철: 4호선 / 경의중앙선(문산·용문)</li>
<li>버스: 502번 이수교-서빙고-서빙고역-국립중앙박물관</li>
<li>자기차랑: 1호선 용산역방향 우회전. 이촌역에서 용산가족공원 방향 10M 좌회전</li>
</ul>
</div>
</article>
</section>
</body>
</html>
8. 블록 나누기 태그 및 시멘틱 태그
a. 헤더를 만드는 태그 : <header> ~ </header>
b. 네비게이션 메뉴 만드는 태그 : <nav> ~ </nav>
c. 해당 내용만 보아도 독립적으로 구성이 되는 부분을 만드는 태그 <article> ~ </article>
d. 테마를 가진 그룹을 만드는 태그 : <section> ~ </section>
e. 페이지의 메인 콘텐츠 부분을 만드는 태그 : <main> ~ </main>
f. 추가 정보를 나타내는 태그 : <aside> ~ </aside>
g. 페이지 하부의 푸터 부분을 만드는 태그 : <footer> ~ </footer>
h. 블록 요소를 만드는 태그 : <div> ~ </div>
i. 인라인 블록 요소를 만드는 태그 : <span> ~ </span>
9. 입력양식(폼) 태그
<form action="" method="" name="" target="">
</form>
action= "": 폼을 전송할 서버 쪽 목적지(서버 쪽 스크립트 파일), onsubmit 이벤트를 이용해 스크립트로 처리할 수도 있음
method="get" :주소에 데이터를 직접 입력하여 전속, 256 ~ 4,096 바이트 정보만 서버로 전송
method="post": 별도의 방법을 사용해 입력 내용을 서버의 해당 주소로 전송
name="": 한 페이지에 여러 폼을 사용할 경우 구분하기 위해 사용, 자바스크립트로 홈을 제어할 때 사용할 폼의 이름을 지정
target="" : 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
required : 필수 입력
readonly : 읽기 전용
autocomplete="off" : 자동 완성 기능 끄기
autocomplete="on" : 자동 완성 기능 설정, 기본값
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin:0;
padding:0;
}
ul {
list-style-type:none;
}
body {
font-family:"맑은 고딕", "돋움";
font-size:12px;
color:444444;
}
#login_box {
width:220px;
height:120px;
border:solid 1px #bbbbbb;
border-radius:15px;
margin:10px 0 0 10px;
padding:10px 0 0 15px;
}
h2 {
font-family:"Arial";
margin-bottom:10px;
}
#login_box input {
width:100px;
height:18px;
}
#id_pass, #login_btn {
display:inline-block;
vertical-align:top;
}
#id_pass span {
display: inline-block;
width:20px;
}
#pass {
margin-top:3px;
}
#login_btn button {
margin-left:5px;
padding:12px;
border-radius:5px;
}
#btns {
margin:12px 0 0 0;
text-decoration:underline;
}
#btns li {
margin-left:10px;
display:inline;
}
</style>
</head>
<body>
<form>
<div id="login_box">
<h2>Member Login</h2>
<ul id="input_button">
<li id="id_pass">
<ul>
<li>
<span>ID</span>
<input type="text">
</li> <!-- id -->
<li id="pass">
<span>PW</span>
<input type="password">
</li> <!-- pass -->
</ul>
</li>
<li id="login_btn">
<button>로그인</button>
</li>
</ul>
<ul id="btns">
<li>회원 가입</li>
<li>아이디/비밀번호 찾기</li>
</ul>
</div> <!-- login_box -->
</form>
</body>
</html>
10. 테이블 태그
/*주의 사항 <style> ~ </style>을 적지 않음 */
*{
margin: 0;
padding: 0;
}
body,ul,ol,li,div,img,a,p,h1,h2,h3,h4,h5,h6,hr,
nav, header, footer, main, aside, section, span, b
br,table,thead,tbody,tfoot,tr,th,td{
margin: 0;
padding: 0;
}
html{
font-size: 9pt; /* 10px */
}
body{
width: 980px;
margin: 0 auto;
}
a, a:visited{
color: black;
text-decoration: none;
}
ul, ol, li{
list-style: none;
}
img{
border: 0;
}
table{
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블</title>
<link href="../css/base.css" rel="stylesheet" type="text/css" />
<style>
tr{
height: 60px;
}
/* 짝수 줄 */
tr:nth-child(2n){
/* background-color: yellow; */
}
/* 홀수 줄 */
tr:nth-child(2n+1){
/* background-color: pink; */
}
th{
background-color: aquamarine;
}
td{
width: 150px;
text-align: center;
}
/* 태그명:nth-child(2n) : 짝수
태그명:nth-child(2n+1) :홀수
태그명:nth-child(번호) : 해당 번호번째 자식
태그명:nth-child(n+2) : 2번째 자식 이후로
태그명:nth-child(-n+2) : 2번째 자식까지 */
/* td:nth-child(2){
width: 100px;
background-color: bisque;
} */
td.aa{
width: 100px;
background-color: bisque;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>용도</th> <!-- 제목 -->
<th class="aa">중량</th>
<th>개수</th>
<th>가격</th>
</tr> <!-- 줄 단위로 -->
<!-- tr*4>td*4 -->
<tr>
<td rowspan="2">선물용</td>
<td class="aa">3kg</td>
<td>11-16과</td>
<td>35,000</td>
</tr>
<tr>
<!-- <td>선물용</td> -->
<td class="aa">5kg</td>
<td >18-26과</td>
<td>52,000</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td class="aa">3kg</td>
<td>11-16과</td>
<td>30,000</td>
</tr>
<tr>
<!-- <td>가정용</td> -->
<td class="aa">5kg</td>
<td>18-26과</td>
<td>47,000</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
<style>
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>방이름</th>
<th>대상</th>
<th>크기</th>
<th>가격격</th>
</tr>
</thead>
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td rowspan="4"> 1인 20,000원</td>
</tr>
<tr>
<td rowspan="2">동백방</td>
<td>동심 도미토리</td>
</tr>
<tr>
<td>가족 1팀</td>
</tr>
<tr>
<td>천혜향방</td>
<td>-</td>
<td>2인실</td>
</tr>
<!-- <tr>
<td colspan="4">바깥채 전체를 렌트합니다.</td>
</tr> -->
</tbody>
<tfoot>
<tr>
<td colspan="4">바깥채 전체를 렌트합니다.</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
<style>
td{
text-align: center;
}
/* thead>tr, tfoot>tr{
background-color: bisque;
} */
tr{
height: 50px;
}
.row_color{
background-color: bisque;
}
th:nth-child(1){
width: 100px;
}
th:nth-child(2){
width: 200px;
}
th:nth-child(3){
width: 80px;
}
th:nth-child(4){
width: 150px;
}
</style>
</head>
<body>
<table>
<thead>
<tr class="row_color">
<th>방이름</th>
<th>대상</th>
<th>크기</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td rowspan="4"> 1인 20,000원</td>
</tr>
<tr>
<td rowspan="2">동백방</td>
<td>동심 도미토리</td>
</tr>
<tr>
<td>가족 1팀</td>
</tr>
<tr>
<td>천혜향방</td>
<td>--</td>
<td>2인실</td>
</tr>
<!-- <tr>
<td colspan="4">바깥채 전체를 렌트합니다.</td>
</tr> -->
</tbody>
<tfoot>
<tr class="row_color">
<td colspan="4">바깥채 전체를 렌트합니다.</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="post" name="membership">
<table border="1" class="mem_table">
<tbody>
<tr class="mem_row">
<td colspan="2" class="mem_title">
<h2>회원가입 양식</h2>
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="mem_id">아이디</label>
</td>
<td class="content">
<input type="text" name="id" id="mem_id" required> <!-- 필수입력-->
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="password1">비밀번호</label>
</td>
<td class="content">
<input type="password" name="password1" id="password1">
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="password2">비밀번호 확인</label>
</td>
<td class="content">
<input type="password" name="password2" id="password2">
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="name">이름</label>
</td>
<td class="content">
<input type="text" name="name" id="name">
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="gender">성별</label>
</td>
<td class="content">
<input type="radio" class="radio_text" id="gender" name="genger" value="m">남자
<input type="radio" class="radio_text" id="gender" name="genger" value="f">여자
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="phone1">휴대전화</label>
</td>
<td class="content">
<select name="phone1" id="phone1">
<option value="010">010</option>
<option value="02">02</option>
<option value="031">031</option>
</select> - <input type="text" name="phone2"> -
<input type="text" name="phone3">
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="email">이메일</label>
</td>
<td class="content">
<input type="email" name="email" id="email">
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="hobby">취미</label>
</td>
<td class="content">
<input type="checkbox" class="checkbox_text" name="hobby" value="h1">음악감상
<input type="checkbox" class="checkbox_text" name="hobby" value="h2">독서
<input type="checkbox" class="checkbox_text" name="hobby" value="h3">등산
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="introduce">자기소개</label>
</td>
<td class="content">
<textarea name="introduce" id="introduce"></textarea>
</td>
</tr>
<tr class="mem_row">
<td class="subject">
<label for="file_upload">파일첨부</label>
</td>
<td class="content">
<input type="file" name="file_upload" id="file_upload" value="파일 선택">
<span class="sub_fileupload">* 2MB까지 가능</span>
</td>
</tr>
<tr class="mem_row">
<td class="content_submit" colspan="2">
<input type="submit" value="가입하기">
<input type="reset" value="새로고침">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
/*주의 사항 <style> ~ </style>을 적지 않음 */
*{
margin: 0;
padding: 0;
}
body,ul,ol,li,div,img,a,p,h1,h2,h3,h4,h5,h6,hr,
nav, header, footer, main, aside, section, span, b
br,table,thead,tbody,tfoot,tr,th,td{
margin: 0;
padding: 0;
}
html{
font-size: 9pt; /* 10px */
}
body{
width: 980px;
margin: 0 auto;
}
a, a:visited{
color: black;
text-decoration: none;
}
ul, ol, li{
list-style: none;
}
img{
border: 0;
}
table{
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입양식</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
<style>
/* thead 부분 */
/* thead>tr>th */
thead th{
height: 60px;
font-size: 2.5rem;
border-top: none;
border-left: none;
border-right: none;
}
/* tbody 부분 */
/* .클래스명{}
#아이디명{}
태그명{}
*/
.title{
width: 160px;
font-size: 1.5rem;
background-color: rgba(160, 235, 200,0.7);
}
tbody>tr{
height: 48px;
}
/* tbody>tr>td */
tbody td{
width: 500px;
padding-left: 10px;
}
/* 아이디, 비밀번호, 비밀번호 확인, 이름,
이메일 등의 input 태그 */
.input1{
width: 260px;
height: 30px;
}
/* 버튼 부분 */
.btn{
width: 100px;
height: 30px;
background-color: cornsilk;
border-radius: 5px; /* 모서리 부분 둥글리기 */
table{
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}order: 1px solid rgba(134, 112, 84, 0.839);
font-size: 1.2rem;
font-weight: 600; /* 진하게 */
letter-spacing: 3px; /* 자간:글자사이 간격 */
}
/* 성별 */
.input2{
width: 20px;
height: 20px;
}
span{
font-size: 1.6rem;
margin-right: 10px;
}
/* 휴대폰 */
.phone{
width: 150px;
height: 30px;
}
/* 상세 주소 */
.addr{
width: 400px;
height: 30px;
}
/* tfoot 부분 */
tfoot>tr{
height: 50px;
background-color: beige;
text-align: center;
}
/* 아래쪽 테두리 부분 없애기 */
/* tfoot td{
border-bottom: none;
border-left: none;
border-right: none;
} */
</style>
</head>
<body>
<form action="" method="post" name="member">
<table>
<!-- 제목 : 회원 가입 양식 제목 -->
<thead>
<tr> <!-- 줄(행, 한 행, table row) -->
<th colspan="2">회원 가입 양식</th> <!-- table header, 테이블 제목 -->
</tr>
</thead>
<!-- 회원가입 양식 만들기 -->
<tbody>
<!-- 아이디 -->
<tr>
<th class="title">아이디</th>
<td>
<input type="text" name="id" class="input1">
<button type="button" class="btn">중복체크</button>
</td>
</tr>
<!-- 비밀번호 -->
<tr>
<th class="title">비밀번호</th>
<td>
<input type="password" name="pass" class="input1">
</td>
</tr>
<!-- 비밀번호 확인 -->
<tr>
<th class="title">비밀번호 확인</th>
<td>
<input type="password" name="pass2" class="input1">
</td>
</tr>
<!-- 이름 -->
<tr>
<th class="title">이름</th>
<td>
<input type="text" name="name" class="input1">
</td>
</tr>
<!-- 성별 -->
<tr>
<th class="title">성별</th>
<td>
<input type="radio" name="name" value="m" class="input2">
<span>남</span>
<input type="radio" name="name" value="f" class="input2">
<span>여</span>
</td>
</tr>
<!-- 휴대폰 -->
<tr>
<th class="title">휴대폰</th>
<td>
<input type="text" name="phone1" class="phone"> -
<input type="text" name="phone2" class="phone"> -
<input type="text" name="phone3" class="phone">
</td>
</tr>
<!-- 우편번호 -->
<tr>
<th class="title">우편번호</th>
<td>
<button type="button" class="btn">우편번호</button>
<input type="text" name="post" class="phone">
</td>
</tr>
<!-- 주소 -->
<tr>
<th class="title">주소</th>
<td>
<input type="text" name="addr1" class="addr">
</td>
</tr>
<!-- 상세 주소 -->
<tr>
<th class="title">상세 주소</th>
<td>
<input type="text" name="addr2" class="addr">
</td>
</tr>
</tbody>
<!-- 가입하기, 새로작성하기 버튼을 넣을 곳-->
<tfoot>
<tr>
<td colspan="2">
<input type="submit" value="가입하기" class="btn">
<input type="reset" value="새로작성" class="btn">
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
<style>
ul{
width: 200px;
/* padding: 10px; */
border: 1px solid black;
}
li{
height: 40px;
margin: 10px;
line-height: 40px; /* 수직 가운데 정렬 , 숫자 조정 */
border-bottom: 1px solid rgb(146, 144, 144);
}
/* 첫번째 줄의 색상 검정, 여백없애기, 글자 가운데 정렬 */
/* li:first-child */
li:nth-child(1){
background-color: black;
margin: 0;
height: 60px;
line-height: 60px;
text-align: center;
}
/* 첫번째 줄의 글자색과 글자크기 */
li:nth-child(1) > a{
color: white;
font-size: 1.8rem;
}
/* 마지막 줄의 밑줄 없애기 */
/* li:nth-child(8) */
li:last-child{
border-bottom: none;
}
a{
display: block;
width: 200px;
/* background-color: aqua; 지울부분 */
}
/* 마우스가 올라오면 글자 진하게(굵게) */
a:hover{
font-weight: 900;
}
/* 관람안내 첫번째 것 마우스 올라오면 굵게 처리하는 것 없애기 */
li:nth-child(1) > a:hover{
font-weight: normal;
}
</style>
</head>
<body>
<ul>
<li><a href="#">관람안내</a></li>
<li><a href="#">관람코스</a></li>
<li><a href="#">관람시간</a></li>
<li><a href="#">관람요금</a></li>
<li><a href="#">관람규칙</a></li>
<li><a href="#">한복무료관람 가이드라인</a></li>
<li><a href="#">해설안내</a></li>
<li><a href="#">오시는 길</a></li>
</ul>
</body>
</html>
'Front-End Programming > HTML5' 카테고리의 다른 글
| 예제글 (0) | 2025.03.25 |
|---|---|
| html_css 정리 (0) | 2025.03.24 |
| HTML, CSS, JavaScript, 절대/상대 URL 용어 정의 (0) | 2025.03.16 |
| 웹 프로그래밍의 구조 (1) | 2025.03.16 |
| Emmet (0) | 2025.03.16 |
댓글