내일배움카드(재직자) 웹표준 수업 / 3월7일 (월) 4회차

 

 

 

이미지 가져오기

*닫는 태그 없음
*사진을 가져올땐 html폴더 안에 무조건 사진이 있어야만 가져올수 있음
<img src="이미지파일위치(주소)" alt="대체글자(이미지가 안뜰시 설명해줄 텍스트)">
                                     ↑
                    ../이미지폴더/이미지파일.확장자
        

 

 

 

웹페이지에서 사용 가능한 이미지 확장자

▶jpg:압축형식 이미지파일,투명한 부분은 흰색으로 나옴
▶png:투명한 부분을 그대로 살린 이미지 파일
▶svg:확대해도 선명한 이미지(그림에 적합함) 파일
▶gif:최대가 256색으로 움직이는 이미지 파일 

 

 

 

이미지 크기 지정하기

<img src="이미지파일위치(주소)" alt="대체글자" width="크기px">
*width만 입력하거나 height만 입력하면 가로세로 비율이 고정된 상태로 크기가 조절됨
*비율을 무시하려면 width,height 모두 지정해야된다

 

 

 

다른 웹페이지 이미지 가져오기
1. 가져올 이미지가 있는 웹페이지 열기
2. 가져올 이미지에서 우클릭
3. 이미지 링크나 주소 복사(그냥 주소 복사하면X 이미지 주소여야함)
4. html 문서에 img 태그 넣기 <img src="이미지 주소" alt="대체글자">

 

 

 

이미지에 링크 걸기(꼭 닫는태그는 이미지태그 뒤에다가 닫아야함)
<a href="연결할 주소"> <이미지태그> </a> 

 

 

 

가져온 이미지에 제목 달기
(피겨캡션은 내가 쓴 위치에 들어간다)

<figure> 
<figcaption>이미지 제목</figcaption>
<img src" " alt=" ">
</figure>

 

링크태그: 클릭하면 설정된 주소로 이동
<a href="주소" 속성="속성값">글자,단추,그림</a>

 

새로운 페이지로 링크 열기

<a href="주소" target="_blank">
                                 ㄴ "_self"로 입력하거나 target 속성태그를 안쓰면 현재페이지 에서 링크 열림

 

 

 

 

한 페이지에서 원하는 구역으로 이동하는 링크 만들기
*구역 옆에 샾# 꼭 붙여야함!!

<a href="#구역1">글자</a> → id="구역1"로 이동
<a href="#구역2">글자</a> → id="구역2"로 이동

<h1 id="구역1(이 안에 이름은 아무거나 써도 됨)">제목</h1>
.
.
<h1 id="구역2">제목</h1>


*예시*
<h1 id="main">가나다라</h1>
<h1>마바사</h1>
<h1>아자차카</h1>
<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>
<h1>타파하</h1>
<a href="#main">위로가기</a>  ▶ 가나다라로 이동하게됨

 

 

 

 

*스타일태그는 head태그 안에,쓸때는 { } 중괄호


*클릭하면 이미지의 원본 사이즈로 나타나게 하려면  이미지 태그 앞에 새창으로 열리는
타겟 속성 태그 달고  이미지 태그 주소를 다시 a 태그로 달아주면 된다.
(link.html) 실습 참고

▼

예시

<a href="image/KakaoTalk_20220307_174342123_03.jpg">

<img src="image/KakaoTalk_20220307_174342123_03.jpg" alt="꼼" width="60px">

</a>

 

 

 

 

 

폰트 개별적으로 진하게 하는 태그
font-weight