HTML & CSS 2일차.
2021. 9. 15. 16:38ㆍFront End
시맨틱(Semantic)태그란?
시맨틱은 "의미론적인"이라는 뜻이다.
즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.
예를들어, <div>태그는 non-sementic태그라고 할 수 있고,
<table>,<article>등의 태그는 semantic태그라고 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<section>
<article>
<table border="1" summary="시맨틱 테이블 관련 요소 목록">
<caption>Semantic Table Tag</caption>
<thead>
<tr>
<th>태그 명칭</th>
<th>설명</th>
<th>사용 여부</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">참고 사이트 : http://www.w3.org/</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>thead</td>
<td>표 머리말(head) 부분의 그룹 태그</td>
<td>가능</td>
</tr>
<tr>
<td>tfoot</td>
<td>표 꼬리말(footer) 부분의 그룹 태그</td>
<td>가능</td>
</tr>
<tr>
<td>tbody</td>
<td>표 본문(body) 부분의 그룹 태그</td>
<td>가능</td>
</tr>
</tbody>
</table>
</article>
</section>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>이미지를 클릭하세요.</h3>
<a href="http://www.w3.org" target="_blank"><img src="html5.jpg"
alt="HTML5 Logo" title="W3C 홈페이지로 이동" border="2"
style="width: 100px; height: 110px"></a>
<a href="http://cafe.naver.com/go2web" target="_blank"><img
src="go2web.jpg" alt="go2web site" title="저자 홈페 이지로 이동" border="2"
style="width: 100px; height: 110px"></a>
<a href="http://en.wikipedia.org/wiki/Isaac_Newton" target="_blank"><img
src="newton.gif" alt="newton site" title="뉴턴 홈페이지로 이동" border="2"
style="width: 170px; height: 110px"></a>
</body>style="text-decoration: none;" : 텍스트를 꾸미지 않겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>이미지 기본 표현</h3>
<img src="html5.png" alt="이미지가 표시되지 않습니다.">
<h3>이미지에 설명 추가 & 오른쪽 정렬</h3>
<img src="html5.png" title="HTML5 로고 이미지" style="float:right">
<h3>이미지의 크기를 픽셀 단위로 조정</h3>
<img src="html5.png" style="width:50px;height:60px">
<h3>이미지의 크기를 % 단위로 조정</h3>
<img src="html5.png" width=50% height=40%
style="border: solid 1px red">
</body>get 방식으로 데이터 전송
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>GET 방식으로 데이터 전송</h2>
<form action="01_getdata.jsp" method="get">
<!-- 01_getdata로 전송,전송방식은 get -->
<!-- POST방식은 보안에 더 나음. -->
<p>
이름 : <input type="text" name="name">
<!-- 전달방식 = 텍스트 -->
</p>
<p>
전공 : <input type="text" name="major">
</p>
<p></p>
<input type="submit" value="전송"> <input type="reset"
value="다시작성">
<!-- 버튼은 form 안에 있어야함 -->
</form>
</body>
</html>입력부분
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String strName = request.getParameter("name");
//요청 내용 중에서(request) name 이라고 보낸 값이 있다면,
//받아서 문자열 변수에 저장.
String strMajor = request.getParameter("major");
out.println("이름 :" + strName + "<br/>");
out.println("학과 :" + strMajor + "<hr/>");
%>
웹 브라우저 URL 주소 입력 부분을 살펴보세요.
<!-- //받는URL/프로젝트명/파일명.jsp?보내는이름=값&보내는이름=값... -->
</body>
</html>
<!-- get방식은 간단하게 사용하기 좋지만, 보안에는 취약. -->출력부분
input tag 사용
sizd = 칸의 길이
placeholder = 안내 문구
required = 필수 입력.
textarea = 텍스트 입력 칸 만들기 rows=줄 cols=행 textarea는 닫는 태그도 필요.
filedset = 그룹지어줌 legend=그룹의 테두리에 넣을 글
radio, checkbox = 체크하는 창을 만듦 radio는 단일선택. checkbox는 다중선택 가능.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<h3>Button 태그 사용</h3>
<button type="button" onclick="alert('클릭-1사용')">클릭-1</button>
<!-- onclick = 클릭 했을때 이벤트 -->
<h3>input 태그 사용</h3>
<input type="button" onclick='alert("클릭-2 사용")' value="클릭-2">
<!-- 홑따옴표와 겹따옴표의 쌍을 잘 맞추어서 사용. -->
<h3>Image 버튼 사용</h3>
<button type="button" onclick="alert('클릭-3 사용')">
<img src="button.jpg">
</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<select name="subject">
<option value="0" >-</option>
<option value="1" >html5</option>
<option value="2" >javascript</option>
<option value="3" >jquery</option>
<option value="4" >css</option>
</select>
<p></p>
<input type="submit" value="제출"> <input type="reset" value="다시작성">
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>그룹별 선택 항목을 제공합니다.</h3>
<form>
<label>전공 분야를 선택하세요. <select name="major">
<optgroup label="computer">
<option>Software</option>
<option>Robot</option>
<option>System</option>
</optgroup>
<optgroup label="language">
<option selected>Korea</option>
<option>English</option>
<option>China</option>
<option>Germany</option>
</optgroup>
<optgroup label="business">
<option>Service</option>
<option>Education</option>
<option>Communication</option>
<option>Marketing</option>
</optgroup>
</select>
<p></p> <input type="submit" value="선택"> <input type="reset"
value="다시선택">
</label>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body style="background-color: #99ddff">
<form>
<h3>학습량 그래프</h3>
홍민성 :
<meter min="0" max="100" optimum="50" value="60">60 out of 100</meter>
<br> 송지효 :
<meter low="0.3" hign="0.5" value="0.22">22%</meter>
<br> 이민정 :
<meter low="0.25" high="0.75" optimum="0.8" value="0.2">20%</meter>
<p></p>
<h3>작업 진행율</h3>
초기 작업 :
<progress value="22" max="100" title="진행율">22%</progress>
<br> 중간 작업 :
<progress value="0.77" max="1">77%</progress>
<br> 다음 작업 :
<progress value="0.98" max="1">98%</progress>
<br>
</form>
</body>
</html>
CS3
-웹 페이지의 스타일과 내용적인 부분을 서로 분리해 놓은 서식을 스타일 시트라고 합니다.
이러한 스타일 시트를 이용하면 웹 페이지의 스타일을 편리하게 개발할 수 있습니다.
-HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 합니다.
이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어집니다.
이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS입니다.
CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있습니다.
또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워집니다.
이러한 외부 스타일 시트는 보통 확장자를 .css 파일로 저장합니다.
우선순위 : 인라인 > 내부 > 외부 > 기본
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 가상 클래스 */
a:link {
color: blue;
text-decoration: underline;
}
a:visited {
color: red;
}
a:hover {
text-decoration: overline;
}
a:active {
background-color: yellow;
}
div.d1 {
border: 1px dashed red;
width: 400px;
padding: 5px;
}
/* 가상 클래스 */
div.d1:hover {
background-color: yellow;
}
div.d2 {
border: 1px dashed green;
width: 400px;
padding: 5px;
}
/* 가상 클래스 */
div.d2:hover {
background-color: green;
}
</style>
</head>
<body>
<h2>Pseudo Class</h2>
<p>
<a href="http://www.w3.org" target="_blink">W3C 방문</a> : 마우스 이벤트에 따른
링크의 변화를 잘 보세요.
</p>
<div class="d1">
<h3>가상 클래스 1 영역</h3>
마우스 위치에 따른 박스의 스타일 변화를 보세요.
</div>
<div class="d2">
<h3>가상 클래스 2 영역</h3>
마우스 위치에 따른 박스의 스타일 변화를 보세요.
</div>
</body>
'Front End' 카테고리의 다른 글
| JavaScript 2. (0) | 2021.09.23 |
|---|---|
| Java Script 실습 예제 (0) | 2021.09.23 |
| JavaScript 1. (0) | 2021.09.16 |
| HTML & CSS 3일차. (0) | 2021.09.16 |
| HTML & CSS 1일차. (0) | 2021.09.14 |