오랜만에 태그를 쓸일이 있어 사용하다 보니 크롬에서 autoplay가 먹지 않는다. 이유를 알아보니 구글 정책이 바뀌면서 소리가 들어가는 영상에서는 autoplay가 먹지 않는다. 다행히도 이번 작업에서의 소리가 필요가 없어 muted를 넣음으로 인해 autoplay가 구동 된다. 항상 유튜브 영상만 불러오다보니 태그를 쓸일이 없었는데 이참에 또 다른 지식을 하나 얻은 느낌이다. 아니면 내가 이젠 시대에 뒤쳐져 있거나 이참에 태그에 대해 간략히 정보만...  태그는 html 에서 비디오를 볼수 있게 할 수 있는 태그 이며 지원 형식은 MP4, WebM, OGG파일이다. 이벤트 옵션으로는autoplay     자동재생    autoplay  muted>  //크롬에서 autoplay를 쓰려면 mute..

쿠쿠 작업장(home page)/web 관련 2024. 6. 28. 13:54

javascript 나 div ID 값을 주고 이동시키는 방법도 있지만 간단하게 제이쿼리를 이용한 방법 맨위로 가는 애니메이션 버튼 만들기 맨 위로 맨 아래로 가는 애니메이션 버튼 만들기 맨 아래로

쿠쿠 작업장(home page)/jquery 관련 2021. 3. 1. 15:49

가끔 가다 써먹는 CSS 가상클래스(::before)를 이용한 디자인 (::after도 가능은 하겠지만 아직 디자인적인 요소로 사용한 적이 없어서......거의 clear:both 용도로만.....) 아래 이미지는 이해를 돕기위한 이미지 이며 실제로 사용하기 위해서는 폰트색깔이든가 사이즈는 알아서 조정하면 될듯 싶다. css 구문 content {position:relative} --> 내용 전체를 감싸주고 있는 박스 content:before {content:""; position:absolute; height:100%; width:1px; left:50%; background:#000} --> content 첫 가상요소를 잡아주는 내용으로 전체 중 가운데 검은색 라인을 표시 title {margin:..

쿠쿠 작업장(home page)/css 2021. 1. 25. 14:50

html 로 그림을 그릴수 있는 svg 태그 벡터 방식이라는데 태그로 일일히 그림을 그리는것 보다는 그냥 일러에서 그리는게 정신적으로는 편함. ㅡㅡ;; 하지만 유용한 것들이 많아서 그냥 끄적끄적...... svg element 사용법은 다음과 같다. 사용은 일반 html 코딩과 같은 구조 이며 안에 shape명만 적어주면 된다. shape 의 종류는 아래와 같다. Rectangle 사각형Circle 원Ellipse 타원Line 선Polyline 꺽이는 선Polygon 다각형Path 흠... 패치를 어떻게.......그냥 선연결이라고 해야하나? shape 종류의 사용법 박스의 기본 형태이며 width값이나 height값은 일반 html코딩과 다를게 없다. 단 style에 들어가는 내용이 조금 틀리다. ba..

쿠쿠 작업장(home page)/web 관련 2019. 11. 27. 14:52

반응형을 많이 만들다 보니 세로 정렬에 대해 궁금해지던차에 편법을 이용한 가로 정렬이 가능함 height 사이즈가 정해져 있다면 모를까 정해져 있지 않은 상태에서의 세로정렬은 transform 을 이용하여 가능하다 예시 테스트 라는 박스를 만들어 주고 css를 아래와 같이 주었을때 세로 정렬이 가능해 진다. 위와 같이 한다면 세로 정렬이 된다. 응용방법은 많다. 예를 들어 가로 정렬시에 많이 쓰이는 'margin:0 auto' 대신에 'left:50%; transform:translateX(-50%)' 사용할 수도 있다. 가로 세로 동시 정렬을 하고 싶을때는 'top:50%; left:50%; transform:translate(-50%, -50%)' 이런식으로 활용이 가능하다. 'transform' 속..

쿠쿠 작업장(home page)/css 2019. 4. 9. 14:44

오로지 css 만으로 accordion 효과 만들기 그냥 jquery를 써도 되지만 심심해서가 아니라 퍼블을 하다보니 매번 jquery를 가져와서 css 수정하는게 귀찮기도 해서 간단히 css만으로 만들수 있지않을까 해서 만들어봄 실제 거래처 질답(Q&A)부분에 적용시켜 사용중인 부분이다. 우선은 html 구조 질문1 답1 질문2 답2 질문3 답3 위와 같이 radio 버튼을 이용한 아코디언 효과를 만들 예정 이다. 다음은 css 구조 .qna_tabs {margin:0; padding:0; list-style:none} .qna_tabs input[type=radio] {display:none} .qna_tabs label {display:block; cursor:pointer; background:#..

쿠쿠 작업장(home page)/css 2019. 4. 5. 15:35

원페이지로 작업하는 홈페이지에서 부드럽게 화면을 이동 할 수 있는 방법 Jquery와 id값을 이용한 방법 jQuery 소스 클래스가 scroll_move인 a 태그를 눌렀을때 발생되게 하는 이벤트$(this.hash) a태그에 있는 해쉬 값으로 스크롤링 되며 이동 500 은 스크롤 속도 html 소스 test01test02test03test04test05클래스명은 동일하게 주고 여러번을 주어도 해당 a 태그 해쉬값으로 이동하게 된다. 내용 내용 내용 내용 내용

쿠쿠 작업장(home page)/jquery 관련 2019. 2. 25. 16:35

요즘은 홈페이지 대세가 반응형 인지라 ㅜ,.ㅡ 반응형에 맞게끔 작업을 하려면 %를 이용한 사이즈 작업을 해줘야 한다. 하지만 width는 %로 사이즈 정리를 해준다지만 height는 ??????? 물론 미디어 쿼리 를 이용해 각 해상도 마다. width 값 과 height 값을 주어도 되지만 그런 귀찮은 일을 피하고자.....편법으로 위와 같이 %로 사이즈를 주는 방법은 라고 주면 된다. test 위와 같이 안에 내용이 들어갈 경우 test position 값으로 해결해주면 된다. test 마지막으로 안에 내용을 가운데 정렬을 할 경우 test 이렇게 해주면 된다. 단, height값이 없을 경우 100%로 인식하게 된다. 텍스트만 넣을 경우 에는 width 값 대신 text-align:center을 넣..

쿠쿠 작업장(home page)/css 2019. 2. 13. 19:08