<html>
구성 = 요소(Element) = 태그 = 객체
<head>
- 설정 - CSS - <style>~</style>
, JS<script>
, META
<body>
- 표시
태그 안에 <태그명 속성 [속성...] 이벤트처리 [이벤트처리...]>
JS의 속성들은 모두 소문자로 사용한다. ex)onclick
onclick="처리문; 처리문;"
-> 자바에서 메서드에 해당하는 부분이고 JS에서는 함수.
return이 없는 함수와 있는 함수로 구분한다.
함수는 밖에 나와서 전역으로 사용할 수 있고, 객체 안에 들어가 있는 함수를 메서드라고 한다.
JS에서는 Function
이라는 키워드를 많이 쓰기 때문에 함수라고 많이 설명 한다.
<span> text </span>
웹페이지에서 스타일을 적용시키기 위한 영역을 지정할 때 사용되는 태그. 보통 많이 사용하는 태그<table>
<caption>
<thead> - <tr> - <th>,<td> - 실직적인 date 넣어서 사용한다.
<tbody> - <tr> - <th>,<td>
<tfooter> - <tr> - <th>,<td>
</table>
id
(한개) - 여러개를 지정하면 맨 처음거에만 적용된다.class
(여러개)tr
: 태그, .tr
: 클래스, #tr
: idonclick
이벤트는 모든 태그에 쓸 수 있다. 영역을 지정해서 사용할 수 있다.
선택 : 한개 또는 여러개 (선택 할 때 ,
를 이용한다.)
ex) 클래스를 한개만 지정 <span class="red">빨강</span>
클래스를 여러개 지정 <span class="red center">빨강</span>
-> class="red" class="center"
이렇게 사용하면 center로 덮어쓰기 된다.
그래서 class="red center"
처럼 blank를 사용해서 지정하면 된다.
span
태그 안에 red
클래스 선택 -> span.red
span
태그 안에 red
id를 선택 -> 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>