HTML
<img>
웹상의 이미지도 가능하다.나의 디스크 상에 있는 이미지도 보여줄 수 있다.
근데 웹상의 누군가 올린 이미지가 삭제되면 사진이 깨져서 나온다.
-
src = "여기는 이미지가 들어간다."
만약 웹에 있는 사진이라면 웹의 이미지주소를 들고 오면 된다.
<img src = "123.jpg" align = "left">
이렇게 하면 글자기준으로 그림을 어디에 둘 것인지를 나타내는 코드이다.
<<img src = "123.jpg" border = "1">
이렇게 하면 보더레이아웃처럼 할 수 있음. -
alt ="여기에는 글이 나오는데 여기는 사진이 훼손되었을 때, 그걸 설명하는 문구를 적으면 된다. 사진이 정상이면 이 글은 나오지 않는다."
-
title = "여기는 툴팁처럼 사진이 올리면 글이 올라온다."
<a>~</a>⭐⭐
: 앵커라고 읽는다. 닻. 하이퍼링크 거는 기능인듯.
: 중요한것이다.제일 중요한 태그이다.
: 비선형으로 만들어주는 태그. 누르면 다른 곳으로 가니까. 내가 다음에 어디로 갈지 지정할 수 있다.
- href - 하이퍼링크래퍼런스라는 뜻.
- target = "_blank"
이걸 누르면 새로운 탭에서 네이버가 열린다. - target = "_self"
현재페이지에서 열어라
- id(name이라는 것도 있는데 이건 중복이 되어도 상관없다.)
: 책갈피기능 - 나무위키기능에서 번호누르면 같은 페이지에서 그 번호가 있는 구간으로 해당위치로 이동시키는 거.
<코드와 그림예시>
<html>
<head>
<title> 여기는 제목 </title>
</head>
<body>
<ol id = "list">
//여기 에도 아이디를 줘서 맨밑에서 올라올 수 있게끔 만든다.
<li>a</li> 리스트로 만들어서
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li><a href ="#7th" ("#여기에 아이디를 적어줘야 한다.")>춘식 7</li>
//목록안에 a가 있게 된다. #을 적으면 아이디를 나타낸다!!!!
//아이디가 7번째라고 되어있는 이미지로 가라는 뜻.
<img id = "1st" src = "1.png" />
//아이디는 모든 태그가 다 가질 수 있는 속성이다.
//같은 내용안에 중복된 아이디를 가질 수 없다.
<br>
<br>
<br>
<img id = "2nd" src = "2.png" />
<br>
<br>
<br>
<img id = "3rd" src = "3.png" />
<br>
<br>
<br>
<img id = "4th" src = "4.png" />
<br>
<br>
<br>
<img id = "5th" src = "5.png" />
<br>
<br>
<br>
<img id = "6th" src = "6.png" />
<br>
<br>
<br>
<img id = "7th" src = "7.png" />
<br>
<a href = "#list">목록으로 </a>
//이렇게 하면 맨위의 목록으로 올라간다.
</body>
</html>
웹어플리케이션, 홈페이지
홈페이지는 정적이다. 데이터가 그대로인다. 이 페이지를 내일 열었다고 해서 내용이 바뀌지 않는다.
웹어플리케이션은 동적으로 화면을 구성한다. 뭔가 누를때마다 바뀐다. 우리가 한 이벤트이고, 요청이 된다. 스윙과 비슷하다. 방을 누르는 행위자체가 내가 이방에 들어가겟다고 요청하는거.
우리가 만들어내는 걸 웹어플리케이션이라고 부른다.
검색으로 하나는 에일리, 하나는 아이유를 검색했다.
같은 검색을 했지만 결과는 다르다. 큰 구성같은 건 비슷하다.
똑같은 목적으로 다른 값을 날린것이다. 안의 구성이 다르다. 뭐 아이유와 에일리의 나이도 다르고 다 정보가 다르다.
사용자가 아이유라고 검색했을 때 내용이 바뀌는 것이니까 동적이다. 이게 웹어플리케이션이다.
근데 우리가 만들어놓은 것은 그냥 미리 다 정해져 놓은 것이다.
근데 구조는 같은데(목록같은 것들이 비슷하다) 안의 내용만 다르다.
구조담당 태그들은 그대로인데, 내용이 바뀐다.
안의 무슨 내용을 채울 것인지를 불러온다던지, 내정보에서 찾아온다던지 내용을 다르게 채운다.
검색을 하면 거기 나온는 검색결과의 구성은 비슷한데(위에는 인물의 정보가 나오고, 아래는 기사가 나오고, 뭐 그런 것들), 그러나 안의 결과의 내용은 다르다.
쇼핑몰, 예약사이트 - 이런데 가지마라
특수문자⭐⭐
< : <
> : >
& : &
" : "
스페이스바(공백) :   - 띄어쓰기, 띄어 쓰기, 공백
<body>~</body>:눈으로 보이는 파트(중요X)
backgroud = '123.gif' : 색
bgcolor
link
vlink
alink
CSS에서 배경색을 그린으로 해놓으면, 한번에 다 바뀌니까, 여기서 html자체에서 잘 하지 않는다.
테이블 태그와 속성
- 테이블을 넣고자 할 때 사용한다.
- 테이블 태그는 다음과 같이 나타낸다.
<table>~</table>: 표의 시작과 끝을 정의한다.
<tr>~</tr>: 표의 행을 정의. 이게 한 줄이다. 3줄이면 3개를 만들어야 한다.
<td>~</td>: 행을 이루는 열을 정의. 이게 한 칸이다. 3칸을 만드려면 3개를 만들어야 한다. 'tr'안에 'td'를 만들어야 한다.
th: 안에는 있는 걸 중간으로 하고, 굵게 만들어주는 것이다.
a[target ="_black"]: a태그 중에 타겟이 _blanck인 것이라는 뜻.
- 병합
colspan = "" : 가로로 병합
rowspan = "" : 세로로 병함
헤드 - 풋 - 바디순으로 나온다.
헤드 담에 풋 담에 바디 순서이다!!
왜 만들어놧을까? 저렇게 하면 의미상으로 구분이 된다.
이게 제목부분이다. 여기가 내용이다 이런게 구분이 된다.
그래서 나중에 쉽게 고칠 수도 있다.
코드
<html>
<head>
<title> new document </title>
<style>
table { //태그선택자
margin : 0 auto;
//이러면 중간에 온다.margin은 바디와 테이블사이의 간격을 조절하는 것이다.
border-collapse : collapse;
}
td, th { //th 콤마로 연결해서 해도 같이 gray로 적용된다
border : 1px solid gray;
}
thead {
background-color : #DDDDDD;
text-align : center;
}
tfoot {
text-align : center;
font-weight : bold;
}
tbody tr:hover {
//tbody밑에 있는 tr만 바꾼다.
//hover를 붙이면 마우스를 올리면 색깔이 노란색으로 바뀜1
background-color : yellow;
cursor: pointer;
}
.first { //클래스 선택자(샐랙터) : 특정한 요소들을 선택할 때 사용한다.
background-color: green;
}
#myColor { //id선택자
background-color : red;
}
</style>
<script>
function clickHead() {
alert("hi~");
}
</script>
</head>
<body>
<table>
<caption > 표 제목 </caption>
<thead>
<tr onclick = "clickHead()">
//제목 클릭하면 hi가 나온다. 이게 바로 자바스크립트이다.
<td > 제목1</td>
<td > 제목2</td>
<td > 제목3</td>
</tr>
</thead>
<tfoot>
<tr>
<th colspan = "3">3 row(s) </th> //여기에 th로 쓴다.
<tr>
</tfoot>
<tbody>
<tr>
<td class = "first" >1행 내용1</td>
// 이렇게 class first로 해놓은 것을 위에서 적용할 수 있다. '.first'로!
<td >1행 내용2</td>
<td >1행 내용3</td>
</tr>
<tr>
<td class = "first">2행 내용1</td>
<td >2행 내용2</td>
<td id= "myColor" >2행 내용3</td>
</tr>
<tr>
<td class = "first">3행 내용1</td>
<td >3행 내용2</td>
<td >3행 내용3</td>
</tr>
</table>
</tbody>
</html>결과
(노란색은 마우스를 올리면 색이 변한다.)
샐렉터
태그선택자, 클래스선택자, 아이디선택자 3가지가 있다.
- .first{} : 클래스 선택자(샐랙터) : 특정한 요소들을 선택할 때 사용한다.
- #myColor {} : id선택자
- table {} : 태그선택자
슈도클래스(가짜클래스)
: 실제로 존재하지 않지만, 의미상으로 존재하는거.
-
div > p
div 바로 밑에 있는 p. 직계후손. -
div p
이러면 div 밑에 있는 어떤 p라도 다 바뀐다. 다 가능하다.
중요한거 <a>, <table>, <form>
폼양식 <form>~</form>⭐⭐
값에 대한 이야기
폼 태그는 클라이언트측에서 서버로 값을 전송할 때 사용하는 태그이다.
안에 여러가지 값을 담을 수 있는 입력양식을 만드는 태그를 포함할 수 있다.
간단히, 사용자에게 입력받은 값의 양식을 만들기 위해서 사용.
1.전송단위
2.어디로 : 무엇을 하는 가 =>action
3.어떻게 : 전송방식 => method
다음 페이지로 form 합쳐서 적음
04.14 수업
