본문 바로가기

[IT/Programming]/HTML related

코드잇 풀스택 2기 - Week 1 # 코드잇 풀스택 2기 - Week 1## PH2024-07-25 : First posting.## TOC## OT코드잇: 이창신 강사님노유정 운영 매니저오전 - 김주현 클래스 매니저오후 - 강지화 클래스 매니저신예진 교육 PM 매니저LMS (코드잇 사이트 Learning Management System)### TIL (Today I Learned) & WIL (Weekly I Learned)TIL: 계획, 성취, 학습, 개선에 대한 내용은 꼭 포함하여 작성해 주세요!제목: [TIL 1일 차] (각장 개성 있게 글의 제목을 지어주세요!)오늘의 나는 무엇을 잘했을까? → 성취오늘의 나는 무엇을 배웠을까? → 학습오늘의 나는 어떤 어려움이 있었을까? → 개선내일의 나는 무엇을 해야 할까? → 계획WIL:제목.. 더보기
SNS 내보내기/공유하기 (Sharing a URI link through SNS) # SNS 로 URI 링크 내보내기/공유하기 (Sharing a URI link through SNS)Copy to clipboard, 트위터 (X), 페이스북 (Facebook), 레코이브 (Recoeve.net), 카카오톡 (Kakao talk), 라인 (Line), WhatsApp 등등 SNS 로 공유하기 기능 정리. 도 참고하시길.DocuK 에서도 구현해서 넣어놨음. 왼쪽 위랑 문서 제일 아래쪽에 삽입되도록. Pop-up 으로 하는것보다 그냥 새 창 띄우는게 내 취향이라, 새 창 띄우는 방식으로 동작. (iframe pop-in 이 되면 이걸로 하고 싶긴한데, iframe 을 다들 막아서 불가능함.)## TOC## Recoeve.net (레코이브)제가 만든 서비스인 recoeve.net 에서 바.. 더보기
인스타그램 (Instagram) 퍼오는 법 # 인스타그램 (Instagram) 퍼오는 법인스타그램 (Instagram) 퍼오기. embed 나 iframe tag 로 퍼올 수 있는듯?기본 url 에서 "/embed" 추가해야만 퍼와지는듯. 이것만 CSP (Content Security Policy) 를 외부에 열어둔듯한.## PH2023-06-08 : instagram.com \rightarrow www.instagram.com 으로 바꿔야 제대로 퍼와짐.## TOC## 다음과 같이 /p/post-id/ 형태의 URL 에 embed 를 추가하면 iframe 으로 퍼올 수 있음 .```[.lang-html]```/ ## ```/ Comment 는 따로 글을 긁어서 퍼와야 할듯?## embed instagram feed/userpage (인스타그램 .. 더보기
인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog) 인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog) 블로그에 물리/수학 관련 이야기를 쓰면서 수식 쓸 일이 많았는데, 해결 방법을 찾았다. 아래아한글 (hwp), MS-word도 수식입력기를 지원하지만, 복사와 편집이 쉬운 plain text 형태의 LaTeX 수식이 갑인듯 하다. 입력 방법에는 대략 아래와 같은 방법들이 있다. 각자 편할데로 골라잡자. 윈도우에서는 (Windows 7부터인가?) 손글씨로 입력한 수식도 인식하고 디지털화 해주는 수식입력기 (Math Panel Input) 도 기본 프로그램으로 제공한다. 이런 프로그램은 대체 어떻게 짠건지... 후덜덜;; Tablet PC가 대중화되면서 많은 사람들이 이용하기 시작할듯? 손으로.. 더보기
React 사용 설정하기 (esbuild) with TypeScript # React 사용 설정하기 (esbuild) with TypeScript우선 node.js 를 깔자. 그리고 프로젝트 폴더로 들어가서 (Terminal / Cmd) 에서 다음과 같은 명령어를 친다. (Bundler 로는 가장 빠르다고 알려진 esbuild 를 깔자.)```[.linenums]npm init -ynpm install --save-exact --save-dev esbuildnpm install react react-dom jquery immer use-immernpm install typescript typescript@next @types/react @types/react-dom @types/jquery ts-loader @babel/preset-typescript --save-dev.. 더보기
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) 쉽게 하기, 팝업 형태로 참조한 문헌들 바로 보여주기. 그림이나 .. 더보기

티스토리툴바