HTML에서는 media 속성을 사용하여 링크된 문서가 어떤 미디어나 기기에 최적화되어 있는지 지정할 수 있습니다. 이 속성은 주로 스타일시트를 화면, 프린터 등 특정 출력 대상에 맞게 적용할 때 활용됩니다.
media 속성은 다음과 같은 요소들과 함께 사용할 수 있습니다.
- <a> – 하이퍼링크를 정의하는 요소
- <area> – 이미지 맵의 클릭 가능한 영역을 정의하는 요소
- <link> – 외부 리소스(스타일시트 등)를 연결하는 요소
- <source> – 미디어 파일의 대체 소스를 지정하는 요소
- <style> – 문서 내 스타일 정보를 정의하는 요소
사용 예제
아래 예제에서는 link 요소에 media 속성을 "screen"으로 설정하여, 연결된 스타일시트가 화면 출력용임을 명시하고 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML media 속성 예제</title>
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<p>데모 텍스트입니다.</p>
</body>
</html>
media 속성 값은 필요에 따라 다양하게 지정할 수 있습니다. 예를 들어 "print"로 설정하면 인쇄 시에만 적용되는 스타일을, "all"로 설정하면 모든 기기에 공통으로 적용되는 스타일을 정의할 수 있습니다. 또한 "screen and (max-width: 768px)"처럼 미디어 쿼리 조건을 조합하면 반응형 웹 디자인 구현에도 활용할 수 있습니다.