전체 글 210

html>HTML video, audio 다루기

비디오를 넣고 싶으면  우선 비디오 파일을 작업폴더안에 준비합니다. 그리고 이렇게 쓰면 비디오가 보입니다.     비디오 태그에 넣을 수 있는 속성  muted는 음소거상태autoplay는 자동재생 (muted와 함께 넣어야 동작함)poster는 썸네일이미지preload는 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능)      비디오를 '배경'으로 쓰고싶다면  유행은 지났지만 어떻게 하는지 알아봅시다. 일반적인 Youtube 비디오 넣는 방법처럼 코드 복붙 이런게 아니라비디오 파일을 직접 다운받아서 같은 폴더에 준비하고다음처럼 레이아웃 짜면 됩니다.  설명하다  Buy Our Shoes! source 파일형식을  여러개 준비할 경우..

html 2024.07.10

htmi>sass 문법2. 가변성 mixin, use. _scss

Sass 문법 4. 코드를 한단어로 축약하는 @mixin 저번 시간에 배운 변수랑 매우 유사합니다.변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었는데 @mixin은 스타일 여러줄을 한 단어로 치환해서 사용가능합니다.  설명하다 @mixin 버튼기본디자인() { font-size : 16px; padding : 10px;}.btn-green { @include 버튼기본디자인(); background : green;}1. @mixin이라고 쓰고,2. 이름을 하나 지어주고 ( ){ } 붙이고,3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열하시면 됩니다.그럼 이제 밑에서 자유롭게 @include mixin이름 으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙됩니다.아무튼 여러줄을 한 단..

html 2024.07.10

html>Sass 기초 1편 : 셋팅 & Nesting &extend

VScode를 이용하려면 1. 일단 VScode 에디터를 설치하시고  2. 좌측에 보면 extension 메뉴가 있습니다. 눌러서 Live sass compile 검색해서 높은 버전을 설치합니다 (5.0.0 버전 이상 제발)  (검색하면 두어개 나올텐데 5.0 버전 이상 설치안하면 큰일남)  3. 그럼 이제 하단에 Watch Sass 버튼이 생기는데 누르면현재 작성한 SASS 파일을 자동으로 CSS 파일로 변환해줍니다.하단 바가 안보이면 View - Appearance - Status bar 켜면 됩니다.     [collapse]아니면 VScode 안쓸거면 이런 프로그램도 있습니다     SASS 문법 1 : 값을 저장해놓고 쓰는 '변수'  프로그래밍 배울 때 시험대비하듯 문법만 쭉 가르치는 나쁜 놈들..

html 2024.07.10