분류 전체보기(1092)
-
Web/HTML, CSS
2022.12.19
[Html] track 태그 사용법 (video에 자막 연결하기)
최근에는 영상에 자막을 넣는 것이 거의 필수가 되었습니다. 자막이 청각장애인들이 영상을 볼 수 있도록 해줄뿐더러 주변 소음이나 소리를 들을 수 없는 상황에서 영상의 내용을 이해하는데 도움이 되기 때문입니다. HTML5에서는 track 태그를 활용하여 영상에 자막을 연결해 줄 수 있습니다. 이번 포스팅에서는 track 태그를 활용하여 영상에 자막을 넣는 방법에 대해 알아보도록 하겠습니다. track 태그 사용법 kind 속성 (자막 종류) 속성 값 설명 subtitles 자막을 의미합니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 영상에 표시됩니다. captions 캡션을 의미합니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사..
-
Web/HTML, CSS
2022.12.17
[Html] video 태그 사용법 & 예제 총정리
HTML5에 새로 추가된 태그 오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다. video 태그 사용법 HTML5에서 웹 문서에 영상을 첨부하고 싶다면 태그를 사용합니다. 위의 예제처럼 video 태그와 src에 비디오 파일의 경로만 작성해주면 웹 문서에 영상이 첨부됩니다. 하지만 보통 video태그는 controls(컨트롤 막대) 속성과 함께 사용한다는 것은 알아두셨으면 좋겠습니다..
-
Web/HTML, CSS
2022.12.14
2
[Html] audio 태그 사용법 & 예제 총정리
HTML5에 새로 추가된 태그 오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다. audio 태그 사용법 HTML5에서 배경음악이나 효과음 등 오디오를 삽입할 때는 태그를 사용합니다. 웹 사이트에 특히 bgm을 설치할 때 많이 사용합니다. audio 태그에서 사용할 수 있는 파일 확장자 설명 mp3 대부분의 음원에서 사용되며 Moving Picture Experts Group에 의해 ..
-
Web/HTML, CSS
2022.12.12
[Html] img 이미지 태그 사용법 총정리(src, 사이즈, 정렬, 테두리, 캡션 등)
텍스트만 있는 사이트보다는 다양한 이미지들이 있는 사이트들이 조금 더 직관적이고 예쁜 사이트를 만들 수 있습니다. HTML에서 사이트에서 이미지를 나타낼 수 있는 태그는 태그입니다. 이번 포스팅에서는 태그의 사용법에 대해 알아보도록 하겠습니다. img 태그 사용법 img 태그는 imgage의 줄임말로써 이미지를 삽입해주는 태그입니다. 반드시 src라는 속성을 동반하며 이 src에 이미지 경로를 작성해주셔야 정상적으로 출력됩니다. 참고로 태그는 꼭 사용하지 않아도 됩니다. 이미지 태그의 다양한 속성들은 아래 내용들을 참고해주세요. src 속성 (이미지 경로) See the Pen 이미지 태그 사용법 by wjdxo513 (@wjdxo513) on CodePen. 이미지를 웹 문서에 넣으려면 src속성에 정..
-
Web/HTML, CSS
2022.12.06
3
[Html] 시맨틱 태그(Semeantic Tag)란 무엇인가?
시맨틱 태그란? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하시면 이해가 편합니다. 이런 시맨틱 태그는 HTML5에서는 처음 등장했습니다. 예를 들자면 나 같은 태그들을 말합니다. 이 태그들은 이름만 봐도 상단과 하단이라는 것을 알겠죠. 이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었습니다. 시맨틱 태그를 사용해야 하는 이유 웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도 태그를 활용하여 웹 문서를 똑같이 만들 수 있습니다. 하지만 우리가 시맨틱 태그를 사용해야 하는 이유는 크게 아래의 3가지 이유가 있습니다. HTML..
-
Web/HTML, CSS
2022.12.05
[Html] HTML이란 무엇인가? (feat HTML5)
HTML이란? HTML은 Hyper Text Markup Language의 약자로 이것을 그대로 번역해보자면 하이퍼 텍스트를 마크업 하는 언어라고 할 수 있겠습니다. 여기서 Hyper Text(하이퍼 텍스트)는 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 이동할 수 있는 기능을 의미하고 Markup(마크업)은 태그(tag)를 사용해 문서에서 제목 본문 이미지 등을 표시하는 것을 말합니다. 즉 HTML을 한마디로 정리해보자면 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 태그를 활용한 언어라고 HTML의 정의를 내려볼 수 있겠습니다. 현재는 웹 표준을 제정하는 W3C(World Wide Web Consortium)에서 표준을 권고하고 발전시키고 있습니다. W3C(World Wide Web Consor..
-
일상/제품리뷰
2022.12.05
2
[내돈내산] 애플 에어팟 맥스(스페이스 그레이) 구매 및 사용 후기
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 애플의 제품이 품질이 좋기는 하지만 비싼 가격 대비 가성비가 좋다고는 생각이 들지 않습니다. 저에게는 애플의 제품들은 사고는 싶으나 가격이 만만치 않아 막상 구매하기에는 부담스러운 포지션의 브랜드입니다. 애플의 제품을 좋아하시는 분들도 아이폰, 에어팟까지는 필수적으로 구매를 하시지만 애플 워치나, 에어팟 맥스와 같이 있으면 좋고 없으면 마는(?) 그런 제품들은 잘 구매하시지 않으시죠. 하지만 비싼 제품이라도 누군가에게는 굉장히 유용하게 사용될 제품이 될 수 있을 겁니다. 저에게는 음악을 좋아하는 친구가 있습니다. 애플 광팬이었던 그 친구는 애플스토어에서 한번 들어보고 완전히 아이팟 맥스에 매료되어 버렸습니다. 하..
-
ETC.
2022.12.03
1
[Instagram] 인스타그램 로그인 없이 스토리, 게시물, 팔로워 보는 방법
일반인들은 물론이고 상당히 유명한 사람들까지 정말 많은 사람들이 인스타그램을 합니다. 그래서 인스타그램을 하지 않는 사람들도 유명인이나 지인들의 인스타 스토리가 궁금해서 들어가 보는 경우가 종종 있는데요. 하지만 인스타그램 정책으로 인해 인스타를 하지 않는 사람들은 타인의 인스타그램 스토리를 보기 위해서는 반드시 로그인을 해야만 볼 수 있습니다. 이로 인해 인스타의 가입을 원치 않는 사람들도 부득이하게 인스타그램을 가입해야 하는 상황이 발생하는데 이는 굉장히 번거롭습니다. 이번 포스팅에서는 인스타그램을 로그인 없이 게시물, 스토리, 팔로워 등을 보는 방법에 대해 알아보도록 하겠습니다. 인스타그램 로그인 없이 스토리, 게시물, 팔로워 보는 방법 인스타그램을 로그인 없이 스토리, 게시물, 팔로워 등을 보는 ..
-
ETC.
2022.11.30
1
[Instagram] 인스타그램 PC 버전 URL 접속방법 & 설치 / 다운로드 방법
모바일보다는 PC가 확실히 사용자 친화적입니다. 손가락보다는 마우스가 낫고 모바일의 키패드보다는 컴퓨터의 키보드가 사용성이 좋죠. 인스타그램도 아무리 모바일에 최적화되어 있는 프로그램이라고는 하지만 PC로 사용하는 것이 사용성면에서 훨씬 좋습니다. 특히 댓글을 달거나, 글을 쓸 때는 모바일보다 훨씬 편리함의 체감이 많이 됩니다. 이번 포스팅에서는 인스타그램을 PC에서 사용할 수 있는 방법에 대해 포스팅해보려 합니다. 인스타그램 PC버전 사용하기 인스타그램은 모바일 버전만 오랫동안 지원하고 있었는데요. 최근에는 드디어 PC버전도 출시하였습니다. 아래 링크된 URL에 접속하셔서 사용하시면 됩니다. 인스타그램 PC버전에서도 모바일에서 사용할 수 있는 대부분의 기능을 제공하고 있기 때문에 조금만 적응하시면 사용..
-
ETC.
2022.11.27
7
[YouTube] 유튜브 뮤직 PC 버전 다운로드 / 설치 방법
정말 많은 분들이 유튜브 프리미엄을 사용하고 계십니다. 이에 따라 유튜브 프리미엄을 결제하면 무료로 사용할 수 있는 유튜브 뮤직을 사용하시는 분들 또한 굉장히 많아졌는데요. 이렇게 유튜브 뮤직을 사용하시려는 분들은 모바일뿐만이 아니라 PC에서도 유튜브 뮤직을 즐기고 싶을 수 있겠죠. PC에서 유튜브 뮤직을 들을 때는 보통은 유튜브 뮤직 URL에 직접 접속해서 음악을 감상하시고는 합니다. 하지만 이렇게 브라우저를 통해서 유튜브 뮤직을 사용하려 한다면 브라우저의 탭 하나는 계속 유튜브 뮤직으로 할당하고 있어야 하고, 이로 인해 사용자 실수나 브라우저 오류로 인해 브라우저가 꺼질 수도 있고, 다른 음악을 틀기 위해서는 유튜브 뮤직을 실행하고 있는 탭을 찾아야 하는 등의 다양한 문제점들이 발생할 수 있습니다. ..
-
Web/HTML, CSS 2022.12.19[Html] track 태그 사용법 (video에 자막 연결하기) 최근에는 영상에 자막을 넣는 것이 거의 필수가 되었습니다. 자막이 청각장애인들이 영상을 볼 수 있도록 해줄뿐더러 주변 소음이나 소리를 들을 수 없는 상황에서 영상의 내용을 이해하는데 도움이 되기 때문입니다. HTML5에서는 track 태그를 활용하여 영상에 자막을 연결해 줄 수 있습니다. 이번 포스팅에서는 track 태그를 활용하여 영상에 자막을 넣는 방법에 대해 알아보도록 하겠습니다. track 태그 사용법 kind 속성 (자막 종류) 속성 값 설명 subtitles 자막을 의미합니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 영상에 표시됩니다. captions 캡션을 의미합니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사..
-
Web/HTML, CSS 2022.12.17[Html] video 태그 사용법 & 예제 총정리 HTML5에 새로 추가된 태그 오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다. video 태그 사용법 HTML5에서 웹 문서에 영상을 첨부하고 싶다면 태그를 사용합니다. 위의 예제처럼 video 태그와 src에 비디오 파일의 경로만 작성해주면 웹 문서에 영상이 첨부됩니다. 하지만 보통 video태그는 controls(컨트롤 막대) 속성과 함께 사용한다는 것은 알아두셨으면 좋겠습니다..
-
Web/HTML, CSS 2022.12.14 2[Html] audio 태그 사용법 & 예제 총정리 HTML5에 새로 추가된 태그 오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다. audio 태그 사용법 HTML5에서 배경음악이나 효과음 등 오디오를 삽입할 때는 태그를 사용합니다. 웹 사이트에 특히 bgm을 설치할 때 많이 사용합니다. audio 태그에서 사용할 수 있는 파일 확장자 설명 mp3 대부분의 음원에서 사용되며 Moving Picture Experts Group에 의해 ..
-
Web/HTML, CSS 2022.12.12[Html] img 이미지 태그 사용법 총정리(src, 사이즈, 정렬, 테두리, 캡션 등) 텍스트만 있는 사이트보다는 다양한 이미지들이 있는 사이트들이 조금 더 직관적이고 예쁜 사이트를 만들 수 있습니다. HTML에서 사이트에서 이미지를 나타낼 수 있는 태그는 태그입니다. 이번 포스팅에서는 태그의 사용법에 대해 알아보도록 하겠습니다. img 태그 사용법 img 태그는 imgage의 줄임말로써 이미지를 삽입해주는 태그입니다. 반드시 src라는 속성을 동반하며 이 src에 이미지 경로를 작성해주셔야 정상적으로 출력됩니다. 참고로 태그는 꼭 사용하지 않아도 됩니다. 이미지 태그의 다양한 속성들은 아래 내용들을 참고해주세요. src 속성 (이미지 경로) See the Pen 이미지 태그 사용법 by wjdxo513 (@wjdxo513) on CodePen. 이미지를 웹 문서에 넣으려면 src속성에 정..
-
Web/HTML, CSS 2022.12.06 3[Html] 시맨틱 태그(Semeantic Tag)란 무엇인가? 시맨틱 태그란? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하시면 이해가 편합니다. 이런 시맨틱 태그는 HTML5에서는 처음 등장했습니다. 예를 들자면 나 같은 태그들을 말합니다. 이 태그들은 이름만 봐도 상단과 하단이라는 것을 알겠죠. 이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었습니다. 시맨틱 태그를 사용해야 하는 이유 웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도 태그를 활용하여 웹 문서를 똑같이 만들 수 있습니다. 하지만 우리가 시맨틱 태그를 사용해야 하는 이유는 크게 아래의 3가지 이유가 있습니다. HTML..
-
Web/HTML, CSS 2022.12.05[Html] HTML이란 무엇인가? (feat HTML5) HTML이란? HTML은 Hyper Text Markup Language의 약자로 이것을 그대로 번역해보자면 하이퍼 텍스트를 마크업 하는 언어라고 할 수 있겠습니다. 여기서 Hyper Text(하이퍼 텍스트)는 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 이동할 수 있는 기능을 의미하고 Markup(마크업)은 태그(tag)를 사용해 문서에서 제목 본문 이미지 등을 표시하는 것을 말합니다. 즉 HTML을 한마디로 정리해보자면 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 태그를 활용한 언어라고 HTML의 정의를 내려볼 수 있겠습니다. 현재는 웹 표준을 제정하는 W3C(World Wide Web Consortium)에서 표준을 권고하고 발전시키고 있습니다. W3C(World Wide Web Consor..
-
일상/제품리뷰 2022.12.05 2[내돈내산] 애플 에어팟 맥스(스페이스 그레이) 구매 및 사용 후기 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 애플의 제품이 품질이 좋기는 하지만 비싼 가격 대비 가성비가 좋다고는 생각이 들지 않습니다. 저에게는 애플의 제품들은 사고는 싶으나 가격이 만만치 않아 막상 구매하기에는 부담스러운 포지션의 브랜드입니다. 애플의 제품을 좋아하시는 분들도 아이폰, 에어팟까지는 필수적으로 구매를 하시지만 애플 워치나, 에어팟 맥스와 같이 있으면 좋고 없으면 마는(?) 그런 제품들은 잘 구매하시지 않으시죠. 하지만 비싼 제품이라도 누군가에게는 굉장히 유용하게 사용될 제품이 될 수 있을 겁니다. 저에게는 음악을 좋아하는 친구가 있습니다. 애플 광팬이었던 그 친구는 애플스토어에서 한번 들어보고 완전히 아이팟 맥스에 매료되어 버렸습니다. 하..
-
ETC. 2022.12.03 1[Instagram] 인스타그램 로그인 없이 스토리, 게시물, 팔로워 보는 방법 일반인들은 물론이고 상당히 유명한 사람들까지 정말 많은 사람들이 인스타그램을 합니다. 그래서 인스타그램을 하지 않는 사람들도 유명인이나 지인들의 인스타 스토리가 궁금해서 들어가 보는 경우가 종종 있는데요. 하지만 인스타그램 정책으로 인해 인스타를 하지 않는 사람들은 타인의 인스타그램 스토리를 보기 위해서는 반드시 로그인을 해야만 볼 수 있습니다. 이로 인해 인스타의 가입을 원치 않는 사람들도 부득이하게 인스타그램을 가입해야 하는 상황이 발생하는데 이는 굉장히 번거롭습니다. 이번 포스팅에서는 인스타그램을 로그인 없이 게시물, 스토리, 팔로워 등을 보는 방법에 대해 알아보도록 하겠습니다. 인스타그램 로그인 없이 스토리, 게시물, 팔로워 보는 방법 인스타그램을 로그인 없이 스토리, 게시물, 팔로워 등을 보는 ..
-
ETC. 2022.11.30 1[Instagram] 인스타그램 PC 버전 URL 접속방법 & 설치 / 다운로드 방법 모바일보다는 PC가 확실히 사용자 친화적입니다. 손가락보다는 마우스가 낫고 모바일의 키패드보다는 컴퓨터의 키보드가 사용성이 좋죠. 인스타그램도 아무리 모바일에 최적화되어 있는 프로그램이라고는 하지만 PC로 사용하는 것이 사용성면에서 훨씬 좋습니다. 특히 댓글을 달거나, 글을 쓸 때는 모바일보다 훨씬 편리함의 체감이 많이 됩니다. 이번 포스팅에서는 인스타그램을 PC에서 사용할 수 있는 방법에 대해 포스팅해보려 합니다. 인스타그램 PC버전 사용하기 인스타그램은 모바일 버전만 오랫동안 지원하고 있었는데요. 최근에는 드디어 PC버전도 출시하였습니다. 아래 링크된 URL에 접속하셔서 사용하시면 됩니다. 인스타그램 PC버전에서도 모바일에서 사용할 수 있는 대부분의 기능을 제공하고 있기 때문에 조금만 적응하시면 사용..
-
ETC. 2022.11.27 7[YouTube] 유튜브 뮤직 PC 버전 다운로드 / 설치 방법 정말 많은 분들이 유튜브 프리미엄을 사용하고 계십니다. 이에 따라 유튜브 프리미엄을 결제하면 무료로 사용할 수 있는 유튜브 뮤직을 사용하시는 분들 또한 굉장히 많아졌는데요. 이렇게 유튜브 뮤직을 사용하시려는 분들은 모바일뿐만이 아니라 PC에서도 유튜브 뮤직을 즐기고 싶을 수 있겠죠. PC에서 유튜브 뮤직을 들을 때는 보통은 유튜브 뮤직 URL에 직접 접속해서 음악을 감상하시고는 합니다. 하지만 이렇게 브라우저를 통해서 유튜브 뮤직을 사용하려 한다면 브라우저의 탭 하나는 계속 유튜브 뮤직으로 할당하고 있어야 하고, 이로 인해 사용자 실수나 브라우저 오류로 인해 브라우저가 꺼질 수도 있고, 다른 음악을 틀기 위해서는 유튜브 뮤직을 실행하고 있는 탭을 찾아야 하는 등의 다양한 문제점들이 발생할 수 있습니다. ..