2023. 10. 8. 23:42ㆍHtml, Css
<이미지삽입>------------------------------------------------------------
▼이미지 삽입 <src = source(=사물의 원천) 의 약자>
▷저장된 파일에서 불러오기
ㄴ저장한 html 문서를 기준으로 이미지를 찾아감 : html과 같은 파일
ㄴ이미지를 불러올 땐 경로 이미지 이름, 확장자 까지 입력
ex) <img src = "저장된 파일이름/ 이미지 이름.확장자">
ㄴ "/"로 이동 구분
▷서버에 이미지를 저장 후 불러오기
ㄴ 블로그 같은 서버에 저장 후 주소 링크로 불러 올 수 있음
ex)
<body>
<h2>이미지삽입</h2>
<img src="img/img3.jpg">
<br>
<img src="img/drawing5.png">
<br>
<img src="img/imge1.jpg">
</body>
ㄴ경로가 달라지면 이미지가 보이지 않음 : 경로 수정
▼alt :대체문구
▷이미지 경로가 다르거나 해당 이미지가 없으면 웹에서는 이미지를 볼 수 없다.
▷이미지가 보이지 않을 때 이미지를 설명하거나 코딩시 이미지를 쉽게 구분할 수 있도록 alt 속성을 사용한다
▷경로가 맞아 이미지가 보일 때는 대체문구는 보이지 않는다
ㄴ<img src="이미지 경로" alt="대체 문구">
<링크설정 : 하이퍼링크>--------------------------------------------------------
※클릭으로 다른 곳으로 이동 : 메뉴, 홈페이지
ㄴ마우스 모양이 손가락으로 변경됨
ㄴ클릭시 다른 문서 및 화면으로 변경이 됨
ㄴ링크를 설정하면 밑줄, 글자색이 변경됨 (a href > 'a' 때문에 바뀜)
※문서나 서버에 파일을 저장해 불러와 홈페이지 제작
▼하이퍼링크 걸기 <a href (ancho hyperlink reference (=넓은 하이퍼링크 참고)의 약자)>
▷인터넷 주소로 링크걸기
ㄴ<a href="연결할 문서(이동시 보이는 )"> 화면에 보일 글자 및 이미지 </a>
ㄴ ex) <a href="https://www.naver.com/">네이버</a>
▷문서에서 파일 링크걸기
ㄴ<a href ="파일/파일명,확장자"></a>
ㄴ ex) <a href="3_글자꾸미기.html">내가 만든 문서</a>
▷href
ㄴhref="" 안에 링크 넣어 페이지 이동을 할 수 있다
ㄴhref="#" 의 의미는 현재 페이지 제일 상단으로 가는 기능을 한다
ㄴhref="#id" 의 의미는 해당 아이디를 가진 콘텐츠로 이동을 한다 (책갈피 기능)
ㄴ href="링크#id" 로 사용하면 해당 링크로 이동후 책갈피 기능으로 해당 아이디를 가진 콘텐츠로 이동한다
▷저장된 이미지에 파일링크 걸기
ㄴ<a href="연결할 주소링크"><img src="저장 위치/파일명.확장자"></a>
ㄴex) <a href="https://www.naver.com/"><img src="img/naver.png"></a>
<body>
<h2>링크설정</h2>
<a href="https://www.naver.com/">네이버</a>
<a href="https://www.youtube.com/">유튜브</a>
<a href="https://www.instagram.com/">인스타</a>
<a href="3_글자꾸미기.html">내가 만든 문서</a>
<a href="https://www.naver.com/"><img src="img/naver.png"></a>
</body>
▷title 속성
ㄴ링크설명 문구 : 무슨 링크인지 코드를 보고 확인할 수 있음
ㄴex) <a htef="https://www.naver.com/" title="네이버"></a>
ㄴ네이버로 이동하는 링크임을 알림
▼링크 이동시 탭 열기
▷ 현재창이나 탭에서 열기 (기본값) : _self
▷ 새창이나 탭으로 열기 : _blank
▷ 부모 프레임에서 열기 (프레임을 사용하지 않을시 self 와 동일적용) : _parent
▷ 최상위 프레임에서 열기 : _top
(언더바 사용안해도 작동되나 호환성과 표준을 고려하여 사용지향)
▼링크 글자 색상변경 및 밑줄 삭제 (a href > 'a' 때문에 바뀜)
▷ 태그 'a' 로 입력
ㄴ ex)
<style>
a{color:#000; text-decoration:none;}
</style>
▼흑백사진 만들기
▷'이미지'{filter:grayscale(0 or 1);}
ㄴex)
img{filter:grayscale(1);} > 이미지에 회색필터 100% 적용
'Html, Css' 카테고리의 다른 글
| 외부 스타일 / hover (1) | 2023.10.08 |
|---|---|
| 여백 (0) | 2023.10.08 |
| 내부 스타일 (style) (1) | 2023.10.08 |
| 글자 꾸미기 (0) | 2023.10.08 |
| 태그 개념 (0) | 2023.10.08 |