달리는 자동차
HTML정리2 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>그대로작성된다</title>
</head>
<body>
<pre>
3월토끼
화
이
팅!
</pre>
</body>
</html>
<pre>프리태그</pre>
<!-- 내용을 입력한 그대로 표시할때 사용-->
<!--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<p>3월토끼
화
이
팅
끝</p>
</body>
</thml>
| 위 : 3월토끼 화이팅 |
| 아래 : 3월토끼 화 이 팅 끝 |
<!--리스트태그-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>리스트.....</title>
</head>
<h2>리스트만들기<h2>
<h3>번호가 없는 리스트</3>
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
<br />
<h3>번호가 있는 리스트</3>
<ol>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ol>
<body>
</body>
</html>
| 즉 리스트만들때 <li></li>는 공통이고 숫자가 있는지 없는지에 따라<ul></ul>와 <ol></ol>로 나뉜다. |
- 숫자없는 ul
- 숫자있는 ol
<!-- a태그 사용-->
<a href="이동할 주소 입력">누르면이동</a>
<!--
현재 보고 있는 웹브라우저에서 바로 이동을 한다.
새창이 열리고 그곳에서 원하는 페이지가 나오게 하는 방법도 있다.
a태그 안에 target="_blank"를 넣어준다.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>하이퍼링크</title>
</head>
<body>
<h2>새로운창에서 열려라</h2><br />
<a href="http://www.naver.com" target="_blank">네이버</a>
</body>
</html>
<a태그>
# href속성 ->어느주소를 열지,
# target속성 ->어느창에서 열지,
| <a href="https://www.naver.com/" target="_blank">naver (새창에서 열기)</a> <a href="https://www.naver.com/" target="_self">google (현재창에서 열기)</a> |
# name속성 ->페이지 내 이동 (즉, 같은 페이지의 어느 지점이동. )
| <a href="#누르면">한페이지 TOP<a> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <a name="누르면">한페이지 Bottom<a> ---> 이렇게 사용하면 <br>태그 때문에 한페이지 내에서 스크롤이 길어진다. |
# title속성 -> 링크에 마우스를 대고 있으면 title속성의 값이 표시된다.
<a title="링크설명" href="주소">링크표시명<a># ping속성->링크의 통계를 활용할 때 유용
ex) 해당 링크를 얼마나 많이 눌렀는지 알 수 있다. (ex 쇼핑몰)...
담에 필요할 때 <a ping></a> 태그 공부해보자. 이 기술은 서버도 연결되어야하므로...HTML만으로 정확한 실현 불가
<img src="이미지주소" alt="이미지 설명"/>
<!--
img태그는 단독태그 이므로 닫아줘야한다.
alt="이미지설명"은 이미지에 마우스를 대고 있으면 띄어지는 글이다.
alt=""를 적지 않으면 웹표준 검사에서 워링이나 에러에 걸린다.-->
<img src="이미지 주소" width="숫자" alt="이미지 설명"/>
<!--
이미지의 사진크기 설정도 가능하다.
가로 길이는 width="숫자"
세로 길이는 height=" 숫자"이다.-->
- 자신의 컴퓨터에 있는 이미지로 테스트하고 싶은 경우 테스트 하고있는 html파일이 있는 폴더에 이미지를 넣고 <img src="이미지명" alt=""/>를 하면 된다.
<!-- 이미지를 클릭했을때 원하는 링크를 걸은 주소로 이동하는 방법은
a태그 안에 이미지 태그를 넣으면 된다.-->
<a href="주소" target="_blank">
<img src="사진이 있는 링크" alt="사진설명"/>
</a>
Comments