스포츠마케터의 초보 개발자 도전기
HTML / CSS / JS/ jQuery study 01 본문
HTML 01_first_html
<!DOCTYPE html>
<!-- HTML (Hyper Text Markup Language)
웹페이지에서 다른페이지로 이동할 수 있는 기능을 가진 프론트앤드 언어-->
<html>
<!-- Ctrl+Shift+/ (주석 단축키)-->
<!-- <여는태그> 하고자하는 내용 </닫는태그> -->
<head>
<meta charset="UTF-8">
<title>나의 첫 HTML</title>
</head>
<body>
<!-- 웹 브라우저에 실제 표기될 내용을 작성하는 영역
엔터나, 한칸이상의 공백은 지원하지 않는다-->
안녕하세요
반갑습니다
</body>
</html>
HTML 02_heading
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>heading tag</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML_03_inline_block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 요소와 블록요소</title>
</head>
<body>
<!-- 블록 요소 : 태그의 너비가 브라우저의 너비를 모두 차지하는 형태 -->
<!-- 인라인 요소 : 태그의 너비가 안의 내용만큼만 설정되어 줄바꿈이 일어나지 않는 형태-->
<p><b>단락</b>을 정의하는 <strong>p태그</strong> 입니다. 반갑습니다.</p>
나는 요소가 없어.
그래서 아픔을 느낄리 없어. <p>나는 블록요소라고</p>
<p>개구쟁이 <i>뽀로로</i>장난꾸러기 <em>크롱</em> 우람한 포비 조그만 해리도 사이좋은 친구죠</p>
<!-- hr : 수평선 태크, 열기만해도되고, 닫은형태로 만들어도 됨-->
<hr>
<!-- a href : 링크-->
<!-- br :강제 개행-->
<a href="https://www.naver.com">네이버</a> <br>
<a href="ex002_heading.html">Heading태그</a> <br>
<!-- target : 새창으로 오픈-->
<a href="https://www.naver.com"
target="_blank">네이버</a> <br>
<!-- 임시 링크 #-->
<a href="#">#은 작업 중인 임시 링크</a>
</body>
</html>
HTML_04_img_tag
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMG TAG</title>
</head>
<body>
<!-- img scr 태그는 그림 삽입,
alt는 시각 장애인을 위한 음성낭독기가 그림 설명을 위한 텍스트
title은 툴팁으로 마우스 오버시 화면에 표시되는 텍스트-->
<img src="Image/background.jpg" alt="이미지1"/>
<img src="Image/float.jpg" alt="이미지2" title="타이틀 이미지"/>
</body>
</html>
HTML_05_ins_del
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>추가/삭제</title>
</head>
<body>
<h2>우리 백화점</h2>
정기세일 : <del>8.30 ~ 9.15</del> <br>
정기세일 변경 : <ins>9.01 ~ 9.10</ins>
<hr>
A<sub>2</sub>, b<sup>2</sup>, Sonic<sup>TM</sup>
</body>
</html>
HTML_06_entity
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>entity tag(code)</title>
</head>
<body>
<!-- entity tag : 특수문자를 표기하기 위한 수단
entitycode.com-->
Copyright©Korea. All right....<br>
You&Me<br>
사과의 가격 ₩2500<br>
안녕 하세요<br>
<br> : 강제개행 <br>
바나나 ½ 개<br>
</body>
</html>
HTML_07_abbr
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>abbr(축약어)</title>
</head>
<body>
<!--abbr(축약어)를 통해 마우스 오버시 툴팁으로 확인이 가능하며
음석 낭독기에서 음성으로 전환되어 표시된다-->
나 오늘 <abbr title="버스카드 충전"></abbr>뻐카충</abbr> 만땅으로 했는데 알고보니 <abbr title="엄마카드">엄카</abbr>였어. 완전 안습
</body>
</html>
HTML_08_list
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list(목록) tag</title>
</head>
<body>
<!--ul (Unordered list) : 공지사항 등 비 순서 목록-->
<!--ol (Ordered list) : 순위, 리서치 등의 순서 목록-->
<ul>
<li>공지사항1</li>
<li>공지사항2</li>
<li>공지사항3</li>
</ul>
<hr>
<ol>
<li>한국축구</li>
<li>비트코인</li>
<li>강아지</li>
</ol>
</body>
</html>
HTML_09_ul1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul</title>
</head>
<body>
<ul>
<li>Menu1</li>
<li><a href="#">Menu2</a></li>
<li><img src="image/float.jpg" alt="구름사진"></li>
</ul>
</body>
</html>
HTML_10_ul2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>커리(Curry)재료</h2>
<ul>
<li>카레가루 100g</li>
<li>닭가슴살 200g</li>
<li>감자 1개</li>
<li>양파1/2개</li>
<li>당근1/2개</li>
</ul>
<img src ="image/curry.jpg" alt="커리사진" width="150" height="100">
</body>
</html>
HTML_11_ul_depth1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>깊이가 있는 list</title>
</head>
<body>
<ul>
<li>
HTML5 (1단계)
<ul>
<li>멀티미디어</li>
<li>커뮤니티</li>
<li>
디바이스 (2단계)
<ul>
<li>3단계(이후는 같음)</li>
</ul>
</li>
</ul>
</li>
<li>
CSS
<ul>
<li>스타일시트</li>
<li>CSS menu</li>
</ul>
</li>
</ul>
<hr>
<ol>
<li>
OL head
<ol>
<li>header1</li>
<li>header2</li>
</ol>
</li>
<li>
OL foot
<ul>
<li>footer1</li>
<li>footer2</li>
</ul>
</li>
</ol>
</body>
</html>
HTML_12_ul_depth2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>깊이가 있는 ul</title>
</head>
<body>
<ul>
<li>
<a href="#">개인뱅킹</a>
<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>
</ul>
</li>
<li>
<a href="#">자산관리</a>
<ul>
<li><a href="#">나의지출</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">신규/해지</a></li>
<li><a href="#">공과금/법원</a></li>
</ul>
</li>
<li><a href="#">예금/신탁</a></li>
<li><a href="#">대출</a></li>
<li><a href="#">펀드</a></li>
<li><a href="#">외환</a></li>
</ul>
</body>
</html>
HTML_13_table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table border="1">
<tr>
<td>1행 1열</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td>1행 1열</td>
</tr>
<tr>
<td>2행 1열</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html>
HTML_14_colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>colspan</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" align="center">메뉴판</td>
</tr>
<td>짜장</td>
<td>짬뽕</td>
<tr>
</tr>
</table>
</body>
</html>
HTML_15_rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rowspan</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">메뉴</td>
<td>짜장</td>
</tr>
<tr>
<td>짬뽕</td>
</tr>
</table>
</body>
</html>
HTML_16_table_span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table span</title>
</head>
<body>
<h2>행열 합치기</h2>
<table border="1">
<tr>
<th colspan="3">공연요금</th>
</tr>
<tr>
<th>구분</th>
<th>S석</th>
<th>VIP</th>
</tr>
<tr>
<th>성인</th>
<td>40,000원</td>
<td>60,000원</td>
</tr>
<tr>
<th>청소년</th>
<td>30,000원</td>
<td>50,000원</td>
</tr>
<tr>
<th>소인</th>
<td colspan="2">미취학 아동 일반 요금의 50%</td>
</tr>
<tr>
<th rowspan="2">공연시간</th>
<td align="center">1회</td>
<td>13:00시 ~ 15:00시</td>
</tr>
<tr>
<td align="center">2회</td>
<td>17:00시 ~ 19:00시</td>
</tr>
</table>
</body>
</html>
HTML_17_normal_table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>일반적인 테이블</title>
</head>
<body>
<table border="1">
<caption>스마트폰과 태블릿PC</caption>
<tr>
<td>구분</td>
<td>태블릿PC</td>
<td>스마트폰</td>
</tr>
<tr>
<td>상반기 판매수</td>
<td>2만대</td>
<td>5만대</td>
</tr>
<tr>
<td>하반기 판매수</td>
<td>3만대</td>
<td>11만대</td>
</tr>
<tr>
<td>총 판매수</td>
<td>5만대</td>
<td>16만대</td>
</tr>
</table>
</body>
</html>
HTML_18_semantic_tag
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시맨틱 태그를 이용한 테이블</title>
</head>
<body>
<table border="1">
<!--시맨틱 태그 : 특정 태그의 의미를 브라우저에서 직접적으로 인지하여
목적을 갖고 실행되는 태그-->
<caption>
태블릿PC와 스마트폰
</caption>
<thead>
<tr>
<th>구분</th>
<th>태블릿</th>
<th>스마트폰</th>
</tr>
</thead>
<tfoot>
<tr>
<th>총 판매</th>
<td>5만대</td>
<td>16만대</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>상반기</th>
<td>2만대</td>
<td>5만대</td>
</tr>
<tr>
<th>하반기</th>
<td>3만대</td>
<td>11만대</td>
</tr>
</tbody>
</table>
</body>
</html>'develop > WEB' 카테고리의 다른 글
| HTML / CSS / JS/ jQuery study 05 (0) | 2024.05.17 |
|---|---|
| HTML / CSS / JS/ jQuery study 04 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 03 (0) | 2024.05.17 |
| HTML / CSS / JS/ jQuery study 02 (0) | 2024.05.17 |
| Apache Tomcat9.0 server + eclipse 설정 (0) | 2024.05.16 |
'develop/WEB' Related Articles
more
