WeniVooks

Media와 div & span 태그

Media 태그는 웹 페이지에 이미지, 비디오, 오디오 등의 미디어를 삽입하는 태그입니다. div와 span 태그는 레이아웃을 구성하거나 스타일을 적용하기 위한 태그입니다. 여기서는 모든 태그를 다 알아보지는 않고 자주 사용되는 태그들을 중심으로 알아보겠습니다.

1. img 태그

<img> 태그는 이미지를 삽입하는 태그입니다. 이 태그는 다른 태그와 달리 닫는 태그가 없는 빈 요소(void element)입니다. 빈 요소는 자식을 가질 수 없는 태그를 말합니다.

이미지 태그의 대표적인 속성으로는 src와 alt가 있습니다.

• src: 경로
• alt: 대체 텍스트. 이미지에 대한 설명
  • src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 내용을 보여줍니다.
  • 시각에 장애가 있으신 분들을 위해 스크린리더를 지원합니다.
  • 이미지를 대체하는 텍스트가 단순 디자인적인 요소이거나 불필요하다면 alt="" 빈값으로 둡니다. 값이 비어 있으면 스크린리더는 읽지 않습니다.
  • alt 값은 생략하지 않습니다. 만약 alt 값이 없다면 경로명을 읽어주기 때문입니다.

이미지 태그에 사용하는 src 속성은 이미지 파일의 경로를 나타냅니다. 이 경로는 상대경로와 절대경로로 나누어집니다.

1.1 상대경로

상대경로는 현재 파일을 기준으로 다른 파일의 위치를 나타내는 경로입니다. 상대경로는 다음과 같은 표현을 사용합니다.

• ./: 현재 폴더
• ../: 상위 폴더
• ./폴더명/: 하위 폴더

간단한 예시를 들어보도록 하겠습니다. 만약 아래와 같은 파일 구조가 있다고 가정해 봅시다.

index.html
├ images
│ └ logo.png
└ css
  ├ reset.css
  └ style.css

index.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.png vs lion-resting-on-the-road.png

2. div & span

2.1 div

div 태그는 division의 약자로, 웹 페이지의 레이아웃을 구성하기 위한 태그입니다. 이 태그는 블록 요소로 개행이 되며 여러 태그를 그룹핑하기 위한 용도로 사용합니다. CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 영향을 주지 않습니다.

다만 프론트엔드 개발에서는 div 태그 사용 대신 사용할 수 있는 태그들이 여러 존재합니다. header, footer, main, section, article, nav 등 다양한 의미가 있는(시멘틱한) 태그들을 사용하여 콘텐츠를 분할하고 그룹을 해보고 표현할 수단이 없을 때 사용하시는 것을 권합니다.

2.2 span

span 태그는 인라인 요소(개행이 되지 않는 요소)로 사용되는 태그입니다. div와 마찬가지로 CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않습니다. 아래 예제에서는 span 태그를 구분하기 위해 색을 변경해 보았습니다.

span 태그의 주요 특징과 사용 예시는 다음과 같습니다.

1. 인라인 요소로, 줄 바꿈 없이 텍스트 흐름 속에 포함됩니다.
2. 텍스트의 일부분에 스타일을 적용할 때 사용합니다. (예: 색상, 폰트, 크기 등)
3. 텍스트의 일부분에 의미를 부여할 때 사용합니다. (예: 강조, 중요, 삭제 등)
4. 텍스트의 일부분에 JavaScript 이벤트를 적용할 때 사용합니다. (예: 클릭, 마우스오버 등)

아래 홈페이지에 들어가 span이 어떻게 사용되었는지 확인해 보세요.

이처럼 span 태그는 의미론적으로 중립적인 태그이므로, 필요에 따라 class나 id 속성을 사용하여 의미를 부여하고 스타일을 적용할 수 있습니다. 또한 span 태그 내부에 다른 인라인 요소를 포함할 수 있어 다양한 스타일 조합이 가능합니다.

아래 예제는 span을 좀 더 의미론적으로 사용한 예시입니다.

3. 블록 레벨 요소 vs 인라인 레벨 요소

3.1 block 요소

블록 요소는 부모 요소의 전체 공간을 차지하여 블록을 만드는 HTML 요소입니다. 이러한 요소는 항상 새로운 줄에서 시작하고, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

• 부모 요소의 전체 공간을 차지하여 블록을 만듭니다.
• 언제나 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
• 이전 이후 요소 사이에 줄 바꿈이 일어납니다
• 블록요소는 인라인 요소 안에 중첩 될 수 없지만, 인라인 요소는 블록 요소 안에 중첩 될 수 있습니다
• 블록 요소는 웹 페이지의 구조를 정의하는 데 매우 중요하며, 시각적 레이아웃을 구성하는 기본 단위로 사용됩니다. 대표적인 블록 요소로는 <div>, <p>, <h1>부터 <h6>, <header>, <footer>, <section>, <article>, <nav> 등이 있습니다.

<!-- O -->
<div>
  블록요소 안
  <span>인라인요소 중첩 가능</span>
</div>
 
<!-- X -->
<span>
  인라인요소 안
  <div>블록요소 중첩 불가능</div>
</span>

<!-- O -->
<div>
  블록요소 안
  <span>인라인요소 중첩 가능</span>
</div>
 
<!-- X -->
<span>
  인라인요소 안
  <div>블록요소 중첩 불가능</div>
</span>

3.2 inline 요소

인라인 요소는 항상 블록 레벨 요소 내에 포함되며, 콘텐츠의 흐름을 끊지 않고, 컨텐츠에 따라 할당된 공간만 차지합니다. 문장이나 단어 같은 작은 부분에 대해 적용되며, 새로운 줄을 만들지 않습니다.

• 항상 블록 레벨 요소 내에 포함됩니다.
• 콘텐츠의 흐름을 끊지 않으며, 컨텐츠에 따라 할당된 공간만 차지합니다.
• 문장, 단어 같은 작은 부분에 대해서 적용됩니다.
• 새로운 줄을 만들지 않습니다.
• width, height 크기를 지정할 수 없고, padding, border, margin 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없습니다!
• 대표적인 인라인 요소로는 <a>, <em>, <strong> 등이 있습니다.

3.3 inline-block 요소

• 기본적으로 인라인 요소의 속성을 따르면서 너비와 높이를 조절할 수 있습니다
  • 인라인 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치
  • 블록 요소처럼 너비와 높이 지정 및 margin, padding 상하 간격 지정 가능
• button, input, select