HTML : 기본 태그
jsp 파일 예시
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*"%>
<%//자바 코딩위치
List<String> list = new ArrayList<String>();
list.add("kimdoodoo");
list.add("parkpoopoo");
list.add("jungjoojoo");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<%
for(String name:list){
%>
<li><%=name %></li>
<%
}
%>
</ul>
</body>
</html>
브라우저는 1994년에 처음 등장했다.
사용자 중심의 Web2.0에서 semantic(의미론적인) tag가 추가되면서 Web3.0이 되었다.
*Semantic Tag : 검색하기 쉽게 만들어 준다. 태그의 의미를 알아보기 쉽게 제작하도록 해 주었음.
HTML은 추상적인 태그명을 가지고 있었으나 지금의 Semantic Tag로 발전해 왔다.
(<object> <video> 와 같이... 태그를 보았을 때 어떤 역할을 할 수 있을지 바로 추측되도록)
톰캣이 jsp를 html로 변환해서 보내 준다.
브라우저가 출력할 수 있는건 html과 xml뿐... → html로 변역해줘야함.
WAS : Web Application Server = Tomcat
웹 동작
→ 웹 서버(서버) : 요청받은 파일을 찾아서 전송해 준다(응답)
→ 브라우저(클라이언트) → 요청(파일) → 서버와 연결되는 부분(주소창)
서버에서 실행하는 프로그램 = 서버 프로그램 → JSP, Spring, Spring-Boot, Oracle, Java
클라이언트에서 실행되는 프로그램 = 클라이언트 프로그램 → HTML, CSS, JavaScript → Front
HTML : 브라우저에서 실행되는 언어.(ML : MarkupLanguage)
마크업 언어는 태그와 속성으로 구성된 언어를 뜻한다.(XML*,WML,HDML...)
HTML은 고정적이기때문에 태그가 지정되어 있고, XML은 가변형이고 모든 정의가 사용자 정의다.
CSS는 화면을 디자인할 때 사용된다.
JavaScript는 브라우저에서 동적인 부분을 구현한다.
HTML5 주요 기능
HTML 주요 구성요소
HTML5 : 웹 페이지 구성
CSS3 : 스타일 적용(화면 디자인 등)
자바스크립트 ES6 : 클라이언트/사용자 반응 처리 → 이 3개가 웹 표준!
HTML : HyperText Markup Language
HTML4에 기타 기능이 추가되었음.
- 멀티미디어(<video>, <audio>)
- 그래픽 기능(<canvas>)
- CSS3 요소(회전 등)
- JavaScript(스레드, DB연동...)
- 시멘텍 태그<header>, <nav>, <footer>, <section>, <aside>... 등장
예전에는 위같은 태그들을 다 <div> 태그 하나로 처리해 왔었음.
HTML 용어
1. 태그
여는 태그 : <태그명>
닫는 태그 : </태그명>
독립 태그 : <태그명/> ex. <p>, <br>, <hr>
-> 여는 태그와 닫는 태그가 함께 쌍으로 만들어진다.
화면에 출력할 데이터는 <태그명>출력할 데이터</태그명>
또는 link, img, form과 같은 태그의 경우 <속성="출력할 데이터"> 과 같이 출력한다.
태그는 소문자로만 사용한다.
*** 문자와 관련
<h> : heading, 제목을 줄 때 사용
<h1> ~ <h6> 까지 있다. 자동으로 <br>(줄바꿈)과 <b>(볼드체)를 포함하고 있다.
<b> : bold, <strong> : 강조, <i> : 이텔릭, <mark> : 형광펜칠, <sup> : 윗첨자, <sub> : 아래첨자
간격띄우기
*** 화면 이동
*<a> : 링크 태그. 내가 원하는 파일로 이동하게 한다.
<form> :
<a href="이동할 URL주소">문자열</a> <!-- inline속성 -->*** 이미지
<img> : 이미지 출력
*** 라인선
<hr> : horizontal ruler, 수평선을 그린다. (독립 태그)
*** 입력란
<input type=""> : 각종 입력
type="text", "password", "file" , "button", "radio", "checkbox", "submit","reset", "image","hidden" ←4버전
/→5버전 "number" , "date" 등
<textarea> : 여러 줄 입력
<select> : 드롭다운 메뉴
*** 단락 / 다음 줄
<p> : 단락을 나눌 때 사용한다. (독립 태그)
<br> : 다음 줄을 출력할 때 사용한다. (독립 태그)
*** 화면 분할
<span> : 가로분할
<div> : 세로분할
2. 속성
각 태그별로 디폴트 속성이 정해져 있다.
block : 한 줄 전체를 차지한다. (h태그 등)
inline : 옆으로 출력해 나간다.(a태그 등)
물론 별도로 display 스타일을 변경해 주면 조정이 가능하다!
<!DOCTYPE html> <!-- HTML5 문서를 알려주는 태그 / 첫줄에 와야 함 -->
<html>
<head>
<!-- 설정 파일이 들어감 / 화면 출력부 아님 -->
<meta charset="UTF-8">
<title>제목을 변경할 수 있습니다</title>
<style type="text/css">
/* h1{
background-color:green;
color:red;
text-align:center;
} */
</style>
<script type="text/javascript">
function send(){
alert("Hello HTML5 >.<");
}
</script>
</head>
<body>
<!-- 브라우저 화면 출력하는 부분 -->
<!-- Heading 제목(<h1>~<h6>) -->
<h1 onclick="send()">Hello <mark>HTML5</mark></h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<hr>
기후위기. 막연한 이야기지만 어쩌면 이미 찾아온 문제다. 5월부터 30도가 넘는 날씨를 만나보거나,<br>
1월이나 2월부터 꽃이 피는 등의 상황은 이제 그렇게까지 놀랍지도 않은 일이다. <br>
이런 상황이 점차 익숙해질수록 몇몇 사람들과 기업은 다양한 방법으로 이 <mark>‘기후위기 문제’</mark>를 널리 알리기 위한 목소리를 냈다.<br>
<blockquote>직접적인 캠페인이나 기부 외에도, 자신들의 상품이나 창작 활동 등 다양한 간접적 행동을 통해서 말이다.</blockquote><br>
게임 또한 메시지를 전달하는 수단으로 활발히 사용되는 창작물 중 하나다. <p>
좁게는 유저가 이벤트를 진행하며 모은 포인트로 기부를 진행하거나,<sub style="color:blue">HMM</sub> <br>
나무를 성장시키면 <b>한 그루의 나무를 기증</b>하는 <i>직접적 영향을 끼치는 캠페인<sup style="color:red">WOW!</sup></i>부터, 넓게는 게임 자체에 메시지를 넣는 것까지 말이다.<br>
<marquee><a href="https://www.gamemeca.com/view.php?gid=1682097">출처 : https://www.gamemeca.com/view.php?gid=1682097</a></marquee>
<hr>
<a href="이동할 URL주소">문자열</a>
<a href="http://naver.com">naver</a>
<a href="http://daum.net" target="_blank">daum</a>
<!-- target="_blank"하면 새 창에서 띄워준다. -->
<br>
<!-- b,i,small, sub, sup, strong -->
</body>
</html>
Hello HTML5
h2
h3
h4
h5
h6
기후위기. 막연한 이야기지만 어쩌면 이미 찾아온 문제다. 5월부터 30도가 넘는 날씨를 만나보거나,
1월이나 2월부터 꽃이 피는 등의 상황은 이제 그렇게까지 놀랍지도 않은 일이다.
이런 상황이 점차 익숙해질수록 몇몇 사람들과 기업은 다양한 방법으로 이 ‘기후위기 문제’를 널리 알리기 위한 목소리를 냈다.
직접적인 캠페인이나 기부 외에도, 자신들의 상품이나 창작 활동 등 다양한 간접적 행동을 통해서 말이다.
게임 또한 메시지를 전달하는 수단으로 활발히 사용되는 창작물 중 하나다.
좁게는 유저가 이벤트를 진행하며 모은 포인트로 기부를 진행하거나,HMM
나무를 성장시키면 한 그루의 나무를 기증하는 직접적 영향을 끼치는 캠페인WOW!부터, 넓게는 게임 자체에 메시지를 넣는 것까지 말이다.
문자열 naver daum
목록을 출력하는 태그
<ul> : 순서 없이 출력(unorder list) → 상단 GNB, 메뉴 만들 때 많이 사용한다
<ol> : 순서가 있는 출력(order list), 번호가 매겨짐!
ul 태그와 ol 태그 밑에는 반드시 <li> 태그가 와야 한다.
ul과 ol은 모양을 잡아줄 뿐 실제 데이터를 출력해 주는 부분은 <li>이다.
<dl> : 제목 지정이 가능한 출력(data list) → 상세 보기
dl 태그의 아래에는 <dt> data title, <dd> data description 이 들어간다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css"></style>
</head>
<body>
<ul>
<li>Java</li>
<li>Oracle</li>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>JSP</li>
<li>Spring</li>
</ul>
<hr>
<ol>
<li>Java</li>
<li>Oracle</li>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>JSP</li>
<li>Spring</li>
</ol>
<hr>
<dl>
<dt>Java</dt>
<dd>코딩 연습</dd>
<dt>Oracle</dt>
<dd>SQL 형식 공부</dd>
<dt>HTML/CSS</dt>
<dd>화면을 직접 제작</dd>
<dt>JSP</dt>
<dd>통신 (Client = Server)</dd>
</dl>
</body>
</html>
- Java
- Oracle
- HTML/CSS
- JavaScript
- JSP
- Spring
- Java
- Oracle
- HTML/CSS
- JavaScript
- JSP
- Spring
- Java
- 코딩 연습
- Oracle
- SQL 형식 공부
- HTML/CSS
- 화면을 직접 제작
- JSP
- 통신 (Client = Server)
<table> : 목록 출력
<tr> table row , <th> table header, <td> table data
CSS 적용의 용이함을 위해 table보다는 div 태그를 많이 사용한다.
table과 관련된 태그들의 속성
table
: width, height, background(image, color), cellspacing, cellpadding
tr
: bgcolor, height
td
: width, align(left, center, right), valign(top, middle, bottom)
th
: bold(한 줄 문자열이기 때문에 신축성이 있음)
그 외 태그들의 속성
img
: src, width, height, title(풍선도움말)
width=100% 지정하면 height는 자동 지정된다.
embed(동영상 실행)
: src, width, height
iframe(동영상 또는 다른 HTML 파일을 첨부-shadow박스,white박스 등)
: src, width, height
'부트캠프(END) > Web' 카테고리의 다른 글
| CSS : 구조적 선택자 (0) | 2022.07.08 |
|---|---|
| CSS : 속성, 선택자 (0) | 2022.07.07 |
| HTML : img, input 태그 (0) | 2022.07.06 |
