티스토리 블로그 스킨 꾸미기 [img태그]

<img> 태그

(1) 정의

image를 줄인 태그로 말그대로 이미지를 웹페이지에 삽입하고자 할때 사용한다.

(2) 사용법

<img>태그는 삽입하고자하는 이미지의 경로를 지영해야 하는데, 이게 정상적이지 않으면 엑박(엑스박스)이 뜨게 된다고 합니다.

고로 경로를 지정하기 위해 "src"라는 속성을 이용하는데요,

이외에도 이미지의 사이즈를 정해주는 속성이 2가지가 있습니다.

<img> : 시작, 오픈 태그

- : 종료, 클로즈 태그

3가지 "속성"을 함께 보시면

▶ src : 이미지의 경로를 지정

▶ width : 이미지의 가로 사이즈를 지정

▶ height : 이미지의 세로 사이즈를 지정

(3) 실습

ATOM 으로 이용하여 img태그를 실습 해보자.

180x180 사이즈의 png파일을 src 속성으로 경로를 지정해 주고

width 속성과 height 속성을 이용해 사이즈도 바꿔가면서 작성해봤다.

위와 같이 나타남을 볼 수 있다. 사이즈 속성을 기재 안하니 사진 원본 사이즈로 나왔고 가로 사이즈만 180으로 지정했더니 세로도 180으로 나왔나 보다.

가로 180, 세로 150으로 했더니 세번째 사진처럼 살짝 뭉개진 느낌으로 출력이 되었고 150, 150으로 하니 그만큼 작아짐을 볼 수 있다. <p>태그를 이용하여 잡아주니 한칸 내려간걸 볼 수 있다.

엑박도 나오는지 확인해보자.

png파일명을 1을 붙여 없는 파일 이름으로 바꿔봤다.

위처럼 엑박이 뜬 것을 볼 수 있다. 짞짞짞.

오늘은 여기까지...

이어보기

☞ 티스토리 블로그 스킨 꾸미기 [section태그]