내가 까먹는 html / css 방법들

내가 자주 까먹어서 찾아보는 html이나 css 방법들을 하나씩 적어본다.

---

html

 input에서 키보드 입력은 받기 싫은 경우(마우스만 허용)

<input
                type='number'
                min='0'
                id={it.type}
                name={it.type}
                disabled={id === ''}
                value={values[idx]}
                onKeyDown={(e) => {
                	e.preventDefault();
                    return false;
                }} />

onKeyDown 에서 preventDefault() 및 return false을 하면 키보드 입력을 받지 않을 수 있다.

textarea 맞춤법 검사 기능 끄기

 <textarea
    id='description'
    name='description'
    className={styles['text-box']}
    spellCheck='false'
    onChange={descChangeHandler} />

 

---

css

a 태그 밑줄 삭제

a {
    text-decoration: none;
}

li 태그 숫자나 점(dot) 삭제

ol, ul {
    list-style-type: none;
}

li 말고 상위의 ol, ul에서 선언해야 한다.

이미지 늘리지 않으면서 크기에 맞추기

a {
    width: 250px;
    height: 250px;
    object-fit: cover;
}

https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-but-not-stretch

텍스트 드래그 막기

noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

환경마다 drag를 막는데 사용하는 속성들이 다를 수 있다.

css - How to disable text selection highlighting - Stack Overflow