안녕하세요 코딩초밥입니다 ㅇㅅㅇ
파이팅
링크<a>
눌리면 바로 그 링크로 갈수있는 코드.
Anchor의 약자 a로 닻을 내리는듯한걸 표현한것같습니다
이것은 꼭 웹사이트 이동으로만 쓰이는것이아닌 내 글안에서도 위치를 id로 지정해서
그쪽으로 갈수도있습니다.
예를 몇가지 따라해보면서 이해해보겠습니다
<!DOCTYPE html>
<html>
<body>
<a href="http://www.naver.com" target="_blank">
코딩초밥은naver을 좋아해</a>
<p>
target 속성이 "_blank"이므로 ,
링크는 새로운 탭에서 열립니다.
</p>
</body>
</html>
target 종류
blank 새로운 윈도우에서 새로운 페이지를연다
self 현재 윈도우에 새로운 페이지를 적재한다
parent 부모 프레임에 새로운 페이지를 적재한다
top 현재 윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소한다
같은페이지에서도 섹션을 나눠서 갈수있다.
<!DOCTYPE html>
<html>
<body>
<a href="#section1">참고 사항으로 가려면 여기를 클릭하세요.</a>
<p> Hello World!</p>
<p> Hello World!</p>
<p> Hello World!</p>
<hr />
<a id="section1">참고 사항</a>
<hr />
<p> 동일한 페이지 안에서도 점프할 수 있습니다. </p>
</body>
</html>
심지어
이메일링크도 걸수있다.
이미지링크마저 걸수있다.
다운로드경로도 걸수있다.
전화까지 링크걸수있다.
엥커안에 이미지를 넣어서 이미지를 누르면
다른페이지로 넘어가게 걸수도있다.
내인생도 걸수있다.
a의 링크의 기능은 무궁무진하다.
<!DOCTYPE html>
<html>
<body>
<a href="mailto:sushi@naver.com"> mailto로 이메일로 링크걸수있습니다</a>
<a href="http:/naver.com/image.jgp"> <img src="aaa.jpg alt="이미지없을떄쓰이는글"> 이미지도 링크걸어서 이미지를눌러서 또다른 이미지를 보여지게할수있습니다있습니다</a>
</body>
</html>이미지 불러오기
이미지를 불러오는건 빠지면 안되겠죠???
이미지를 하나 임의로 저장한후 따라해보시길바랍니다 파일명은 seolak.jpg로 해보겠습니다
<!DOCTYPE html>
<html>
<body>
<h2>설악산</h2>
<img border="0" src="seolak.jpg" alt="설악산"
width="300" height="230">
</body>
</html>
절대경로
<!DOCTYPE html>
<html>
<body>
<h2>설악산</h2>
<img src="www.naver.com/seolak.jpg" alt="설악산"
width="300" height="230">
</body>
</html>border의 뜻은 테두리를 지칭하며 액자처럼 만들수있습니다.
src 는 자신이 사용하고싶은 이미지를 불러올수있습니다
사이트에있는 이미지를 쓰고싶다면 주소를 쓰시고
파일에있는 내 이미지를 쓰고싶다면 이렇게 파일명을쓰시면됩니다
alt 는 혹시 액박이라고 이미지가 안뜰떄 나오는 x박스 기억나시나요?
이미지가 안떴을때 쓰여지는 글씨입니다
width와 height는 이미지를 조정할수있는데 css영역에서도 할수있는부분이라
css에서 하는걸 권장합니다.
※절 대경로
검색해서 인터넷안에있는 이미지를 가지고 싶다면 그 이미지의 절대경로를 가져오면 이용하실수있습니다. 이미지에 대고 오른쪽버튼을 누르면 이미지 링크 복사하시면 그게 절대경로가 될수있습니다.
jPEG
·실사사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합
·손실 압축 방식을 사용한다.
·PNG
·클립 아트와 같이 적은 수의 색상을 가진 이미지에 적합
·무손실 압축 방식
·GIF
·로고나 클립아트 형태의 이미지에 적합
·256 색상만을 지원
·투명 배경과 애니메이션을 지원한다.
표만들어보기
가끔 인터넷안에서 표가 보여져야할경우에 쓰입니다.
<!DOCTYPE html>
<html>
<head>
<title>테이블예제</title>
<meta charset="utf-8">
</head>
<body>
<table border="1"> 여기서 윤곽을만듭니다
<tr> 테이블은 3칸을 만들어보겠습니다.
<th>no</th>
<th>name</th>
<th>message</th>
</tr>
<tr>
<td>1</td>
<td>same</td>
<td>hi</td>
</tr>
<tr>
<td>2</td>
<td>robin</td>
<td>hihello</td>
</tr>
</table>
</body>
</html>
'이과 > HTML,CSS,JS' 카테고리의 다른 글
| CSS_박스 (1) | 2021.05.30 |
|---|---|
| CSS_의사선택자 (4) | 2021.05.23 |
| HTML_IFRAME (13) | 2021.05.11 |
| HTML_서버와 통신 GET,POST (1) | 2021.05.11 |
| HTML_다양한 입력Type (14) | 2021.05.10 |
댓글