개요 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; - 지정하지 ..
개요 x-mouse 의 기능을 활용하여 가상 데스크탑을 좀더 편리하게 활용해보자. - x-mouse 다운로드: https://www.highrez.co.uk/downloads/xmousebuttoncontrol.htm windows 10 가상 데스크탑 가상 데스크탑이란, 마치 여러대의 컴퓨터 화면을 오가듯 할 수 있는 것을 말한다. prefix key 는 CTRL +WIN 이라고 보면 될 듯 하다. 대부분의 경우 CTRL +WIN 키를 먼저 누르고 특정 키를 눌러 가상 데스크탑 명령을 실행한다. 대표적인 단축키는 다음과 같다. CTRL + WIN + D 새로운 가상 데스크탑 생성 CTRL + WIN + LEFT / RIGHT 가상 데스크탑 사이를 이동하기 CTRL + WIN + F4 가상 데스크답 닫기 ..
개요 체크박스들이 있는데, 하나를 클릭하고, 쉬프트를 누른 채 나머지 하나를 클릭하면, 마지막으로 클릭했던 체크박스와 지금 쉬프트를 누른채 클릭한 체크박스 사이의 모든 체크박스가 체크 되도록 한다. 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 이다. - 완료되었다는 느낌..
개요 console 의 다양한 함수를 써보자. 해보니깐 신기하고 재미나다. Breakpoint 사용해보자 1) 만약 버튼을 만들어 두었다면, Element 탭에서 해당 코드를 우클릭하여 2) Break on >> attribute modification 을 설정해두면 3) 실제로 해당 를 클릭하였더니 breakpoint 가 먹힌다. console.log 사용법 1) console.clear() 를 사용하면 그 이전의 출력이 다 지워진다. 2) console.log() 는 일반적 출력 3) formatting 을 하는 두 방법, `` 와 ${} 를 사용하는 방법 추천 4) %c 를 이용해 style 을 넣어줄 수 있다. 5) warning, error, info 등을 먹일 수 있다. - 나중에 이걸로 필터..
개요 HTML5 Canvas 기능 맛보기 내용 #draw 의 # 은 뭘까 - id 일때에는 # 을 쓰자. 1) hsl 알아보기 - Hue, Saturation, Lightness 이다. - Hue 는 0 to 360 까지의 색깔이다. 빨간색 0, 초록색 120, 파란색 240 이다. - Saturation 은 0%는 그레이, 100% 는 Full color 이다. - Lightness 는 0%는 검정, 100%는 흰색이다. 2) beginPath() 함수 - 새로운 경로를 만든다. - 이후로 이렇게 새로 생성된 경로에 다양한 명령으로 구성하고 만들게 된다. EventListener() 4개 - 마우스가 눌려진 경우에만 그려질 수 있도록 해준다. - 처음 시작할때의 좌표를 눌려진 순간의 좌표로 해준다. -..
개요 Array 관련해서 몇몇 함수들을 더 들여다 보자 이번 편은 매우 짧다. 내용 첫 번째로 가지고 놀 배열 배열의 some() 함수에 파라미터로 함수를 넣어주는데 - 배열 원소를 파라미터로 받아서, 참 / 거짓을 리턴하는 함수이다. - some() 함수는 파라미터로 들어온 함수가 하나라도 true 를 리턴하면 true 를 리턴 배열의 every() 함수에 파라미터로 함수를 넣어주는데 - 배열 원소를 파라미터로 받아서, 참 / 거짓을 리턴하는 함수이다. - every() 함수는 파라미터로 들어온 함수가 하나라도 false 를 리턴하면 false 를 리턴 두 번째로 가지고 놀 배열 배열의 find() 함수에 파라미터로 함수를 넣어주는데 - 배열 원소를 파라미터로 받아서, 참 / 거짓을 리턴하는 함수이다...
개요 특정 단어를 포함하는 도시명, 주명을 아래에 리스트로 보여준다. style.css z-index - 정수값이며 (= 음수, 0, 양수) - 여럿을 겹치게 놓을 수 있으며 - 클 수록 앞에 놓이게 된다. → 소스에서는 여기에만 쓰이며, 다른 녀석들보다는 항상 위에 두겠다는 것이다. 검색된 값이 아코디언처럼 보이게 해주는 부분이다. 1) even, odd 로 표현할 수 있는 것이 재미있다. - 자연어에 점점 가까워지는 프로그래밍 언어이다. 2) 각도를 각각 3, -3씩 돌리고, 그에 따라 비어지는 공백을 y 좌표를 조금 내리면서 해결한게 아닐까 싶다. scale 역시 좀더 자연스럽게 보이게 값을 넣어가면서 조절한 것일듯 → 실제 값을 변화시켜가며 확인해보면 될듯 하다. 1) 아무것도 안먹였을때 2) r..
개요 2주차 정리를 바탕으로, 4주차 즈음의 정리를 해봄. 결혼 이후엔 나 자신에게 투자할 시간이 부족해지고, 일상의 스트레스는 먹는 것에 대한 심리적 제한을 풀어버려서 해결한지 오래되었다. - 과식, 과음은 아니지만, 입이 궁금하면 다양한 간식을 챙겨먹고, 면식, 탄산, 야식, 음주를 절제하지 않았다. 몸무게는 최고점을 찍었고, 현 상황에서의 해법을 고민해왔다. - 운동은 몇 달 전부터 하루 만 보 걷기와, 직장 계단 2번 오르기 (= 총 40 층) 를 해왔고, - 식이요법으로 반식 다이어트, 그리고 간헐적 단식을 시도해보게 되었다. - 계기가 된 후기 링크: https://www.clien.net/service/board/use/12944105 - 책 링크: http://aladin.kr/p/hhaG..
- Total
- Today
- Yesterday
- Shortcut
- 2023
- solid
- 영화
- 체호프
- agile
- pool
- 노션
- Gin
- golang
- OpenAI
- intellij
- 잡학툰
- JIRA
- 인텔리제이
- Bug
- 독서
- bun
- websocket
- folklore
- notion
- github
- API
- 클린 애자일
- 제이펍
- ChatGPT
- go
- postgres
- 독서후기
- strange
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |