이번 포스팅에서는 HTML에서 사용되는 이미지 태그와 컨테이너 태그에 대해 정리해봤습니다.
저번 포스팅에서 다뤘던 HTML의 블록 요소와 인라인 요소로 구분되는 태그에 대해 궁금하신 분은 아래를 읽어보시면 좋습니다!
HTML 기초 3편 - 블록 요소 / 인라인 요소로 구분되는 태그
이번 포스팅에는 HTML에서 블록 레벨 요소와 인라인 요소로 구분되는 태그들을 정리해봤습니다. 저번 포스팅에서 다뤘던 HTML 텍스트 태그에 대해 궁금하신분은 아래를 읽어보시면 좋습니다! HTML
mlngwandev.tistory.com
img (이미지) 태그
- 이미지를 표시할때 사용하는 태그이다.
- 단일태그로 사용된다.
단일태그란?
일반적인 태그는 <태그명> 내용 </태그명>과 같은 구조로 이루어져 있다.
단일태그는 <태그명 속성 />과 같이 하나의 태그명만 사용하는 구조로 이루어져 있다.
- 콘텐츠를 따로 작성하지 않고 표시할 이미지에 대한 정보를 속성으로 적어야 한다.
- 크기 조정이 가능하다. (속성으로 width와 height를 사용한 경우)
- 저장되어 있는 사진을 지정하지만 URL링크로도 표시할 이미지 파일 지정도 가능하다.
기본적인 구조
<img src = "표시할 이미지 파일" alt = "이미지 설명" width = "가로 크기" height = "세로 크기" ... />
사용 예시
위와 같은 아기 고양이 사진을 이용한 예시를 설명해보려고 한다.
저장되어 있는 이미지의 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<img src="html/img/Cat.jpg" alt="고양이" width="200px" height="160px" />
</body>
</html>HTML 코드는 위와 같이 작성하면 된다.
src의 경로
만약 삽입하려는 이미지의 위치가 하위폴더에 있을경우 하위폴더명/ 를 붙여주면 된다!
하위폴더명 / 하위폴더명 /... / 이미지 이름.jpg 와 같이 작성하면 된다.
위 코드의 경우 html 폴더 안에 img 폴더 안에 cat.jpg 를 불러온 것이다!
결과
정상적으로 해당 아기 고양이 이미지가 출력되었다.
개발자 도구를 통해 입력한 가로 200px 세로 160px 으로 크기가 조정되어 있는것을 확인 가능하다.
URL 링크를 이용하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<img
src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7IhsP%2FbtsmQglZYQD%2FkUaHPKLJ2P7zJMFjlGZPd1%2Fimg.png"
alt="고양이"
width="200px"
height="160px"
/>
</body>
</html>HTML 코드는 위와 같이 작성하면 된다.
URL을 이용한 src 설정
저장된 이미지와 다른 점은 src에 해당 이미지 URL을 입력하면 된다!
결과
정상적으로 아기 고양이 이미지가 출력되었다.
개발자 도구를 통해 입력한 URL 링크와 지정한 크기가 제대로 적용되었는지 확인 가능하다.
URL 길이가 너무 긴 경우
URL 길이가 길어도 괜찮으니 " " 안에 잘 들어있는지 확인하면 된다!
... src = "긴 URL 링크" ... 와 같이 되어있으면 정상적으로 출력된다.
컨테이너 태그
- 콘텐츠나 레이아웃에 영향이 없다.
- 다른 요소 여러가지를 묶어 관리하게 편하게 만드는 태그이다.
- 콘텐츠 내용을 구분하거나 공통적인 스타일을 적용하는데 사용하기 좋은 태그이다.
- 대표적으로 div 태그, span 태그가 있다.
div 태그
- 블록 레벨 태그이다.
- 여러개의 콘텐츠를 하나의 블록 그룹으로 묶을 수 있다.
- 블록 레벨 태그이므로 요소 하나가 한 줄을 차지하고 다음 요소는 줄바꿈이 된다.
기본 구조
<div>
콘텐츠들
<div/>
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div>
<h1>div test1</h1>
<h2>div test 2</h2>
</div>
</body>
</html>
위와 같이 div 태그 사이에 콘텐츠를 두개 만들어보자.
결과
콘텐츠들이 각각 블록 레벨 태그로 인해 한 줄 공간 전체를 차지하고 요소 간에는 줄바꿈이 되는것을 확인할 수 있다.
span 태그
- 인라인 레벨 태그이다.
- 여러개의 콘텐츠를 하나의 인라인 그룹으로 묶을 수 있다.
- 인라인 레벨 태그이므로 요소 하나는 필요한 만큼 공간을 차지하고 나머지 공간에는 다른 요소가 들어올 수 있다.
기본 구조
<span>
콘텐츠
<span/>
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<span> span test 1 </span>
<span> span test 2 </span>
</body>
</html>
위와 같이 span 태그를 이용한 콘텐츠를 두 개 만들어보자.
결과
콘텐츠들이 각각 인라인 레벨 태그로 인해 필요한 공간만 차지하고 다음 요소가 남은 공간이 있어 바로 옆에 위치가 가능하다.
여러 콘텐츠들을 담기에 용이한 컨테이너 태그 중 대표적인 div, span 태그에 대해 알아보았습니다.
다음 편에는 HTML에서 사용되는 전역 속성에 대해 알아보겠습니다.
'Frontend > HTML' 카테고리의 다른 글
| HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그 (0) | 2023.07.09 |
|---|---|
| HTML 기초 5편 - 전역 속성 (0) | 2023.07.08 |
| HTML 기초 3편 - 블록 요소 / 인라인 요소로 구분되는 태그 (0) | 2023.07.06 |
| HTML 기초 2편 - 텍스트 태그 (0) | 2023.07.03 |
| HTML 기초 1편 - HTML 구조와 이론 (0) | 2023.06.27 |
