Svelte 강의 (2) - Dynamic attributes

Svelte에서 요소의 속성을 제어하는 방법이다.

 

동적으로.

 

전에 중괄호를 사용하여 텍스트를 제어 했는데 이를 사용해

 

요소 속성을 제어 할 수 있다는 것인데

<script>
	let src = '/image.gif';
</script>

<img />

 

코드를 보면 src라는 변수에 image.gif 파일 경로를 넣었고 이를 이미지로 띄우려면

 

밑에 <img /> 부분을 

 

<img src={src}/>

 

로 변경하면 그림이 웹으로 들어간다. src는 source의 줄임말로 html에서는 보통 파일의 소스 혹은 원본의 경로를 

 

지정하는데 사용한다. 개발 공부를 할때 src는 src구나 하고 외우지만 말고 무슨 의미인지 알아보는 것도

 

도움이 될것이다.

 

근데 위에와 같이 쓰기만 하면 A11y : <img> element should have an alt attribute 경고가 나오는데

 

이는 웹 어플리케이션을 개발할때 접근성을 고려해야 한다는 경고이다. 사실 무시해도 되긴 하지만

 

개발시에는 Warn 부문을 무시하지 않는 습관을 기르자. 나중에 귀찮으면 disable하거나 ignore로 처리하는 경우도

 

있긴하다...ㅎㅎ

 

아무튼 alt라는 속성을 넣으면 더이상 경고 메시지는 뜨지 않는다. alt는 이미지에 대한 설명인데 사용자가

 

이미지를 볼 수 없는 상황이거나 다운로드할 수 없는경우에 해당 텍스트를 명시하는 것이다.

 

네트워크가 느리거나 src 값이 잘못되있는 경우도 텍스트로 대체된다

 

<img src={src} alt="A man dances." />
//shorthand attributes
<img {src} alt="{name} dances." />

 

위에거를 줄이면 밑에처럼 쓸 수 있다. (name도 let으로 선언해주자)