HTML에서 외부 리소스 사용하기
웹페이지에 이미지, 동영상을 삽입하려면 어떻게 할까요? 또한 CSS파일을 불러와 디자인을 입히거나, Javascript파일을 가져오려면 어떻게 할까요? HTML에서는 다른 외부 리소스들을 가져와 사용할 수 있습니다. 이번 포스팅에서는 이런 외부 리소스들을 어떻게 가져오는지, 어떤 태그에서 사용하는지, 어떤 속성들을 추가할 수 있는지, 그리고 그 결과가 어떻게 나타나는지를 보도록 하겠습니다.
img 태그로 이미지 삽입하기
img 태그를 사용하면 이미지를 웹페이지에 삽입할 수 있습니다.
img 태그는 스스로 닫는 태그이기 때문에 <img /> 와 같이 사용하며, src 속성 값으로 이미지 파일을 가져옵니다.
img 태그의 사용법을 알기 위해 속성에 대해 먼저 살펴보겠습니다.
img 태그의 속성
1. src
src는 불러올 이미지의 경로값을 넣는 속성이며, 이미지 리소스를 가져오기 위해서 이 값은 반드시 필요합니다. (이미지의 위치를 알아야 가져올 수 있기 때문)
<img src="https://cdn.pixabay.com/photo/2015/10/27/14/40/programming-1009134_960_720.jpg" />
경로를 보면 pixabay라는 사이트에 있는 이미지에 접근하고 있는데요.
pixabay는 무료 이미지들을 제공하는 사이트입니다. 이 사이트에 있는 이미지 중 하나를 가져와봤습니다.
이렇게 아예 다른 외부 사이트에서 이미지를 가져올 수도 있지만 내가 가지고 있는 이미지를 같은 프로젝트 폴더 내에 넣어서 사용할 수도 있습니다.
예를 들어 "웹페이지실습" 이라는 폴더 내에 index.html 이라는 파일과 photo.png라는 이미지 파일이 있다고 합시다. 그러면 index.html 파일에서는 다음과 같은 코드로 photo.png라는 파일을 불러와 그 이미지를 웹페이지 내에 삽입할 수 있습니다.
<img src="./photo.png" />
2. alt
<img src="./photo.png" alt="즐거운 웹개발" />
alt는 이미지를 설명하는 대체 텍스트입니다. 이 속성은 필수적으로 사용해야하는건 아니지만 사용하는 것이 좋긴 합니다. 이 속성이 없어도 이미지를 불러와 출력하는 데에 전혀 문제는 없지만 손해를 보는 점이 있기 때문입니다.
alt는 alternative(대안)의 약자이고, 속성값으로 작성한 이미지 설명은 이미지가 정상적으로 출력될 때는 보이지 않으나 이미지 출력에 실패했을 때 대신 나타낼 텍스트입니다.
이 속성이 중요한 이유는 검색엔진 최적화에 영향을 끼치기 때문입니다.
특히 이미지가 사이트에 대해 중요한 정보를 담고 있거나 검색엔진에 노출시키고 싶은 이미지라면 반드시 alt값을 넣어줘야 합니다. alt값이 이미지 검색어와 매칭 되는 중요한 키워드이기 때문입니다.
반면 단순히 장식만을 위해 사용되는 이미지인 경우에는 굳이 alt속성을 넣지 않아도 됩니다.
alt의 또 다른 용도가 있는데 이 값이 시각장애인을 위한 스크린리더에서 사용된다는 것입니다. 스크린리더는 이미지를 볼 수 없는 사람들을 위해 이미지 태그의 alt값을 읽어줍니다.
3. width와 height
<img src="./photo.png" alt="즐거운 웹개발" width=200 height=200 />
<img src="./photo.png" alt="즐거운 웹개발" width="100px" height="100px" />
<img src="./photo.png" alt="즐거운 웹개발" width="50%" height="50%" />
이미지의 사이즈를 조절하는 속성입니다. CSS로도 물론 조절이 가능합니다.
단위는 px 또는 %를 사용합니다. 단위를 적지 않으면 px단위가 적용됩니다.
4. title
<img src="https://cdn.pixabay.com/photo/2015/10/27/14/40/programming-1009134_960_720.jpg" width=200 height=200 title="코딩 이미지" />이미지 위에 마우스를 올려놓으면 title속성의 값으로 작성한 텍스트가 마우스 커서 밑에 조그맣게 나타납니다.
밑에 이미지 위에 마우스를 올려보세요. title값이 커서 밑에 조그만 박스 안에 나타나는 것을 볼 수 있을 것입니다.
이제 HTML에서 동영상을 삽입하는 방법을 알아보려고 하는데요. 먼저 옛날 방법부터 소개하고 그다음에 최신 방법을 소개하려고 합니다.
iframe 태그로 동영상 넣기 (옛날 방법)
src속성으로 동영상 주소 값을 받아옵니다.
이미지와 마찬가지로 외부 동영상을 가져올 수도 있고 자신의 프로젝트 폴더 내에 있는 내부 리소스를 가져올 수도 있습니다.
전체 화면을 허용하고 싶으면 allowfullscreen 속성을 넣어주면 됩니다. 속성 값은 필요 없습니다.(true가 default로 들어가 있기 때문)
width속성과 height속성으로 사이즈를 조절해줍니다.
태두리를 없애고 싶으면 frameborder=0 속성을 넣어줍니다.
가령 유튜브 동영상을 내 웹페이지에 삽입하고 싶으면 다음과 같은 코드를 삽입하면 됩니다.
<iframe src="유튜브동영상주소" width=560 height=315 frameborder=0 allowfullscreen></iframe>
iframe sandbox 속성
이 속성은 IE ~9 비롯한 과거 버전 브라우저와 opera mini에서는 적용되지 않는다는 점을 알려드립니다.
이건 무슨 속성이냐면 결론적으로 보안의 기능을 하는 것인데,
src속성 값인 주소에 해당하는 외부 웹페이지를 가져왔을 때 해당 웹페이지의 자바스크립트 코드를 실행하는 것을 방지하고 form태그의 submit도 먹통이 되게 하는 것입니다. 유튜브 동영상은 사실 보안적으로 문제를 일으키지는 않을 거라고 생각합니다만.. 혹시나 다른 신뢰할 수 없는 사이트의 동영상을 가져다 쓰는 경우에는 이런 보안을 신경을 쓰는 것이 좋습니다.
사용법은 간단합니다. 그냥 속성으로 sandbox를 적어주기만 하면 됩니다.
<iframe src="url" sandbox></iframe>
video 태그로 동영상 넣기 (최신 방법)
vidoe 태그는 최신기술답게 다양하고 편리한 속성을 제공해줍니다.
자주 쓰일만한 속성을 몇 가지 소개하자면 다음과 같습니다.
- controls는 사용자가 동영상 제어를 가능하게 만듦.
- loop는 반복 재생.
- muted는 오디오를 처음 재생할 때 음소거 상태로 재생.
- autoplay는 페이지를 로딩하면 동영상이 바로 자동재생.
이 속성들은 default가 false로 되어있어서 속성 이름만 적어주면 속성 값이 true로 적용됩니다.
controls은 autoplay가 아니라면 아마도 반드시 들어갈 속성입니다.
왜냐하면 autoplay와 controls이 둘 다 false일 때 사용자는 그것이 동영상 인지도 모르고 그냥 지나가게 되는 상황이 발생하게 될 테니까요.
그리고 동영상의 주소 값을 받아오기 위해서는 video태그 안에 source태그를 사용해서 src속성으로 주소를 받아옵니다.
위의 4가지 옵션을 모두 적용한 코드는 다음과 같습니다.
<video controls loop muted autoplay width=560 height=315>
<source src="동영상url" />
</video>
video 태그는 편리하다. 하지만 단점도 있다.
video 태그는 html5에 들어서서 처음 도입된 태그입니다. 따라서 html5를 지원하지 않는 과거 버전의 브라우저들에서는 video 태그가 동작하지 않습니다.
구체적으로는 IE 8 이하 버전과 opera 10.1 이하 버전을 비롯한 과거 버전은 video태그를 지원하지 않고opera mini도 지원하지 않습니다.
하지만 해당 브라우저의 점유율은 매우 낮으니 사실상 무시해도 무방하다고 봅니다.
개인적으로 편한 video태그를 선호합니다.
과거 버전 브라우저의 지원 미흡 말고 또 다른 단점은 브라우저마다 지원하는 동영상 포맷이 다르다는 겁니다.
각 브라우저가 어떤 포맷을 지원하는지는 계속 업데이트하며 변할 수 있기 때문에 웹페이지를 만드실 때 그때그때 검색해서 최신 정보를 찾아보시기를 권합니다. 현재 이 글을 작성하는 시점을 기준으로 모든 브라우저가 지원하는 포맷은 mp4입니다.
link 태그
link 태그는 현재 문서(document)와 현재 문서 밖에 있는 리소스 사이의 연결을 정의합니다.
즉, 현재 문서 밖에 있는 리소스를 현재 문서로 가져오는 기능을 하는 태그입니다.
link 태그의 속성
rel 속성은 리소스를 현재 문서에서 어떻게 사용할 것인지를 정의합니다.
대표적으로 css파일을 가져와서 적용시키려면 stylesheet값을 넣어줘야 합니다.
href 속성은 a 태그와 마찬가지로 리소스가 위치한 주소를 속성 값으로 받습니다.
* 예시 코드
<link rel="stylesheet" href="./public/stylesheets/mainbody.css">
이렇게 불러온 css파일은 해당 html문서에 잘 적용될 것입니다.
script 태그
script 태그는 스크립트 언어인 javascript를 안에 작성하기 위해 사용되는 태그입니다.
하지만 html 파일 내에서 직접 자바스크립트 코드를 작성하지 않고도 외부에 있는 자바스크립트 파일을 불러와서 사용할 수 있습니다.
img 태그처럼 src 속성을 이용해 파일의 위치를 알려주기만 하면 됩니다.
script 태그 내에 javascript를 직접 작성하는 예시는 다음과 같습니다.
<script>
var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
alert('hello');
});
</script>
안에 있는 코드가 무슨 기능을 하는지가 아니라 자바스크립트 코드가 script 태그 내에 들어가 있다는 사실 자체를 확인해주세요.
script 태그로 외부에 있는 자바스크립트를 불러오는 예시는 다음과 같습니다.
<script src="./public/javascripts/main.js"></script>
css와 javascript는 이렇듯 html파일 내에서 직접 작성할 수도 있지만 html파일 외부에 있는 리소스를 불러와서 사용할 수도 있습니다.
리소스 관리
이런 내부 정적 리소스들을 사용하는 경우에는 리소스들만 따로 한 폴더 내에 모아서 관리하는 것이 유지보수에 용이합니다.
예를 들면 이미지 파일은 images 폴더, 동영상 파일은 videos폴더와 같이 따로 만들어서 그 안에 각각 이미지, 동영상 파일들을 모아서 관리하는 것이 좋습니다. 이런 폴더 구조 디자인은 개발을 많이 하다 보면 본인만의 스타일이 생기게 됩니다.
최근댓글