just_HS

개요 웹캠의 video stream 을 받아서 브라우저 상에서 다양하게 가지고 놀아본다. style.css overflow-x: scroll - 가로축 (x축) 으로 내용이 넘칠때에 scroll bar 가 나오도록 함 nth-child - 웹캠이 없어 확인은 못했지만 지그재그로 흩뿌려져 이어진 모습으로 찍은 사진이 보이도록 하려는 것으로 보임 index.html 1) 버튼을 누르면 takePhoto() 라는 함수가 실행된다. 2) RGB 에 대해 각각 min 값 max 값을 설정할 수 있다. - 각각의 값은 rmin, rmax, gmin, gmax, bmin, bmax 에 저장(?) 된다. 3) photo class 를 사용하는 canvas 가 하나있고 4) player class 를 사용하는 video..

개요 시간 값들을 추출해서 더해보자. 이 과정에서 reduce() 를 이해하자 내용 data 속성 이용하기 - 참고링크: https://junhobaik.github.io/html-dataset/ - HTML 의 태그안에 데이터 속성을 넣어둔 다음, - 그 데이터를 JavaScript 또는 CSS 에서 가져다 쓸 수 있다. 1) 태그 안에 data- 으로 적어둔다. - 예) data-time, data-age, data-count 등등 2) 이후에 JavaScript 에서라면 dataset. 으로 불러다 쓸 수 있다. - 예) dataset.time, dataset.age, dataset.count 2-2) CSS 에서라면 [data-time="5:43"] 과 같이 특정 element 들을 선택할 수 있..

개요 리스트를 정렬해서 뿌려줘보자. 문자열들을 정렬하는데, a, an, the (대소문자 무관)을 제외한 문자열들로 정렬해준다. 내용 1) align-items 와 align-content 의 차이 - align-content 는 여러줄 사이의 간격을 정의하는 것이고 - align-item 은 item 자체의 정렬을 정의하는 것이다. - 출처: https://goo.gl/8thXHN 2) list-style 의 타입은 square, 포지션은 inside - 각각 리스트 앞 표시를 사각형으로 해주고, 표시가 리스트 박스(?) 안쪽에 위치한다는 것이다. 리스트 하나 하나의 아래쪽에 1px 한 줄을 그어주는데, 마지막 리스트에는 줄을 긋지 않겠다는 것이다. 1) strip() 은 들어온 문자열에서 해당되는 정..

개요 마우스의 움직임에 연동하여 Text 의 Shadow 가 변하게 구현해보자 내용 Element 에 contenteditable 만 넣어주면 input 이나 textarea 태그와 마찬가지로 편집이 가능하게 된다. 1) hero 는 아래의 style 에 따라 전체 윈도우 화면을 차지하게 된다. 2) text 는 글자가 있는 태그를 가리키게 되고 walk 는 그림자가 떨어지는 비율과 관련이 있다. 3) 전체 윈도우를 커버하는 hero 는 mousemove event 가 발생하면 shadow 함수를 호출한다. shadow(e) 함수 1) hero.offsetWidth, hero.offsetHeight 를 각각 width, height 에 할당해준다. 마찬가지로 e.offsetX, e.offsetY 를 각각..

개요 - 입력한 값을 목록에 추가한다. - 입력한 값을 로컬에 저장하는 Local Storage 개념을 이해해본다. index-START.html - 참고 링크: https://css-tricks.com/using-svg/ - svg 얻을 수 있는 사이트: https://thenounproject.com/ - 이미지를 다운로드 한 다음 소스를 보면 svg 태그가 보인다 - svg 라는 태그를 통해 이쁜 이미지를 가져다 붙일 수 있다 1) 위와 같은 svg 이미지가 있고 2) h2, ul, li 태그들로 글자들이 위치해 있다. 3) 그리고 가장 중요한 입력창 form -- script 는 1) .add-items 를 가져온 addItems 2) .plates 를 가져온 itemsList 3) 그리고 입력된..

개요 Reference 와 copy 의 차이를 들여다보자 내용 문자열, 숫자, 불리언은 copy 된다. - 따라서 하나의 값을 바꾼다고, 다른게 따라 바뀌지 않는다. 하지만 배열은 다르다. (type 은 object 이다.) 각각의 item 값을 바꿨더니 둘 모두 값이 바뀌었다. - Dog 와 Tiger 배열을 reference 하지 않고 copy 하는 방법은 다양하다. - 개인적으로는 … 가 마음에 든다. 이번에는 구조체를 보자. 배열과 마찬가지이다. 둘은 연결되어 있다. reference 구조체도 마찬가지로 copy 할 수 있는 방법이 있다. - 역시나 … 가 가장 마음에 든다. 그런데 주의할 게 있다. copy 가 1단계만 된다는 것이다. 그 속에 중첩된 (nested) 배열이나 구조체는 copy ..

개요 1) 사진과 문단간의 레이아웃 이해 2) 사진이 멋지게 움직이며 들어오게 해보자 index-START.html 전체를 싸주는 클래스는 site-wrap text-align: justify 가 뭐였더라? - 한글로는 양쪽 정렬. - 왼쪽 오른쪽 끝이 각각 왼쪽, 오른쪽 정렬인 것처럼 만들고 - 중간의 여백 크기를 적절히 조절해주는 것이다. .align-left - float: left - 이미지 박스를 왼쪽에 띄운다. - 그러면 text 는 오른쪽에 위치하게 된다. - 참고링크: https://goo.gl/GyyRsj - margin-right: 20 px 만큼 text 와의 공간을 띄우는 거다. 나머지는 실제 java script 구현부에서 좀더 들여다 보자. * index-START.html 에서..

개요 간단한 강좌이다. 특정 키 조합을 타이핑하면 정해둔 액션이 실행된다. 1) 키 입력 이벤트 ('key up') 시에 이를 받아서 저장하고 2) 특정 키 패턴이 있는지 체크하는 것을 배우게 된다. - 도어락의 허수 기능처럼 쓸 수도 있겠다. 내용 1) cornify - js 파일 링크: http://www.cornify.com - cornify_add() 를 실행하면 랜덤한 유니콘 이미지가 브라우저 회면에 나타난다. 2) .splice() 함수 - splice 는 두 개를 꼬아서 붙인다 정도의 뜻이다. - 사용법 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) - start 인덱스부터 - deleteCount 개수만큼 삭제: 0이면 삭제안함 ..

개요 비디오 플레이어를 돌려보자 css 둘러보기 1) 기본 화면 2) 마우스를 올렸을때 3) 마우스로 슬라이더를 클릭했을때 border-box - 박스의 크기를 잴때에 바깥의 경계선까지 포함해서 잰다는 것이다. min-height - element 들의 최소한의 높이. 100 vh 란 전체 높이의 1/100 .player - 가장 바깥쪽 div border - 흰색이지만 앏고 거의 투명하게 처리되어 있다. position: relative - top, right, bottom, left 값으로 상대적 위치 조정 가능 overflow: hidden - content 가 element 경계를 넘으면 그 부분 감추기 :fullscreen - 풀스크린이 될때의 스타일 max-width: none; - 지정하지 ..

개요 체크박스들이 있는데, 하나를 클릭하고, 쉬프트를 누른 채 나머지 하나를 클릭하면, 마지막으로 클릭했던 체크박스와 지금 쉬프트를 누른채 클릭한 체크박스 사이의 모든 체크박스가 체크 되도록 한다. index-START.html 오랜만에 .css 와 div 레이아웃을 둘러보자. 1) 전체 div 는 inbox class 이다. - max-width: 전체 폭이 450 px - margin: 상하좌우중에서 위쪽만 50px, 나머지는 자동설정 - box-shadow: 그림자의 x, y offset 과 blur (클 수록 블러커짐), 그리고 rgba 값 2) 각각의 체크박스 리스트는 .item 이다. 3) input:checked+p - input:checked 바로 뒤에 오는 p 이다. - 완료되었다는 느낌..