웹 문서에 다양한 내용 입력하기 4 - 이미지 삽입하기

다음으로는 이미지를 삽입하는 방법에 대해서 학습해볼 것이다. 시간이 15분밖에 남지 않았으니 최대한 빨리 진행해야겠다.

그럼 바로 시작해본다!

---

 

 

 

이미지 삽입하기

웹 사이트에 적절한 이미지가 있으면 정보를 시각적으로 전해줄 뿐 아니라 지루하지 않게 해준다. 웹 사이트에서 이미지의 역할은 텍스트만큼 중요하다. 사이트 전체 디자인과 메뉴, 중요한 요소를 이미지로 처리하여 내용을 강조할 수도 있다.

 

이미지를 삽입하는 img 태그

<img scr = "이미지 파일 경로" alt = "대체용 텍스트">

 

자세한 내용은 전에 모두 학습했으므로 실습으로 넘어가서 직접 확인해보자!

 

 

 

 

 

이미지 파일 경로를 나타내는 src 속성

 

경로란 현재 html 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지 알려준다. 이미지 파일 경로는 웹 문서 파일의 위치를 기준으로 정해진다.

1. 웹 문서와 같은 폴더에 있는 이미지 파일 경로 넣기
2. 웹 문서 하위 폴더에 있는 이미지 파일 경로 넣기
3. 이미지에 대체용 텍스트 넣기

하위 폴더 경로를 넣을 때는 /를 써준다. 이미지가 없을 때는 데체용 텍스트가 필요하므로 alt 속성을 넣는 것이다.

---

 

 

이미지 크기를 조절하는 width, height 속성

width는 너비를, height는 놋이를 지정하며, 2개 모두를 사용할 수 있고 하나만 사용할 수도 있다.
한 개만 지정해도 나머지 속성은 비율로 자동으로 계산하여 나타낸다. 이 속성에서 사용할 수 있는 단위는 퍼센트와 픽셀이 있다.

 

다음 예제를 통해서 살펴보자.

 

이렇게 크기가 달라지는 것을 볼 수 있다. 너비를 50%로 지정했을 때는 창 너비의 절반만 표시되고, 150px로 하면 창의 크기와 상관없이 고정된 크기로 표시된다.

---

 

실습 - 이미지 삽입하기

 

1단계 : 이미지 삽입하고 확인하기

 

 

2단계 : 너비 속성 변경하고 확인하기

 

2개의 차이점이 느껴진다.

---

 

네번째 단원 학습을 마치고

오늘은 정말 초고속으로 학습을 진행했다. 마지막에 이미지를 삽입하는 건 20분도 남지 않은 시간에 하느라 정말 바빴다. 조금 빠듯하지만 이제 수업 갈 준비를 하면 될 것 같다.
오늘은 취창업 프로그램이 진행되는데, 지난번보다는 열심히 들을 예정이다. 자투리 시간이 남으면 나머지 하이퍼링크를 삽입하는 것까지 해볼 수 있겠다.

서둘러야겠다!