Media와 div & span 태그
Media와 div & span 태그
Media 태그는 웹 페이지에 이미지, 비디오, 오디오 등의 미디어를 삽입하는 태그입니다. div와 span 태그는 레이아웃을 구성하거나 스타일을 적용하기 위한 태그입니다. 여기서는 모든 태그를 다 알아보지는 않고 자주 사용되는 태그들을 중심으로 알아보겠습니다.
1. img 태그
<img> 태그는 이미지를 삽입하는 태그입니다. 이 태그는 다른 태그와 달리 닫는 태그가 없는 빈 요소(void element)입니다. 빈 요소는 자식을 가질 수 없는 태그를 말합니다. 스스로 닫는 태그, self-closing 태그라고도 불립니다.
빈 요소(void element)와 스스로 닫는 태그는 엄밀히 말하면 다릅니다.
위 문서를 보면 HTML은 Self-closing tags (<tag />) do not exist in HTML. 라고 설명하고 있습니다. 하지만 HTML에서는 빈 요소를 스스로 닫는 태그로 사용하는 것이 허용되어 있습니다. 이러한 이유로 빈 요소와 스스로 닫는 태그라는 용어를 혼용해서 사용하는 경우가 있습니다.
- 빈 태그 (Empty tag)
<img src="image.jpg" alt="이미지" /><img src="image.jpg" alt="이미지" />- 스스로 닫는 태그 (Self-closing tag)
<img src="image.jpg" alt="이미지" /><img src="image.jpg" alt="이미지" />다만 HTML에서 이를 허용해주고 있을 뿐이지 이미지 태그는 빈 요소(void element)입니다. 우리가 현재 사용하고 있는 HTML 버전인 HTML Living Standard에서는 Embedded content로 분류되어 있습니다.
이 이미지에 대표적인 속성으로는 src와 alt가 있습니다.
src: 경로alt: 대체 텍스트. 이미지에 대한 설명- src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 내용을 보여줍니다.
- 시각에 장애가 있으신 분들을 위해 스크린리더를 지원합니다.
- 이미지를 대체하는 텍스트가 중복이라면
alt=""생략이 아닌 빈 값으로 둡니다. 값이 비어있으면 스크린리더는 읽지 않습니다. 만약 alt값이 없다면 경로명을 읽어주기 때문입니다.
1.1 상대경로
이미지 태그에 사용하는 src 속성은 이미지 파일의 경로를 나타냅니다. 이 경로는 상대경로와 절대경로로 나누어집니다.
상대경로는 현재 파일을 기준으로 다른 파일의 위치를 나타내는 경로입니다. 상대경로는 다음과 같은 표현을 사용합니다.
./: 현재 폴더../: 상위 폴더./폴더명/: 하위 폴더
간단한 예시를 들어보도록 하겠습니다. 만약 아래와 같은 파일 구조가 있다고 가정해봅시다.
index.html
├ images
│ └ logo.png
└ css
├ reset.css
└ style.cssindex.html
├ images
│ └ logo.png
└ css
├ reset.css
└ style.css- index.html 기준으로 style.css 파일은
./css/style.css//css/style.css입니다. - style.css 기준으로 logo.png 파일은
../images/logo.png입니다.
1.2 절대경로
절대 경로는 파일이나 폴더의 위치를 최상위 디렉토리부터 전체 경로로 나타낸 것입니다. window라면 C:\, mac이라면 /로 시작합니다. 도메인이라면 http://, https://로 시작하여 전체 경로를 나타냅니다. 위 예제에서는 https://weniv.link/static/img/2_chilli.svg가 절대 경로입니다. 이 경로를 https://weniv.link/에 들어가서 개발자 도구를 열고 이미지의 절대 경로를 찾아 원하는 이미지로 바꿔보세요.
1.3 파일 및 폴더 이름 규칙
경로명에 대한 설명을 이어가보도록 하겠습니다. 파일이나 폴더의 이름을 지을 때는 다음과 같은 규칙을 지켜주세요.
파일이나 폴더는 공백 없이 영문 소문자, 언더바(_) 대신 하이픈(-) 사용을 권장합니다. 영어 소문자로 사용하는 이유는 컴퓨터와 웹 서버는 대소문자를 구분하기 때문입니다. 소문자로 일관되게 작성하면 오류를 줄일 수 있습니다. 공백을 사용하지 않는 이유는 브라우저와 웹서버, 프로그래밍 언어들은 공백을 일관되게 처리하지 않기 때문에 오류가 발생할 수 있습니다. 하이픈은 구분자를 나누는 단위이기도 하고 유지보수에도 좋습니다. 구글 검색 엔진은 하이픈을 단어 구분자로 취급합니다. 또한 하이픈 단위로 단어를 더블클릭 할 수 있어 편하게 수정하거나 대체할 수 있습니다. 아래 예시를 참고해주세요.
- ex)
lion_resting_on_the_road.pngvslion-resting-on-the-road.png
2. div & span
2.1 div
div 태그는 division의 약자로, 웹 페이지의 레이아웃을 구성하기 위한 태그입니다. 이 태그는 블록 요소로 개행이 되며 여러 태그들을 그룹핑하기 위한 용도로 사용합니다. CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 영향을 주지 않습니다.
다만 프론트엔드 개발에서는 div 태그 사용 대신 사용할 수 있는 태그들이 여러 존재합니다. header, footer, main, section, article, nav 등 다양한 의미가 있는(시멘틱한) 태그들을 사용하여 콘텐츠를 분할하고 그룹을 해보고 표현할 수단이 없을 때 사용하시는 것을 권합니다.
** 왜 시멘틱하지 않은 div를 사용하나요?**
오래된 웹 브라우저를 지원하기 위해서도 사용하고 있습니다. 또한 시멘틱함을 일부러 유지하지 않으려는 웹 서비스에서도 사용합니다. 시멘틱함을 유지하지 않으려는 이유는 크롤링 등 다양한 이유가 있습니다.
또한 위 이유가 아니더라도 개발 일정이 급한 경우나 빠르게 개발해야 하는 경우에도 사용합니다. 하지만 이러한 경우에도 시멘틱한 태그를 사용하는 것이 좋습니다. 아무리 바빠도 70점 ~ 80점 짜리 코드를 짤 수 있도록 훈련해야 합니다.
2.2 span
span 태그는 인라인 요소(개행이 되지 않는 요소)로 사용되는 태그입니다. div와 마찬가지로 CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않습니다. 아래 예제에서는 span 태그를 구분하기 위해 색을 변경해보았습니다.
span 태그의 주요 특징과 사용 예시는 다음과 같습니다.
- 인라인 요소로, 줄 바꿈 없이 텍스트 흐름 속에 포함됩니다.
- 텍스트의 일부분에 스타일을 적용할 때 사용합니다. (예: 색상, 폰트, 크기 등)
- 텍스트의 일부분에 의미를 부여할 때 사용합니다. (예: 강조, 중요, 삭제 등)
- 텍스트의 일부분에 JavaScript 이벤트를 적용할 때 사용합니다. (예: 클릭, 마우스오버 등)
아래 홈페이지에 들어가 span이 어떻게 사용되었는지 확인해보세요.
이처럼 span 태그는 의미론적으로 중립적인 태그이므로, 필요에 따라 class나 id 속성을 사용하여 의미를 부여하고 스타일을 적용할 수 있습니다. 또한 span 태그 내부에 다른 인라인 요소를 포함할 수 있어 다양한 스타일 조합이 가능합니다.
아래 예제는 span을 좀 더 의미론적으로 사용한 예시입니다.