본문 바로가기

전체목록

Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리 # Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리 Responsive width with finitely filling the parent, and I wanna use display: flex; to align elements. 위와 같이 가로폭은 적당한 길이만큼만 확장되고, 나머지 안의 것들은 display: flex; 로 정렬하고 싶은데, 코딩을 해보면서 꽤 헤맸던 부분이라 정리할 겸 포스팅.## PH2024-07-30## TOC## HTML code```[.lang-html] 로그인 ```/와 같이 배치했음. 보면 helper div 로 이 추가된 걸 볼 수 있는데... CSS 는 다음과 같음.`.. 더보기
HTML docuK format ver. 2.3 (2023-10-25) --> -->HTML docuK format ver. 2.3 (2023-09-24)개인적으로 만들고 있는 LaTeX 비슷한 형태의 HTML document format + JavaScript. 이름은 그냥 docuK로 'document designed by kipid'란 뜻.This is an HTML document format named docuK which is rendered by JavaScript, jQuery, MathJax, and google code prettifier. Specific features are changable mode/font, resizable font-size/line-height, table of contents, auto numbering of sections.. 더보기
Recoeve.net IR (Investor Relations) 투자 발표 # Recoeve.net IR (Investor Relations) 투자 발표## PH2023-10-07 : First posting.## TOC## 창업아이템의 개발 동기세상에 정보, 지식, 물건들은 너무나 많습니다. 다수가 추천하는 정보, 지식, 물건들이 나에게 꼭 맞는 것만은 아닙니다. 지구상에는 80억명 (2023년 기준) 이 넘는 사람들이 있습니다. 그 중 나랑 비슷한 사람은 어느정도 있기 마련이지만, 그런 사람을 찾는 것은 쉬운일이 아닙니다. 한 사람의 모든 부분이/취향이 나랑 비슷하기는 힘들지만, 특정 분야에서는 취향이 비슷한 사람은 꽤나 많을수도 있습니다. 사람 중심으로 이루어지는 SNS가 많이 있지만, 이 사람의 특정 분야 이야기만을 내가 팔로우 할수는 없습니다.기본적인 철학은 "비슷한 .. 더보기
음악 플레이리스트 (Music Playlist) 만들기 in Recoeve.net # 음악 플레이리스트 (Music Playlist) 만들기 in Recoeve.net가입하셔서 별점 드래그 하는 것만으로도 자신만의 플레이리스트를 만들 수 있습니다.가입하기 페이지 https://recoeve.net/account/log-in 로 가셔서 ID를 입력하고 구글로 가입하기를 하시거나 간단하게 이메일 ID 비밀번호만 입력하시면 손쉽게 가입 됩니다.기본 카테고리는 제 계정의 카테고리들도 추가해서 카테고리를 뭘로할지 걱정을 조금 덜어드리려고 했습니다.## PH2024-05-07 : First posting.## TOC## [Music/Break]--K-Pop of kipid's Recoeve.net[Music/Break]--K-Pop of kipid's Recoeve.net:https://reco.. 더보기
Vertical center align by CSS in HTML # Vertical center align by CSS in HTMLHTML 의 div element 특성상 height 의 경우 child element 들의 height 가 다 계산이 되고 이것을 포함하는 식으로 height 가 정해져서 vertical align 한다는게 생각보다 쉽지가/간단하지가 않음. 그냥 단순하게 생각해보면 대충 이런 CSS 만 넣으면 세로 가운데 정렬이 될것 같지만 제대로 동작하지 않음. (이렇게 동작하도록 browser 들이 만들어줘도 될거 같은데 말이지 ㅡ..ㅡ)아무튼 여러가지 방법들이 검색에 걸리긴 하는데 모든 browser 에서 제대로 동작하는 건 별로 없는듯? =ㅇ=;;; 찾기 힘들다. 우선 대충만 정리해놓고 나중에 다시 정리하겠음.## TOC## Using fle.. 더보기
HTML CSS composes, and pseudo-element :after, :active:after, and transition # HTML CSS composes, and pseudo-element :after, :active:after, and transition Buttons Add Amount Add Async Add If Odd Images ## Style ```[#pre-code-style-transition.linenums.lang-css] ```/ composes 는 module 단에서만 동작하는듯. ## HTML ```[.linenums.lang-html] Buttons Add Amount Add Async Add If Odd Images ```/ ## RRA https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions .. 더보기
순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. # 순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. 현재 문자들로부터 만들어진 HTML 문서K 가 보여지고 있는 중입니다. ## 문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명 문서K 의 특징은 다음과 같습니다. 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능. 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능. 자동으로 만들어 주는 목차 (각 섹션, 하위 섹션으로 점프도 가능하고 각 섹션의 왼쪽 T 버튼을 누르면 목차로 이동됩니다.). 섹션들과 그림들 수식들 자동으로 숫자 이름 메겨주기. 참고 문헌 참조 (citing) 쉽게 하기, 팝업 형태로 참조한 문헌들 바로 보여주기. 그림이나 .. 더보기
Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서. # Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서. 쉽게 문서를 작성합시다. 초록 | docuK (문서K) and SEE (엄청 쉬운 편집) 이것은 HTML 문서 편집 형식 중 하나인 문서K 입니다. 자바스크립트, jQuery (쉬운 자바스크립트 프로그래밍을 도와주는 API), MathJax (수식 처리기), google code prettifier (코드 예쁘게 출력해주는 API) 로 처리되는 문서 형식입니다. 문서K 의 특징은 다음과 같습니다. 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능. 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능. 자동으로 만들어 주는 목차 (각.. 더보기
VtoV Back-end 개발자용 과제 테스트 # VtoV Back-end 개발자용 과제 테스트 VTOV 백엔드 개발자용 과제 테스트. ## TOC ##/ 목차는 자동으로 완성됨. ## 서울 주차장 정보 인증키: 4e4f6764766b6970363174666f6c63 서울시 주차장 정보 http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/1000/ 강남구 주차장 정보 http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/5/강남 압구정428 공영주차장 정보 http://openapi.seoul.go.kr:8088/(인증키)/json/GetParkInfo/1/5/ /1033125 미연계중인 공영주차장 정보 http://openapi.seoul.go.kr:.. 더보기
신종 알바 사기 (Whatsapp 통한 외국 part-time job fraud) # 신종 알바 사기 (Whatsapp 통한 외국 part-time job fraud) 현재 구직 중이라 Whatsapp 으로 일자리 제안이 와서 혹시나 내 프로필이나 포트폴리오 보고 IT 쪽 직장에 연결시켜 주려고 그러나 하고 답변을 하고 쭉 대화를 이어나가 봤는데, 알고보니 사기꾼이었던거 같음. ## TOC ## Shopbalmain.com (Balmain 은 정상적인 글로벌 회사 같은데, 그 이름을 도용해서 만든 가짜 사이트인듯.) 이쪽 사이트 로 유도하더니, 클릭 몇번 하면 손쉽게 수십만원 하루에 벌 수 있다고 꼬시면서 친절하게 이것저것 가르쳐 주기 시작. 처음엔 이런 알바도 있나? 싶긴 했는데, 하마터면 나도 깜빡 속아넘어갔을수도 있겠다는 생각이 듬. 돈을 출금하는거 까지는 괜찮은데, 더 돈을 벌.. 더보기
HTML a href tag with onclick return # HTML a href tag with onclick return 가장 간단하게 HTML a (anchor/닻) tag 를 사용하는 방법은 ``` link or #hash text ```/ 와 같다. 그런데 간혹 이 링크를 다르게 처리하고 싶을때도 있다. (페이지 새로고침 없이 ajax 로 처리한다던지, pop-up 을 하고 싶다던지, stopPropagation 을 필요로 한다던지 등.) 이땐 다른 html element 들에서도 사용되는 onclick attribute 를 써주면 되는데, 아래와 같은 것들에는 주의가 필요하다고 한다. JavaScript recommendations It is often the case that an anchor tag is used with the onclick e.. 더보기
Email by JAVA (자바 프로그램을 이용해 이메일 보내기, com.sun.mail:jakarta.mail:2.0.1 :: 2021-04-06 에 update 가 끝나있는 오래된 library 임.) # Email by JAVA (자바 프로그램을 이용해 이메일 보내기, com.sun.mail:jakarta.mail:2.0.1 :: 2021-04-06 에 update 가 끝나있는 오래된 library 임.) 이메일 (Email) 을 프로그래밍적으로 보내고 싶은데 어떻게 해야할까? 개인적으로는 Recoeve.net 에 회원가입을 할 때, 계정 만들고 이메일 통해 인증/확인 하기 위한 용도로 이메일을 활용하려고 하는 중인데, 또 비밀번호를 잊어버렸다거나 했을때의 보완수단으로서 활용하려고... 이러려면 아무튼 프로그래밍적으로 이메일을 보낼 수 있어야 한다. 어떻게 하면 될까? ## TOC ## Gmail (지메일) by com.sun.mail:jakarta.mail:2.0.1 (2021-04-06) Gmai.. 더보기

티스토리툴바