글

라벨이 html인 게시물 표시

위지윅스 richtext

  Draft.js : 페이스북에서 만든 라이브러리로, 커스터마이징하기 좋고, 기본 기능도 안정적입니다. https://draftjs.org/ Slate.js : 가볍고 다양한 플러그인으로 확장 가능. 마크다운 같은 형식으로 텍스트를 저장할 때 유리해요. https://www.slatejs.org/ Quill : 가볍고, 빠르게 사용할 수 있는 WYSIWYG 에디터. 필요 없는 기능은 제거하고 커스터마이징 가능. https://quilljs.com/docs/quickstart

React input에서의 value

 React input에서의 value를 꼭 써야하나? `value={wordSearched}`는 React에서 입력 요소를 제어 컴포넌트로 만들 때 필요한 속성입니다. 제어 컴포넌트란 React 상태(state)를 통해 입력 요소의 값을 제어하는 방식을 말합니다. 이를 통해 React는 입력 요소의 상태를 관리하고, 변경할 때마다 화면이 자동으로 업데이트됩니다. ### 왜 필요한가요? 1. **상태 관리**: `value={wordSearched}`를 사용하면 입력 요소의 현재 값을 `wordSearched` 상태에 연결할 수 있습니다. 사용자가 입력하는 내용이 상태에 반영되므로, 이 값을 이용해 다양한 연산을 수행하거나 다른 컴포넌트와 상호작용할 수 있습니다. 2. **제어**: React가 입력 요소의 상태를 관리하므로, 사용자 입력에 따라 다른 컴포넌트나 기능을 동작시킬 수 있습니다. 예를 들어 검색 기능이나 필터링 기능을 구현할 때 매우 유용합니다. 3. **일관성**: React의 가상 DOM(Virtual DOM)에서는 상태와 UI를 동기화하기 위해 입력 요소의 상태를 추적합니다. `value` 속성을 사용하면 React가 이 변화를 감지하고 UI를 업데이트할 수 있습니다. ### 사용하지 않을 때의 문제점: 만약 `value={wordSearched}`를 사용하지 않고 입력 요소를 일반 HTML처럼 사용한다면, React의 상태 관리를 이용하지 않고 DOM에 직접 접근해야 합니다. 이는 React의 성능과 일관성을 저하시킬 수 있고, 복잡한 상태 관리나 UI 업데이트를 구현하기 어려울 수 있습니다. 따라서, React에서는 입력 요소의 상태를 제어 컴포넌트로 만들어 `value` 속성을 사용하여 상태를 관리하는 것이 좋은 프랙티스입니다. 이는 React의 기본 원칙 중 하나이며, React의 강력한 상태 관리 기능을 활용하는 방법입니다. `useEffect`는 주로 컴포넌트가 마운트되거나 업데이트될 때 부수 효과(side effects)를...

onSubmit 이벤트가 예상치 않게 작동하는 경우: form 안의 버튼은 무조건 on submit이 작동함(form 제출됨)

 React에서 `onSubmit` 이벤트가 예상치 않게 작동하는 경우는 여러 가지가 있을 수 있습니다. 코드를 보면, `onSubmit` 핸들러는 `form` 태그에 바인딩되어 있어서, "Submit" 버튼을 클릭하면 `makeCrossWord` 함수가 호출되어야 합니다. 하지만, 어떤 상황에서는 사용자가 "Submit" 버튼을 클릭하지 않았음에도 불구하고 이 함수가 호출되는 것처럼 보일 수 있는데, 그 원인 중 일부를 살펴보겠습니다: 1. **버튼의 기본 타입**: HTML에서 `<button>` 태그의 기본 `type`은 `submit`입니다. 이는 `<button>`이 `form` 내에 있을 때, 클릭되면 `form`의 `onSubmit` 이벤트를 발생시킨다는 것을 의미합니다. 코드 내에 "목록 보이기" 옆에 있는 추가 버튼(`<button onClick={...}>+</button>`)에 `type="button"`을 명시적으로 추가하지 않으면, 이 버튼이 클릭될 때도 `form`이 제출될 수 있습니다. 이를 해결하기 위해, 해당 버튼에 `type="button"`을 추가해 보세요:    ```jsx    <button      type="button"      onClick={() => {        setwordLst([...wordlst, ""]);      }}    >      +    </button>    ``` 2. **이벤트 버블링**: 때때로, 버튼 클릭 이벤트가 상위 DOM 요소로 전파되어 `form`의 `onSubmit`을 실수로 트리거할 수 있습니다. 그러나 이 사례에서는 `e.preventDefault()`가 `onSub...

모바일 드래그 금지

드래그 금지해도 모바일 다른 브라우저 써보면 드래그 되는 경우가 많은데 이 블로그를 참고했더니 성공했다 초고수인듯 https://worksmart-turtlebox.tistory.com/4

css에서 gray grey 됨

 css에서 gray grey 됨 https://stackoverflow.com/questions/70430577/why-does-css-accept-grey-but-not-colour

Emmet으로 html css 단축키 사용하기

"Emmet"은 웹 개발자와 디자이너들에게 인기 있는 플러그인입니다. 이 플러그인은 HTML, CSS 코드를 빠르게 작성할 수 있도록 도와줍니다. Emmet을 사용하면 복잡한 HTML 구조나 CSS 속성을 간단한 약어로 표현하고, 이를 자동으로 전체 코드로 확장할 수 있습니다. 예를 들어, 웹 개발자가 "div>ul>li*5"라는 Emmet 약어를 입력하고 트리거를 실행하면, 이 코드는 다음과 같은 HTML 구조로 자동 확장됩니다: ```html <div>     <ul>         <li></li>         <li></li>         <li></li>         <li></li>         <li></li>     </ul> </div> ``` Emmet은 대부분의 주요 코드 에디터와 호환되며, 웹 개발 작업의 효율성을 크게 향상시켜 줍니다. 특히 반복적인 작업을 줄여주고, 타이핑 속도를 높여줌으로써 개발 시간을 단축시켜 줍니다. Emmet을 사용하여 웹 개발을 더 효율적으로 할 수 있도록 기본적인 가이드를 제공하겠습니다. ### 1. Emmet 설치하기 Emmet은 대부분의 주요 텍스트 에디터와 IDE(Integrated Development Environment)에서 사용할 수 있습니다. 예를 들어, Visual Studio Code, Sublime Text, Atom 등에서 Emmet 플러그인을 설치할 수 있습니다. 설치 방법은 각 에디터의 문서나 플러그인 마켓플레이스에서 찾아볼 수 있습니다. ### 2. 기본 약어 Emmet에서는 HTML 요소와 속성을 빠르게 작...

pixijs

가장 빠르고 유연한 2D WebGL 렌더러를 사용하여 아름다운 디지털 콘텐츠를 제작하세요. https://pixijs.com/

react className 여러개

원래 HTML에서 `class` 속성은 공백으로 구분된 여러 개의 클래스 이름을 가질 수 있습니다. 예를 들면: ```html ... ``` React의 `className`도 마찬가지로 여러 개의 클래스 이름을 가질 수 있습니다. 위에서 제시한 방법은 React에서 여러 개의 클래스 이름을 가진 문자열을 생성하는 방법입니다. 예제로, `styles.diary_page`가 `"diary_page"`이고, `className`이 `"another_class"`라고 가정해봅시다. 이 두 클래스 이름을 합치기 위해 문자열 연결을 사용하여 최종적으로 `"diary_page another_class"`와 같은 형태의 문자열을 만들어야 합니다. 이렇게 만든 문자열을 `className`에 전달하면 React는 해당 요소에 두 클래스 이름을 모두 적용합니다. `className`을 여러 개 설정하려면 문자열을 결합해야 합니다. 지금 작성하신 방식은 JavaScript의 쉼표 연산자를 사용한 것으로, 이는 첫 번째 표현식 (`styles.diary_page`)을 평가하고 그 결과를 무시한 후 두 번째 표현식 (`className`)의 결과를 반환합니다. 따라서, `className`에 두 개 이상의 스타일을 적용하려면 문자열을 결합해야 합니다. 문자열 템플릿이나 `+` 연산자를 사용하여 결합할 수 있습니다. 예시: 1. **문자열 템플릿을 사용하는 방법**: ```jsx className={`${styles.diary_page} ${className}`} ``` 2. **`+` 연산자를 사용하는 방법**: ```jsx className={styles.diary_page + " " + className} ``` 두 번째 방법은 조금 더 전통적인 방법입니다. 하지만 문자열 템플릿 (첫 번째 방법)은 E...

js의 Element.tagName 은 반환 값이 대문자이다

 js의 Element.tagName 은 반환 값이 대문자이다 XHTML (또는 여느 XML 방식) 문서의 경우, 정의한 태그 명 그대로 가져오기 때문에, "span" 같은 소문자 태그명을 가져오게 될 것이다.그에 반해 HTML 문서에서는, 원본 문서에 정의된 태그명과 달리 대소문자를 무시하면서 대문자로만 이루어진 "SPAN" 값을 가져오게 된다. https://developer.mozilla.org/ko/docs/Web/API/Element/tagName

브라우저별 html css 사용 가능 범위 확인 사이트

  can i use 사이트에 검색하면됨 https://caniuse.com/

mailto

 이메일 전송창이 뜨게 하는 태그

[bootstrap] navbar 펼쳤을 때 접히지 않음

  bootstrap.min.js가 head랑 body에 둘다 있어서 생긴 문제 왜 이렇게 된건지는 아직 이해못함. head부분 없애줌. https://stackoverflow.com/questions/35759271/bootstrap-navbar-will-open-but-not-close

atom html 여러줄 한번에 쓰기

ctrl+alt 누르고 방향키로 줄 정함

html 단축키 플러그인 emmet

atom에서도 사용가능  atom에서 file>settings>+install>emmet검색 div>li*5 탭 이런식으로 사용 가능

sketch2code 그림으로 html 코드 생성하기

그림을 그려서 사진을 올리면 자동으로 html 코드를 생성해준다 https://sketch2code.azurewebsites.net/   미래에는 디자이너가 html 다 만드려나 이미지만 올리고 자동으로 코드 생성해서...