김평범's OrdinaryCode

input에서 사용자는 수정을 못하게 하려면 readonly라는 옵션을 이용하면 된다. 최근 프로젝트에서 input check box도 readonly를 시키려고 아래 코드를 넣었으나, 동작하지 않았다. 📌input type checkbox readonly 오류 코드 readonly="true"로 변경을 해봤지만 그 부분도 적용이 안되고, disable="true"는 작동이 되고 뭐일까 하고 찾아봤다. 🍒input type checkbox readonly 성공 코드 확인해보니, checkbox의 readonly는 먹지 않아서 위처럼 onClick 이벤트에서 return false를 걸어주면 된다고 한다. 실제로 적용해보니 잘 작동한다.

📑 태그란? hr 태그를 이용하면 콘텐츠 중간에 선을 그을 수 있다. 보통 주제가 변경이 될 때 이용하는 태그이다. 태그는 기본적으로 검은색으로 제공되고 있다. 만약에 해당 색상을 바꾸고 싶다면? 🧡태그 선 색상 변경 코드 hr { background:pink; height:1px; border:0; } hr 태그를 변경하려면 background나 color 속성만 변경하면 색상이 변하지 않는다. height를 1px을 주고 background를 주면 색상이 변하는 걸 확인할 수 있고 이때 border는 0으로 맞춰준다. 줄 넓이를 키우고 싶을 경우 height를 조절해주면 끝!

웹사이트를 구성하다 보면 로딩 바가 은근 많이 사용된다! 보통 css, Javascript로 만들기도 하지만 HTML만으로도 Process bar를 만들 수 있다고 한다. 🌖HTML progress tag html에서 이용하는 progress tag는 로딩바 형태의 UI를 생성해준다. 안에 들어가는 속성은 아래와 같다. value : 실제 값 min: progress의 최소값 max: progress의 최댓값 progress tag를 이용하면 아래와 같은 UI가 생성된다. sample code 진행상항 실제로 0부터 100 사이의 중간인 50%까지 파란색이 차있는 것을 볼 수 있다. 🎨HTML Progress CSS 적용하기 기본적으로 제공하는 UI는 실제로 만들 화면상에 어울리지 않을 가능성이 높아서 ..