HTML DOM Link sizes 속성 완벽 정리

HTML DOM Link sizes 속성이란?

HTML DOM의 Link sizes 속성은 <link> 요소의 sizes 속성(attribute) 값을 반환합니다. sizes 속성은 주로 파비콘(favicon)처럼 웹사이트 아이콘을 연결할 때 해당 아이콘의 크기를 지정하는 용도로 사용됩니다.

참고: sizes 속성은 link 요소의 rel 속성이 'icon'으로 설정된 경우에만 유효합니다. 그 외의 rel 값에서는 의미가 없으므로 반드시 함께 사용해야 합니다.

문법(Syntax)

sizes 속성값을 반환하는 기본 문법은 다음과 같습니다.

linkObject.sizes

반환되는 값은 문자열 형태이며, 예를 들어 "10x10", "16x16 32x32", "any" 등이 될 수 있습니다.

예제(Example)

다음은 Link sizes 속성을 활용한 실전 예제입니다. 페이지에서 아이콘 크기가 호환되는지 검사한 후 그 결과를 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>Link sizes</title>
<link id="extStyle" rel="icon" href="new.gif" sizes="10x10">
</head>
<body>
<form>
<fieldset>
<legend>Link-sizes</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var extStyle = document.getElementById("extStyle");
    if(extStyle.sizes == '10x10')
       divDisplay.textContent = 'The linked icon size: '+extStyle.sizes+' is not compatible';
    else
       divDisplay.textContent = 'Congrats! The linked icon size is compatible';
</script>
</body>
</html>

코드 설명

위 예제의 동작 흐름은 다음과 같습니다.

<head> 안에서 id가 extStyle인 <link> 요소가 rel="icon", sizes="10x10"으로 선언됩니다.
자바스크립트에서 extStyle.sizes로 sizes 값을 읽어옵니다.
값이 '10x10'이면 "연결된 아이콘 크기(10x10)는 호환되지 않습니다"라는 메시지를, 그렇지 않으면 "축하합니다! 연결된 아이콘 크기가 호환됩니다"라는 메시지를 화면에 표시합니다.

예제 화면의 폼과 필드셋 스타일은 별도의 CSS 파일(style.css)로 분리해 관리할 수 있으며, 참고용 스타일은 다음과 같습니다.

form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}

실행 결과(Output)

위 코드를 실행하면 sizes 조건 판별 결과에 따라 다음과 같은 메시지가 화면에 출력됩니다.

HTML DOM Link sizes 속성 완벽 정리 – 문법과 실전 예제

정리

Link sizes 속성은 <link> 요소에 지정된 아이콘 크기 정보를 자바스크립트로 읽어올 때 사용합니다. rel="icon"과 함께 사용해야 하며, 여러 크기를 공백으로 구분해 지정하거나 SVG처럼 크기 제약이 없는 아이콘에는 any 값을 사용할 수 있습니다. 파비콘 호환성 검사나 디바이스별 아이콘 처리 로직을 구현할 때 유용하게 활용됩니다.