어제 내용 복습
- HTML - 정적
- 웹프로그램 - 동적 - JSP(Servlet), ASP(ASP.NET), PHP
-> HTML 코드를 만들어낸다. (출력 : 서버에서 클라이언트 쪽으로 전송)
Java만 배울 때는 출력을 콘솔로 보냈는데 웹은 클라이언트 (웹브라우저, 요청한 쪽)으로 전송해서 출력한다.
<html> 구성 = 요소(Element) = 태그 = 객체
<head> - 설정 - CSS - <style>~</style>, JS<script>, META
<body> - 표시
태그 안에 <태그명 속성 [속성...] 이벤트처리 [이벤트처리...]>
JS의 속성들은 모두 소문자로 사용한다. ex)onclick
onclick="처리문; 처리문;" -> 자바에서 메서드에 해당하는 부분이고 JS에서는 함수.
return이 없는 함수와 있는 함수로 구분한다.
함수는 밖에 나와서 전역으로 사용할 수 있고, 객체 안에 들어가 있는 함수를 메서드라고 한다.
JS에서는 Function이라는 키워드를 많이 쓰기 때문에 함수라고 많이 설명 한다.
<span> text </span>웹페이지에서 스타일을 적용시키기 위한 영역을 지정할 때 사용되는 태그. 보통 많이 사용하는 태그
table 태그
<table>
<caption>
<thead> - <tr> - <th>,<td> - 실직적인 date 넣어서 사용한다.
<tbody> - <tr> - <th>,<td>
<tfooter> - <tr> - <th>,<td>
</table>- 속성
id(한개) - 여러개를 지정하면 맨 처음거에만 적용된다.
class(여러개)
-> css에서 선택 할 때 ex)tr: 태그,.tr: 클래스,#tr: id
onclick 이벤트는 모든 태그에 쓸 수 있다. 영역을 지정해서 사용할 수 있다.
-
선택 : 한개 또는 여러개 (선택 할 때
,를 이용한다.)
ex) 클래스를 한개만 지정<span class="red">빨강</span>
클래스를 여러개 지정<span class="red center">빨강</span>
->class="red" class="center"이렇게 사용하면 center로 덮어쓰기 된다.
그래서class="red center"처럼 blank를 사용해서 지정하면 된다. -
span태그 안에red클래스 선택 ->span.red
span태그 안에redid를 선택 ->span#red
table 안에 있는 th 태그 선택 -> table th 한칸 띄면 된다.
웹페이지에서 id 영역이 있을 때 중복으로
id라고 쓰면 안된다.
#login #id#body #id이런식으로 쓰면 웹표준에 맞지 않기 때문에
웹 표준에 맞지 않기 때문에 하나는#login #login_id#body #id이런식으로 다르게 써야 한다.
<div> <div class ="body"> div 태그 바로 아래 있는 body 클래스 선택
-> div > .body or div > div.body
box 가운데 정렬 CSS : margin : 0 auto
-> table의 width가 지정 되어 있어야 한다.
<div> - 한 줄 차지
오늘 수업 내용
이미지
작업 원본 파일의 위치
D:\dahee\workspace\web\html\src\main\webapp\text
브라우저에서 보여주는 위치 - 테스팅 서버 위치
D:\dahee\workspace\web\.metadata\.plugins\org.eclipse.wst.server.core\tmp2\wtpwebapps\html\text
1. http://localhost/text/image.html - 1차 요청
2. <img scr="url"> - 2차요청, 내 컴퓨터에 임시파일에 저장된다.
3. 이미지가 없는 경우는 404 오류가 뜬다. (엑박)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image</title>
<style type="text/css">
div{
width: 400px;
border: 3px solid #888;
border-radius: 10px; /* 모서리 둥글게 */
text-align: center;
padding: 5px;
}
div img {
width: 98%;
}
/* 마우스를 올렸을 때 */
div img:hover{
opacity: 0.5; /* 이미지 불투명하게 하기. 0불투명~1투명 */
cursor: pointer;
}
</style>
</head>
<body>
<!-- width를 설정하면 실제 사진 크기가 줄어드는게 아니라 보여지는것만 작게 보이는것이다. -->
<!-- 리스트에 미리보기로 보여질 이미지는 이미지 자체의 크기와 용량을 줄이는 것이 좋다. -->
<!-- 상품보기는 중간이미지, 글 상세보기를 봤을 때 원본이미지를 보이게 하면 된다. -->
<img alt="귀여운 강아지 두부" src="dubu.jpg" width="120px"> 강아지 이미지 입니다
<!-- 이미지는 텍스트 취급을 하기 때문에 이미지 바로 옆에 '강아지 이미지 입니다' 라는 텍스트가 나란히 나온다. -->
<div>
<!-- alt : 이미지가 안보일 때 대체되는 텍스트 -->
<img alt="귀여운 강아지 두부" src="dubu.jpg" class="listImge"> <!-- 나중에 list 이미로 쓸 때 -->
<div style="border: none;">
<!-- 테두리 없앰. 태그 안의 스타일이 우선 적용되고 그다음 head의 스타일이 적용된다.-->
<강아지 두부 입니다. 잘 부탁드립니다.>
</div>
</div>
</body>
</html>