[JSP & Servlet] HTML기초
by 무작정 개발2022.02.08(32일 차)
오늘부터 본격적으로 web에 대해 학습을 시작한다. 2일 동안 html&css&javascript를 배우고 jsp를 배운다.
오늘의 수업 내용
HTML(Hyper Text Markup Language) & CSS
HTML & CSS 이란?
먼저 HTML은 Web(웹) 상의 문서를 어떻게 보여줄 것인가를 다루는 Markup 언어이며, 쉽게 말하면 구역과 텍스트를 나타내는 코드이다. CSS는 잡은 구역을 꾸며주는 것이라 말할 수 있다. HTML 내 style 속성으로 꾸밀 수 있지만, CSS파일을 따로 만들어 HTML 코드 내에 CSS파일을 불러오면 쉽게 HTML을 꾸밀 수 있다.
Java로 보면 메서드를 만들어놓고 메서드를 호출해서 사용하는 것이랑 비슷한 느낌이다.
HTML의 기본 구조
<HTML>
<HEAD>
<TITLE>웹 제목</TITLE>
</HEAD>
<BODY>
웹 문서의 내용
</BODY>
</HTML>
HTML 태그
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML첫시간</title>
</head>
<body>
<h3>HTML첫시간</h3>
<font size="1">font 크기 1</font><br/>
<font size="2">font 크기 2</font><br/>
<font size="3">font 크기 3</font><br/>
font 크기 3<br/>
<font size="7" color="#5AAEFF" face="궁서체">font 크기 7</font>
<hr color="red" size="3" width="50%" align="left"/> <!-- 빨간 선 색,두께, 선위치 -->
네이버<br/>
<u>네이버</u><br/>
<i>네이버</i><br/>
<ul type="square">
<li>배 수 지</li> <!-- 띄어쓰기는 1칸이 최대이다. 3칸을 띄어도 1칸으로 인식 -->
<li>유 인 나</li> <!-- 1칸 이상 띄고 싶으면 를써서 칸 수만큼 쓰기 -->
<li>전 지 현</li>
</ul>
<html></html>은 이렇게 사용한다<br/>
<!-- 주석 -->
<img alt="그림없음" src="./image/070826_06_02.jpg"/></br>
<img alt="야후" src="./image/야후약도.gif"/></br>
<hr color="red" size="3" width="50%" align="left"/>
<img src="./image/1_ABT_M100(1).jpg" align="left">
블루투스(Bluetooth)는 휴대폰, 노트북, 이어폰·헤드폰 등의 휴대기기를
서로 연결해 정보를 교환하는 근거리 무선 기술 표준을 뜻한다.
주로 10미터 안팎의 초단거리에서 저전력 무선 연결이 필요할 때 쓰인다.
예를 들어 블루투스 헤드셋을 사용하면 거추장스러운 케이블 없이도
주머니 속의 MP3플레이어의 음악을 들을 수 있다. 블루투스
통신기술은 1994년 휴대폰 공급업체인 에릭슨(Ericsson)이
시작한 무선 기술 연구를 바탕으로, 1998년 에릭슨, 노키아,
IBM, 도시바, 인텔 등으로 구성된 ‘블루투스 SIG(Special Interest Group)’
를 통해 본격적으로 개발됐다. 이후 블루투스 SIG 회원은 급속도로 늘어나
2010년 말 기준 전세계 회원사가 13,000여 개에 이른다.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<hr color="red" size="3" width="50%" align="left"/>
<img alt="" src="./image/m0828-1-19031.jpg"><br/>
<img alt="" src="./image/m0828-1-19031.jpg" width="250" height="105"/><br/>
<a href="https://m.naver.com">네이버 모바일</a><br/>
<a href="../index.jsp">메인창</a>
<img alt="" src="http://localhost:8080/study/html1/image/m0828-1-19031.jpg"/><br/>
<hr color="red" size="3" width="50%" align="left"/>
<table border="1" width="600" height="300"
cellpadding="3" cellspacing="0" align="center">
<tr align="center" height="10">
<td>1</td><td>2</td>3<td rowspan="2"></td>
</tr>
<tr>
<td align="right" rowspan="2">A</td><td>B</td>
</tr>
<tr>
<td width="260" colspan="2" align="center">
<img alt="" src="./image/m0828-1-19031.jpg"
width="150" height="75"/></td>
</tr>
</table>
<hr color="red" size="3" width="50%" align="left"/>
<!-- 테이블은 중첩이 가능 -->
<table border="1" width="600" cellpadding="3" cellspacing="0">
<tr align="center" height="50">
<td>화면 상단부분</td>
</tr>
<tr>
<td>
<table border="0" height="150">
<tr align="center">
<td width="150">화면 중간 왼쪽</td>
<td width="300">화면 중간 중간</td>
<td width="150">화면 중간 오른쪽</td>
</tr>
</table>
</td>
</tr>
<tr align="center" height="50">
<td>화면 하단부분</td>
</tr>
</table>
</body>
</html>
대충 이런 느낌이다. HTML 태그는 구글링을 하면 쉽게 찾을 수 있다.
자세한 실습 파일은 Git에 업로드
https://github.com/chaehyuenwoo/HTML_CSS/tree/master/WebContent/html1
GitHub - chaehyuenwoo/HTML_CSS: HTML/CSS 기초공부
HTML/CSS 기초공부. Contribute to chaehyuenwoo/HTML_CSS development by creating an account on GitHub.
github.com
HTML 4 vs HTML 5
HTML도 버전이 있다. 두 버전은 지원되는 태그와 기능이 다르고, HTML 5가 더 많은 기능을 지원하지만 HTML을 이용해서 전체적인 윤곽만 만들고 내부적인 코딩은 거의 안 한다. 이유는 크롬, 익스플로러, 파이어폭스, 사파리 등 모두 지원되게 만들어야 하기 때문이다. 다른 익스플로러에는 HTML5가 동작은 안 하는 경우가 있다. 하지만 요즘은 대부분에서 작동이 되긴 한다.
'Back-End > JSP & Struts & JDBC' 카테고리의 다른 글
| [JSP & Servlet] JSP기초, get 방식, post 방식 (0) | 2022.02.10 |
|---|---|
| [JSP & Servlet] 자바스크립트(JavaScript)기초 (0) | 2022.02.09 |
| [JSP & Servlet] 톰캣(Apache Tomcat) 설치 & JSP 초기 세팅 (0) | 2022.02.07 |
| [JDBC] PreparedStatement문, CallableStatement, 성적 입력 프로그램 만들기 (0) | 2022.02.07 |
| [JDBC] 초기 설정, Eclipse랑 오라클DB 연동하기 (0) | 2022.02.04 |
블로그의 정보
무작정 개발
무작정 개발