|
Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
| getMaxZIndex (0) | 2024.03.04 |
|---|---|
| [z-index]x,y,z좌표를 생각하자 - 값이 높을수록 위에 있음 (0) | 2024.03.04 |
| [pointer-events: none;] disable copy&paste, 마우스 오른쪽 클릭 방지 등 (0) | 2024.01.18 |
| <div>와 대비되는 <p>특징: 내부에 다른 block요소 못넣음, 문단을 나누는 태그이므로 문단안에 끊기는게 있으면 안됨 (0) | 2024.01.12 |
| user agent stylesheet 각 브라우저마다 정해놓은 CSS 기본 규칙 (0) | 2024.01.12 |
input요소에 포커스가 가지 않고 copy & paste방지한것처럼 select가 되지 않는 버그 때문에 찾아보니
pointer-event:none 을 해주면 그렇게 된다고 한다
그러나 이때문은 아니고 syncfusion state 변경후 re-render될때 뭔가 안맞아서 그런것으로 예상됨
재현조건을 좁혀봤더니 dropdownList에서 state변경을 통해 구현한 부분에서 정확히 에러가 발생하는 것으로 추정되었기 때문
| [z-index]x,y,z좌표를 생각하자 - 값이 높을수록 위에 있음 (0) | 2024.03.04 |
|---|---|
| (<input>안에뭐쓰면에러남</input>)input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` (0) | 2024.01.18 |
| <div>와 대비되는 <p>특징: 내부에 다른 block요소 못넣음, 문단을 나누는 태그이므로 문단안에 끊기는게 있으면 안됨 (0) | 2024.01.12 |
| user agent stylesheet 각 브라우저마다 정해놓은 CSS 기본 규칙 (0) | 2024.01.12 |
| table head고정 예제 ( position: fixed; top: 0; ) (0) | 2024.01.04 |
<p>
안녕하세요
<div>인사</div> -> 얘를 만나면 p가 얘 앞에서 끊김
</p>
이렇게 작성한다면, 아래와 같이 자동 변환됨
<p>
안녕하세요
</p>
<div>인사</div>
https://bomango.tistory.com/59
P태그요소 안에 div 넣지 마세요. HTML 기본기 박살내기
HTML5의 등장으로 태그를 인라인/블록으로 나누는 시대는 지났다. 그러나 HTML를 공부할 때 인라인/블록의 개념을 반드시 알고 지나가야 한다고 생각한다. HTML5 등장 이전에 통용되던 개념은 "인라
bomango.tistory.com
| (<input>안에뭐쓰면에러남</input>)input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` (0) | 2024.01.18 |
|---|---|
| [pointer-events: none;] disable copy&paste, 마우스 오른쪽 클릭 방지 등 (0) | 2024.01.18 |
| user agent stylesheet 각 브라우저마다 정해놓은 CSS 기본 규칙 (0) | 2024.01.12 |
| table head고정 예제 ( position: fixed; top: 0; ) (0) | 2024.01.04 |
| { css cursor:pointer; }(링크가리키는 손모양)... 마우스화살표 설정 (0) | 2023.12.21 |
html파일에서 <!DOCTYPE html>을 써주지 않아 html의 최신 버전을 알려주지 않거나,
user agent stylesheet에서 명시하는 속성을, 내가 직접 override하지 않으면 그 기본 규칙이 적용될 수 있다.
이를 미연에 방지하는 법은, 브라우저의 모든 기본 CSS 규칙을 초기화하기 위해
CSS Reset (meyerweb.com/eric/tools/css/reset/)을 해주는 것이 있겠다.
| [pointer-events: none;] disable copy&paste, 마우스 오른쪽 클릭 방지 등 (0) | 2024.01.18 |
|---|---|
| <div>와 대비되는 <p>특징: 내부에 다른 block요소 못넣음, 문단을 나누는 태그이므로 문단안에 끊기는게 있으면 안됨 (0) | 2024.01.12 |
| table head고정 예제 ( position: fixed; top: 0; ) (0) | 2024.01.04 |
| { css cursor:pointer; }(링크가리키는 손모양)... 마우스화살표 설정 (0) | 2023.12.21 |
| height={calc(100vh - 400px)} width='calc(100vw - 50px)' (0) | 2023.12.20 |
https://jsfiddle.net/jmnote/L5wskfdw/?utm_source=website&utm_medium=embed&utm_campaign=L5wskfdw%20
HTML 테이블 첫 행 고정 - JSFiddle - Code Playground
jsfiddle.net
https://zetawiki.com/wiki/HTML_%ED%85%8C%EC%9D%B4%EB%B8%94_%ED%8B%80_%EA%B3%A0%EC%A0%95
HTML 테이블 틀 고정 - 제타위키
다음 문자열 포함...
zetawiki.com
| <div>와 대비되는 <p>특징: 내부에 다른 block요소 못넣음, 문단을 나누는 태그이므로 문단안에 끊기는게 있으면 안됨 (0) | 2024.01.12 |
|---|---|
| user agent stylesheet 각 브라우저마다 정해놓은 CSS 기본 규칙 (0) | 2024.01.12 |
| { css cursor:pointer; }(링크가리키는 손모양)... 마우스화살표 설정 (0) | 2023.12.21 |
| height={calc(100vh - 400px)} width='calc(100vw - 50px)' (0) | 2023.12.20 |
| [input focus] .focus(), <input autofocus/>, <input ref = { input => input && input.focus() } /> (0) | 2023.12.19 |
https://developer.mozilla.org/ko/docs/Web/CSS/cursor
cursor - CSS: Cascading Style Sheets | MDN
CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.
developer.mozilla.org
rem(root em)
vh & vw (vertical height & vertical width)
vmin & vmax
ex & ch
https://webclub.tistory.com/356
CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch
CSS Unit (CSS 7가지 단위) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다. 웹은 항상 성장,변화하고 있고 새로운
webclub.tistory.com
기본: element.focus(), <input autofocus/> autoFocus아님
react 간단버전: <input ref = { input => input && input.focus() } />
react
import React, { useEffect, useRef } from 'react';
export default function MyComponent(): JSX.Element {
const inputReference = useRef<HTMLInputElement>(null);
useEffect(() => {
inputReference.current?.focus();
}, []);
return (
<div>
<input ref={inputReference} />
</div>
);
}react useFocus hook 버전
const FocusDemo = () => {
const [inputRef, setInputFocus] = useFocus()
return (
<>
<button onClick={setInputFocus} >
Focus
</button>
<input ref={inputRef} />
</>
)
}
const useFocus = () => {
const htmlElRef = useRef(null)
const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()}
return [ htmlElRef, setFocus ]
}
<input ref={input => input && input.focus()}/>
center vertially
line-height가 무엇인지 알려면 참고할것https://m.blog.naver.com/weekamp/222040583269
CSS - line-height 총 정리
line-height속성 이 속성에 절대값으로 px을 주면 안된다. 왜냐면, 그 태그의 텍스트 사이즈가 변경되었을...
blog.naver.com
https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
CSS text-overflow property
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://junistory.blogspot.com/2017/06/css-ellipsis.html