유이로운 개발일지

1. 태그를 생성하고, 클릭 시 글 제거 함수를 일으키도록 한다. 예시) { deletePostHandler(post); }} > 삭제 여기서 매개변수로 넣은 post는 제가 삭제할 post의 정보일 뿐입니다! 각자의 상황에 맞추어 함수를 실행해 주기만 하시면 됩니다! 2. 해당 함수에 if else 문을 삽입하고, if 문안에 window.confirm("") === true 조건을 넣어 준다. 여기서 ""안에 들어가는 메세지는 알림창의 메세지로 뜨게 된다. if 문 안에 있는 것이 이용자가 확인을 눌렀을 경우, else 문이 취소를 눌렀을 경우에 실행되는 부분이다. 예시) const deletePostHandler = (post) => { if (window.confirm("정말 삭제하시겠습니까?")..

사진처럼 프로필을 만들고 있는데, 회색 원 안에 카메라 이미지를 배치하고 해당 회색 원을 눌렀을 때 파일선택창이 나타나야 하는 상황이다. 예전에 다른 블로그에서 보ㅗㄱ, input아래 span 태그를 놓고 input을 display:none처리하면 가능하다는 정보를 얻었는데 그렇게 적용을 해도 왜인지 제대로 잘 되지 않았다. 결론적으로는 label 태그 안에 input 태그를 넣고, input을 display:none처리 함으로서 회색원(=label)태그 를 누르면 파일선택창이 열리겠끔 구현하는 데 성공하였다.

태그를 type="text"로 사용하며 글자를 입력 받을 때, 최대 글자수를 제한해야 하는 경우들이 자주 있다. 이럴 때 함수를 만들어 input에 들어가는 value의 length 를 제한하는 방법도 있겠지만, 그보다 훨씬 쉽고 간단하게 최대 글자수를 제한할 수 있는 방법이 존재한다! 바로 maxLength를 사용하는 것이다. 위 경우처럼 maxLength를 지정하고, 몇 자로 제한할 건지 적어주기만 하면 maxLength 에 적어둔 숫자만큼 최대 글자수가 제한된다! 정말 쉽고 간단하게 가능하니까... 다들 사용해 보세요 오늘도 잘 해냈다!

input 태그를 이용할 때, 기본 스타일이 들어가 있어서 CSS 단계에서 어려움을 겪는 경우가 많다. 그럴 때는 기본으로 적용되어 있는 것들을 none처리 해 주면 간단하게 스타일을 초기화 시킬 수 있다! 1. border -> input태그의 겉테두리를 뜻하며, border: none; 처리로 없앨 수 있다. 2. outline -> 인풋창을 활성화하고 있을 때 border: none;처리를 해도 의문의 테두리가 뜨게 되는데 outline: none; 처리를 해 주면 의문의 테두리가 싹 사라진다. 3. background-color -> Input 창 내 배경화면 색 설정! transparent 나 본인이 원하는 색으로 바꿔 주어도 된다. 기본 값은 white로 설정되어 있는듯하다! 오늘도 잘 해냈다!