유이로운 개발일지

입력칸을 만들고자 할 때 html요소로 'input'을 넣는 경우가 잦다. 하지만 input요소를 이용해 입력칸을 만들 경우, 최대 1줄까지만 입력이 가능하고 세로줄정렬이 가운데로 맞춰지는 불편함이 있다. 이를 wrap이나 정렬로 맞춰도 input 요소는 기본적으로 1줄까지만 입력이 가능하기 때문에, 모양을 바꾸는 것만 가능할 뿐 근본적으로 1줄만 입력 가능한 것을 고치는 게 쉽지 않다. 하지만 이 문제는 생각보다 빠르게 해결 가능하다. input 요소 대신 textarea 요소를 사용하면 된다. textarea요소는 html 요소이기 때문에 html작성란에 작성해 주면 된다. input요소의 자리에 그대로 넣어주면 된다고 생각하면 된다. cols, rows로 최대 몇 줄까지 작성 가능하게 할 것인지 적..

시맨틱요소 html 이용시 시맨틱태그를 이용하는 것이 좋다! 당연히 알고 있었던 것이지만, 무심코 div span을 주로 사용하는 데 익숙해져 있었던 듯하다. 접근성면에서나, 협업시에도 시맨틱태그를 이용하는 것이 좋을 수밖에 없는 것을 간과하지 말아야 한다. 왜? 시맨틱태그에는 태그 자체에 해당 요소가 의미하는 바가 영어이름으로 정확히 명시가 되어 있기 때문이다. 그래서 의미가 없는 div, span를 남용하기보다 시맨틱요소를 사용할 수 있는 부분에는 시맨틱요소를 사용해 주는 것이 좋을 수밖에 없다! form요소와 검색 기능 input, button 태그를 포함한 form 태그에 검색기능을 작동하게 하는 함수를 삽입하면 엔터 누를시 검색 기능이 실행되도록 할 수 있다. 오늘도 잘 해냈다!

html 요소 중 일부 클래스를 불러와, 그 내부에 있는 text가 input값과 동일할 경우 해당 리스트를 보여줘야 하는 상황이었는데, 계속하여 type에러가 발생하는 상황이었다. 문제는 선택자의 속성과 메소드의 속성이 맞지 않는 것이 원인이었다! 1. 선택자와 prototype document.getElementsByClassName() = prototype이 htmlCollector로 설정되어 나옴 document.querySelectorAll() = prototype이 nodelist로 설정되어 나옴 For each, filter, map 등의 배열메소드는 말 그대로 '배열'에 사용 가능함. 따라서 위 선택자들로 요소를 선택하고, 위의 메소드를 사용하려고 하는 경우에는 타입에러가 발생하게 됨. 해..

개인과제로 부여 받은 영화 평가 리스트 사이트 구현에 도전한 지 3일차이다. html 과 css는 웹퍼블리싱 학원에서 매일 하던 것이다 보니 아무런 어려움 없이 걸림돌조차 없이 잘 구현해낼 수 있었다. 다만 js 에서 많은 어려움을 겪고 있었다. 특히 그간 배워온 것들을 이론상으로는 이해를 하지만, 대부분 예시를 console.log의 형태로만 보다보니 배운 것들을 응용하고 활용하는 것 자체에 많은 어려움을 겪었다. js로는 사이트가 어떻게 구축되는지 충분한 예시를 아직 접해보지 못한지라 어떤 곳에 어떤 것이 들어있을 때 어떤 역할을 하는지 감이 잘 안 잡히고 있는데, 남이 짠 코드를 해석하기 어려운 상황에서 스스로 코드를 짜내는 것이 어려운 것은 당연한 일이라 생각하고 스트레스를 받지 않기 위해 노력해..