이미지 태그, 컨테이너 태그, 전역 속성 [노베이스 게임개발 24일차]

 

이미지 태그 : 이미지를 표시할 때 사용하는 태그이다.   <img src="이미지파일" alt="이미지설명" />

 

src(source) 속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다. url을 통해 입력받는다.

 

alt(alternative) 속성은 이미지가 로딩되기 전이나 로딩에 실패할 경우 대체하는 텍스트를 표시해 준다.

이미지를 볼 수 없는 시각장애인에게 alt의 정보를 알려줄 수 있다.

 

다음과 같은 속성을 통해 이미지 크기를 조절할 수 있다.

<img src="이미지파일" alt="이미지설명" width="너비값" height="높이값" />

이때 너비와 높이는 픽셀(px) 단위로 적용된다. 만약 설정하지 않는다면 원본 파일의 크기 그대로를 표시한다.

 

예시를 만들어 보았다.

 

먼저 VSCode 좌측에 html파일이 있는 폴더에 새로운 폴더를 하나 만들어준다.

 

 

그 후 폴더에 원하는 이미지파일을 넣은 다음 해당 파일의 위치를 <img src="폴더명/파일명"> 이렇게 넣어준다.

 

그다음 이미지의 크기를 설정할 수 있는데 높이와 너비 둘 중 하나만 입력한다면 나머지 요소는 비율에 맞게 알아서 맞춰준다.

만약 두 가지 모두를 입력하면 그에 맞게 이미지 크기가 설정된다.

그림과 같이 두 가지 모두를 300으로 입력하면 

 

 

이와 같이 이미지 크기가 300의 정사각형으로 표현이 된다.

 

또 이미지 폴더에 이미지를 직접 넣을 수 도 있지만 인터넷상의 이미지 주소를 이용하여 이미지를 가져올 수 있다.

 

 

저작권 없는 이미지 사이트에 들어가 마우스 우클릭으로 이미지 주소 복사를 눌러준다.

그런 다음 img태그의 src부분에 이 주소를 넣어주면

 

그림과 같이 폴더 내의 사진뿐 아니라 인터넷상의 사진의 주소를 이용하여 이미지를 출력할 수 있다.

 

 

그다음으로는 이미지의 파일이 누락되었을 때 대체하여 나오는 alt의 예시다.

 

 

그림에서처럼 일부러 이미지폴더의 주소를 틀리게 기입한 후 alt속성을 추가하였다.

 

그랬더니 이미지가 깨져 대체 텍스트가 출력이 되었다.

 

 

 

 

 

이제 컨테이너 태그에 대해 알아보자.

컨테이너 태그 : 콘텐츠나 레이아웃에 영향을 주지 않으면서 다른 요소들을 묶어 관리하는 태그.

이는 두가지 종류가 있는데

<div></div> : 블록레벨 컨테이너
<span></span> : 인라인 컨테이너

 

 

 

 

먼저 예시코드를 막 적었는데 바로 사이트로 보며 얘기를 해보자.

 

 

큰 제목과 함께 C언어와 html의 두 가지 주제로 글이 나뉘어 있는 걸 볼 수 있다.

이를 묶어줄 수 있는 것이 컨테이너이다.

 

 

<div></div>를 이용하여 묶어주고 싶은 영역들을 묶어 준 다음 사이트의 개발자도구로 가면

 

 

이와 같이 div로 인해 두 가지 영역이 묶인 것을 볼 수 있다.

이를 통해서 css를 통한 스타일 시트나 자바스크립트를 통한 상호작용을 할 수 있게 된다.

 

div를 이용해 블록을 묶어줄 수도 있지만 span을 통해 인라인영역을 묶어줄 수도 있다.

 

 

인라인영역으로 묶는 것 또한 css를 통한 스타일 시트나 자바스크립트를 통한 상호작용을 할 수 있게 된다.

 

 

다음으로는 전역 속성에 대한 내용이다.

 

전역 속성 : 모든 HTML 태그에서 공통적으로 사용할 수 있는 속성.

 

이번 시간에 배울 것은 총 4가지 이다.

id : 요소에 고유한 이름을 부여하는 식별자 역할 속성.  사용자 정의값을 사용.
class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성. 사용자 정의값을 사용.
style : 요소에 적용할 CSS 스타일을 선언하는 속성
title : 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공.

 

각각에 대한 설명을 예시와 함께 설명해 보겠다.

 

 

먼저 id를 div에 붙여주었는데 각각 c언어, html이라는 id로 식별을 해주었다.

이는 각각의 태그를 식별해 주는 것이다. 모든 id는 서로 달라야 한다.

 

반면 class를 이용하여 각 소제목에 title이라는 이름으로 식별을 해주었다.

이것은 여러 개의 태그가 동일한 class를 가질 수 있다.

 

이 두 가지 식별자들은 사용자가 직접 지정한 값이다.

 

title태그는 해당 요소에 대한 텍스트 부가요소로 그림에서는 이미지에 title 속성을 넣어주었다.

이것은 사용자에게 툴팁을 제공하는데 마우스를 이미지에 올려놓으면

 

 

다음과 같이 "감사합니다"라는 툴팁을 제공한다.

 

 

 

후기 : html 공부한 지 얼마 되지 않은 것 같은데 벌써 어느 정도 사이트를 만들 수 있을 것만 같다. 꾸준하게 공부해서 무언가 만들고 싶다.

 

 

 

 

*본 포스팅은 학생의 입장에서 쓴 글로 정확하지 않을 수 있으며 댓글로 피드백해 주시면 감사하겠습니다.

클래스 101 유노코딩님의 강의를 통해 학습한 내용을 기반으로 두고 있습니다