비디오를 넣는 방법 - 1

가장 간단하게 넣는 방법입니다.

video 코드를 사용하되 잊지 말고 'controls'를 적으셔야 해요~! 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <video src="다운로드/비디오.mp4" controls></video>

</body>
</html>

 

비디오를 넣는 방법 - 2

호환성을 생각한다면 이 방법을 추천드립니다.

다양한 타입을 위해서, 그리고 (순서대로) 위에 것이 안될 때 그 밑에 것이 재생되도록 설정하시면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <video controls autoplay muted>
    <source src="다운로드/비디오.mp4" type="video/mp4">
    <source src="다운로드/비디오.webm" type="video/webm">
  </video>

</body>
</html>

 

비디오 태그 설정 정리

- controls 컨트롤 

-  자동재생은 autoplay muted
-  preload="none" 미리 다운 x
   preload="auto" 미리 다운 o
   preload="meatadata" 미리 다운 적당히
-  poster="경로" 썸네일 이미지
-  loop 무한반복

※ 추가로 비디오를 배경으로 넣는 건 로딩문제, 유행지남으로 추천 안합니다!

 

오디오 넣는 방법
autoplay 넣어도 안됩니다. 하고 싶으면 자바스크립트로 작업하셔야 합니다. 

<audio src="다운로드/오디오.mp3" controls muted></audio>
반응형
저작자표시 비영리 변경금지

'프로그램 > vscode' 카테고리의 다른 글

[ HTML ] <button> 버튼에 링크걸기 / <a> 링크 이동창 화면이동 방법  (3) 2024.09.27
button태그 부모 태그 width 영향 받지 않기  (0) 2024.09.23
[css] video 태그 사용 시 검은색 라인 제거  (0) 2024.08.29
pseudo-element  (0) 2024.07.15
반응형 디자인 핵심 개념  (0) 2024.06.11

버튼에 링크를 걸려면 <a href ="#">을 별도로 쓰는 것보다

버튼 태그안에 onclick = "location.href = '#' "을 넣으면 가능해요.

<button type="button" onclick="location.href='../join.html' ">회원가입</button>

 

추가로 a 링크의 주로 쓰는 target 속성
_blank 새로운 탭에서 이동

새로운 탭에서 이동
<a href="http://www.naver.com" target="_blank">네이버</a> 

새로운 탭에서 이동
<a href="http://www.naver.com" target="_blank">네이버</a>



한 페이지에서 맨 위 또는 맨 아래로 이동하는 방법

<p id="top"> //
<a href="#button">맨 아래로</a>!--'button'이라는 id값을 가진 위치로 이동-->
<br>
.
.
.
.
<a href="#top">맨 위로</a>
<p id="button">

 

반응형
저작자표시 비영리 변경금지

'프로그램 > vscode' 카테고리의 다른 글

사이트 내 '비디오, 오디오'를 html 활용해서 넣는 방법  (0) 2024.11.21
button태그 부모 태그 width 영향 받지 않기  (0) 2024.09.23
[css] video 태그 사용 시 검은색 라인 제거  (0) 2024.08.29
pseudo-element  (0) 2024.07.15
반응형 디자인 핵심 개념  (0) 2024.06.11

부모태그에 width값이 지정, display:flex가 된 경우

자식태그인 button은 width값에 꽉 채워지게 된다

 

 

 

이 때 자식 태그에

 

width:max-content

 

를 주변 해결된다

 

반응형
저작자표시 비영리 변경금지

'프로그램 > vscode' 카테고리의 다른 글

사이트 내 '비디오, 오디오'를 html 활용해서 넣는 방법  (0) 2024.11.21
[ HTML ] <button> 버튼에 링크걸기 / <a> 링크 이동창 화면이동 방법  (3) 2024.09.27
[css] video 태그 사용 시 검은색 라인 제거  (0) 2024.08.29
pseudo-element  (0) 2024.07.15
반응형 디자인 핵심 개념  (0) 2024.06.11 
    video {
    outline: none;
    border: 0;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

 

반응형
저작자표시 비영리 변경금지

'프로그램 > vscode' 카테고리의 다른 글

[ HTML ] <button> 버튼에 링크걸기 / <a> 링크 이동창 화면이동 방법  (3) 2024.09.27
button태그 부모 태그 width 영향 받지 않기  (0) 2024.09.23
pseudo-element  (0) 2024.07.15
반응형 디자인 핵심 개념  (0) 2024.06.11
css 이미지 틴트 효과, 반응형 div 가로 2열 배치 방법  (0) 2024.06.05

숨겨져 있는 요소 스타일을 줄 때

사용합니다 ::(pseudo-element)

 

<input type="file" class="input-file">

<style>
.input-file::file-selector-button {
  background:#ddd;
  border:none;
  padding:20px;
}

.input-file::file-selector-button:hover {
  background:#d4d4d4;
}
</style>

 

 

 

float 하단에 적용해보기

 

원래는 <div style="clear:both; float:none"></div> 로 해결했던 것을

가상의 박스를 생성하는 것으로도 가능합니다.

 

<div class="float-end">

.float-end::after {

  content : '';

  display:block;

  clear: both;

  float : none;

}
반응형
저작자표시 비영리 변경금지

'프로그램 > vscode' 카테고리의 다른 글

button태그 부모 태그 width 영향 받지 않기  (0) 2024.09.23
[css] video 태그 사용 시 검은색 라인 제거  (0) 2024.08.29
반응형 디자인 핵심 개념  (0) 2024.06.11
css 이미지 틴트 효과, 반응형 div 가로 2열 배치 방법  (0) 2024.06.05
Window 11 이하 CSS가 적용 안될 때, IE 호환성 작업  (0) 2024.04.26
  1. 기준 설정: 반응형 디자인을 시작할 때 본인의 기준을 명확히 설정합니다. 이는 디자인의 일관성과 효율성을 높이는 데 중요한 역할을 합니다.
  2. 해상도 대응: 다양한 해상도에 대응할 수 있도록 디자인합니다. 고해상도와 저해상도 모두에서 최적의 사용자 경험을 제공하기 위해 각각에 맞춘 디자인 요소를 고려합니다.
  3. 분기점 설정: 디바이스마다 또는 화면 크기에 따른 변환점마다 분기점을 설정해 최적화를 진행합니다. 이러한 분기점은 일반적으로 브레이크포인트라고 불리며, 각 디바이스나 화면 크기에 맞춘 레이아웃과 스타일을 정의합니다.
  4. 디바이스별 디자인 고려: PC와 모바일을 포함한 각 디바이스에서 디자인이 어떻게 보여질지를 고민하고 설계합니다. 각 디바이스의 특성과 사용 패턴을 고려해 사용자에게 최적의 경험을 제공하는 것이 중요합니다.
  5. 공통 요소 통일화: PC와 모바일 등 다양한 디바이스에서 공통으로 사용되는 디자인 요소를 최대한 일치시키고, 이를 가이드라인으로 문서화합니다. 이를 통해 전체 디자인의 일관성과 통일성을 유지합니다.
  6. 협업 및 소통: 반응형 디자인의 공통 가이드는 디자이너뿐만 아니라 퍼블리셔도 함께 사용하는 것이기 때문에, 퍼블리셔와의 협업이 중요합니다. 반응형 디자인의 구체적인 설계 방안을 함께 고민하고 논의하여, 프로젝트의 목표와 방향성을 명확히 합니다.

이러한 개념들을 기반으로 반응형 디자인을 구현하면, 다양한 디바이스와 해상도에서 일관된 사용자 경험을 제공할 수 있습니다. 반응형 디자인은 단순히 레이아웃의 변경뿐만 아니라, 사용자 경험의 최적화를 목표로 해야 합니다.

 

 

반응형 디자인에서 분기점(브레이크포인트) 설정은 중요한 단계입니다. 대부분의 분기점은 디바이스의 화면 크기와 해상도를 기준으로 설정됩니다. 아래에 일반적으로 사용되는 브레이크포인트와 예시를 들어 설명하겠습니다.

일반적인 브레이크포인트 설정

  1. 모바일 디바이스 (스마트폰)
    • 최소 화면 크기: 320px
    • 최대 화면 크기: 480px
    • 예시: iPhone SE, Android 작은 화면 디바이스
  2. 태블릿 디바이스
    • 최소 화면 크기: 481px
    • 최대 화면 크기: 768px
    • 예시: iPad Mini, Samsung Galaxy Tab
  3. 작은 화면의 데스크탑 / 큰 화면의 태블릿
    • 최소 화면 크기: 769px
    • 최대 화면 크기: 1024px
    • 예시: iPad Pro, 작은 노트북 화면
  4. 데스크탑 디바이스
    • 최소 화면 크기: 1025px
    • 최대 화면 크기: 1200px
    • 예시: 일반적인 노트북, 작은 데스크탑 모니터
  5. 큰 화면의 데스크탑 디바이스
    • 최소 화면 크기: 1201px
    • 예시: 고해상도 데스크탑 모니터, 대형 디스플레이

 

/* 모바일 (스마트폰) */
@media (max-width: 480px) {
    body {
        background-color: lightblue;
    }
    .container {
        padding: 10px;
    }
}

/* 태블릿 */
@media (min-width: 481px) and (max-width: 768px) {
    body {
        background-color: lightgreen;
    }
    .container {
        padding: 20px;
    }
}

/* 작은 화면의 데스크탑 / 큰 화면의 태블릿 */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        background-color: lightyellow;
    }
    .container {
        padding: 30px;
    }
}

/* 데스크탑 */
@media (min-width: 1025px) and (max-width: 1200px) {
    body {
        background-color: lightcoral;
    }
    .container {
        padding: 40px;
    }
}

/* 큰 화면의 데스크탑 */
@media (min-width: 1201px) {
    body {
        background-color: lightgrey;
    }
    .container {
        padding: 50px;
    }
}
반응형
저작자표시 비영리 변경금지

'프로그램 > vscode' 카테고리의 다른 글

[css] video 태그 사용 시 검은색 라인 제거  (0) 2024.08.29
pseudo-element  (0) 2024.07.15
css 이미지 틴트 효과, 반응형 div 가로 2열 배치 방법  (0) 2024.06.05
Window 11 이하 CSS가 적용 안될 때, IE 호환성 작업  (0) 2024.04.26
깃허브 - vscode와 터미널로 연결하기  (0) 2024.04.19

+ Recent posts

티스토리툴바