지스토리

유튜브 영상 시작시간

이편한 — Fri, 8 Jul 2022 08:33:14 +0900

데스크톱 버전에서는 공유 시 시작시간 넣고 주소를 복사할 수 있도록 해놓은거 같은데
핸드폰 앱에서는 볼 수 없음

그럼 주소 뒤에 파라미터 값을 추가해주면 됨

예) https://youtu.be/JFZIBnQPyqA/t=2m26s (영상의 2분 26초부터 시작하는 링크)

Brackets 에디터 다운로드 하고 다크모드 사용하기

이편한 — Fri, 28 Jan 2022 09:04:40 +0900

https://brackets.io/

A modern, open source code editor that understands web design

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.

brackets.io

다운로드는 공식 홈페이지에서 가능하다.

따로 셋팅 없이 자동완성,
CSS quick edit,
새로고침 안 해도 되는 live preview

테마 기본 설정이 라이트 모드인데 다크 모드로 설정을 바꾸려면
보기 > 테마... > 테마 설정에서 현재 테마: Brackets Dark를 선택하면 된다.

윈도우10 폰트 바로가기 설치

이편한 — Thu, 16 Dec 2021 08:20:13 +0900

윈도우10 폰트 바로 가기를 사용하여 글꼴 설치 허용하기

제어판 > 모양 및 개인 설정 > 글꼴 > 글꼴 설정
"글꼴 설치" 항목의 "바로 가기를 사용하여 글꼴 설치 허용"에 체크하고 확인을 눌러주세요.

not css

이편한 — Wed, 13 Oct 2021 08:19:59 +0900

.header-top > .left :not(:last-child){margin-right:12px;}

윈도우10 듀얼모니터 작업표시줄 한쪽에만 나오게

이편한 — Wed, 6 Oct 2021 13:11:29 +0900

윈도우10 설정에서 [작업 표시줄]을 찾는다.
스크롤을 좀 내려서 "여러 디스플레이" 밑에 "모든 디스플레이에 작업 표시줄 표시"를 [끔]으로 설정하면 끝

리액트 전역 변수 (방법2)

이편한 — Tue, 28 Sep 2021 13:47:52 +0900

App.js

import MyProfile from "./components/MyProfile";

const iam = {
  lastName: "Hong",
  firstName: "GilDong",
  koName: "홍길동",
};

return (
  <div className="App">
    <MyProfile iam={iam} />
  </div>
)

MyP...js

class MyProfile extends Component {
  constructor(props) {
    super(props);
    this.iam = props.iam;
  }
  render() {
    return (
      <section id="MyProfile">
        <h2>
          Who am I <em> {this.iam.lastName}입니다</em>

리액트 전역 변수 (방법1)

이편한 — Tue, 28 Sep 2021 13:42:37 +0900

Tail.js

// function Tail(props) {
//     const mytailiam = props.iam;
//     return (
//       <div>
//         Tail 부분시작<br />
//         {mytailiam.firstName}입니다.<br />
//         Tail 부분끝
//       </div>
//     );
//   }

function Tail({ iam }) {
  return (
    <div>
      Tail 부분시작<br />
      {iam.firstName}입니다.<br />
      Tail 부분끝
    </div>
  );
}

export default Tail;

App.js

import Tail from "./components/Tail";

const iam = {
  lastName: "Hong",
  firstName: "GilDong",
  koName: "홍길동",
};

return (
    <div className="App">
      <Header />
      <Tail iam={iam} />
    </div>
)

더미 이미지

이편한 — Mon, 6 Sep 2021 09:42:29 +0900

예제 이미지 사용하기 (해당 영역에 맞는 사이즈의 이미지 넣기)에 유용한 사이트 두개를 소개합니다.

무료로 사용 가능한 더미이미지 다음과 같이 사용합니다:
<img src="http://lorempixel.com/400/200">

http://placeholder.com/

이미지 크기 및 형식 (.GIF, .JPG, .PNG, .WEBP) , 배경색 및 텍스트 색상, 텍스트 를 지정할 수 있습니다.

https://via.placeholder.com/150 150x150 이미지
https://via.placeholder.com/150x100 150x100 이미지
https://via.placeholder.com/300/09f/fff.png 이미지 파일 확장자
https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThis.com+Buyers+Guide 사용자 정의 텍스트(공백은 더하기로 지정)
https://via.placeholder.com/840x450/808080/ffffff 색상 코드로 배경/글자 색상 지정

Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers

Contents1 What Is Placeholder.com?2 How To Use Our Placeholders3 How To Set Image Size4 How To Set Image Formats5 How To Set Custom Text6 How To Set Background & Text Color6.1 Popular Hex Color Codes7 New! WEBP Support8 New! HTTPS Support9 NEW! Placeholde

placeholder.com

http://lorempixel.com/

http://lorempixel.com/400/200 400 x 200 임의의 사진
http://lorempixel.com/g/400/200 400 x 200 임의 회색 사진
http://lorempixel.com/400/200/sports 스포츠 카테고리의 무작위 사진
http://lorempixel.com/400/200/sports/1 사진 번호를 얻으려면 스포츠 카테고리에서 1/10
http://lorempixel.com/400/200/sports/Dummy-Text... 임의의 그림 에 사용자 지정 텍스트
http://lorempixel.com/400/200/sports/1/Dummy-Text... 선택한 그림 에 사용자 정의 텍스트

lorempixel - placeholder images for every case

lorempixel.com

로고 : 네이버 밴드

이편한 — Thu, 26 Aug 2021 10:13:15 +0900

sns_로고_네이버밴드.psd

2.29MB

인크루드 (include)

이편한 — Fri, 30 Jul 2021 15:50:48 +0900

코딩을 하다보면 인크루드를 꼭 쓰게 되는데 여러가지 언어에 맞게 쓰던 2015년에 정리 했던 글 여기에 다시 쓰기 (앞단에서 코딩할 때 저는 주로 상,하단 및 서브 왼쪽 메뉴를 인크루드 시켜놓고 작업을 합니다.)

html 인크루드

<?php include_once("inc/menu.php"); ?>

php 인크루드
<?php include_once("inc/menu.php"); ?>
<?php include_once $_SERVER["DOCUMENT_ROOT"]."/inc/menu.php"; ?>

jsp 인크루드
<jsp:include page="경로"> 1. 액션(Action) 방식 - include한 소스파일에 대해서 결과값을 계산 후 그 결과를 include
(차후 수정이 거의 없는 파일에 주로 사용)
<%@ include file="경로"%> 2. 지시어 방식 - include한 소스파일의 코드(소스) 자체를 include

asp인크루드

include, require의 차이

include : (파일 없을 때) 출력하고 계속 실행
require : (파일 없을 때)오류 출력하고 실행 멈춤

따라서...

개발할 때 include (단순 화면 출력 시 용이)
운영할 때 require (DB연결 및 함수 사용 시 필요한 로직 점검 시 용이)

include, require / include_once, require_once
연결시킬 파일이 없을 때 include, require 는 페이지를 표시할 수 없다고 나오고 _once는 정확한 에러를 표시한다.