Welcome to Visit!!
Let's get it
웹 개발자로의 새로운 여정을 시작해 보겠습니다.
여러분들의 방문을
진심으로 환영합니다
웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃
참고하는 웹사이트 목록 💻
필자가 자주 참고하는 웹사이트를 둘러보세요.
CSS 스타일링 🎨
웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.
목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..
목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다. 예제 파일 작성하기 1. Index.html 수정 index.html의 body 부분 안에 밑의 코드를 작성한다. HTML 2. Style.css 작성. 우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } 이후 .box1 부분에 다음과 같이 CSS를 작성한다. CSS .box1 { width: 200px; height: 200px; border: 5px solid..
목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 1. 한줄만 나타내기 결과) Lorem, i..
목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..
Guest Book
블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~
Tag Page
원하시는 태그를 클릭해보세요.
Light Dev
Light Dev에서 공부한 내용을 정리합니다.
SCROLL DOWN
[HTML] 🏷️ Video 태그 사용법. 본문
목차
<video>태그는 HTML 상에서 비디오를 정의할 때 사용합니다. <video> 요소 내에 위치하는 텍스트는 사용자의 브라우저가 <video> 요소를 지원하지 않을 경우 화면에 표시됩니다.
비디오를 넣고 싶다면
비디오 파일 HTML 작성법
우선 비디오 파일을 작업 폴더 안에 준비합니다. 그리고 밑의 코드와 같이 작성하면 비디오가 보입니다.
<video>
<source src="비디오파일경로">
</video>비디오 태그에 넣을 수 있는 속성
비디오 태그 속성 작성법
비디오 태그를 사용할 때 여러가지 속성을 넣을 수 있는데, 그 속성은 다음과 같다.
- muted : 음소거 상태
- autoplay : 자동재생 (muted와 함께 넣어야 동작한다.)
- poster : 썸네일 이미지
- preload : 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능)
- controls : 재생, 정지 등 조작 메뉴를 보여준다.
- loop : 동영상을 반복 재생한다.
- poster : 동영상 재생 전에 보여줄 이미지이다.
- preload : 페이지를 열 때 무엇을 로드할지 정한다.
- auto : 동영상, 메타데이타 모두 로드한다.
- metadata : 메타데이타만 로드한다.
- none : 로드하지 않는다.
- source
- src : 동영상 위치를 입력한다. 웹브라우저가 가장 많이 지원하는 형식은 MP4이다.
- type : 동영상 타입을 알려준다. 만약 MP4 파일이라면 video/mp4라고 적는다.
- zzz : 웹브라우저가 video 태그를 지원하지 않을 때 출력될 텍스트이다.
그런데 video 태그를 사용할 때 상충되거나 혼자서는 작동하지 않는 속성이 있다. 예를 들어 autoplay로 정하면 preload는 무시된다. 크롬 등 일부 웹브라우저에서는 muted와 autoplay를 같이 사용해야 자동 시작이 작동한다. 이러한 속성을 넣은 video 태그를 사용하려면 다음과 같이 사용하면 된다.
<video autoplay muted loop poster="썸네일경로" preload="metadata">
<source src="비디오파일경로">
</video>예제 파일
여러개의 영상 넣기
- 브라우저에 따라 지원하는 코덱이 다르기 때문에 한 가지 형식만 사용했을 경우 일부 오래된 브라우저에서는 작동을 안 할 수 있습니다. 사용자의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저도 모두 비디오를 재생할 수 있도록 ogv 파일도 함께 지정해주어야 합니다
<video>
<source src="비디오 파일 경로" type="video/mp4"></source>
<source src="비디오 파일 경로" type="video/ogg"></source>
대체 내용
</video>반복해서 재생되는 영상 예제.
- 페이지가 로드되면 동영상이 자동 재생되고, 반복하여 재생된다.
controls를 사용하지 않았기 때문에 재생이나 정지 등 조작 메뉴가 보이지 않는다.video태그를 지원하지 않는 웹브라우저에서는 'Your browser does not support the video tag.'를 진하게 출력한다.
<video muted autoplay loop>
<source src="videos.mp4" type="video/mp4">
<strong>Your browser does not support the video tag.</strong>
</video>재생되기 전 이미지를 보여주는 영상 예제.
- 페이지가 로드되면
image.png라는 이미지와 재생 메뉴를 보여준다. - 재생 버튼을 클릭하면 동영상을 재생한다.
video태그를 지원하지 않는 웹브라우저에서는 'Your browser does not support the video tag.'를 진하게 출력한다.
<video controls poster="image.png">
<source src="videos.mp4" type="video/mp4">
<strong>Your browser does not support the video tag.</strong>
</video>🎉 예제 파일
위의 3가지 예제 파일을 codesandbox로 구현하면 다음과 같다.
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.
GitHub
Light Dev
Email
사이트를 방문해 주셔서 감사합니다
만일 도움이 되셨으면 공감과 구독 버튼 클릭 부탁드립니다.
추가적인 질문사항이나 이해가 안되는 점이 있으면 댓글로 적어주세요.
© Copyright 2023 Light