Developer's blog

이번에는 테이블을 클릭하면 테이블이 확장되며 child row를 보여줄 수 있도록하는 기능을 개발하고자 한다. 먼저, table expand를 위한 expand용 화살표를 만들기 위해 테이블의 제일 앞에 화살표를 둘 수 있도록 html을 아래와 같이 구성하였다. 문의유형 제목 등록일 진행상태 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변대기 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변완료 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변완료 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변완료 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변완료 여기서 빈 td에 contact-control이라는 클래스를 부여한 이..

오늘은 새로운 프로젝트의 웹 페이지를 제작하기 시작하며, 새롭게 로그인 폼을 만들고자 하였다. 이번에는 저번에 사용하지 않았던 기능인 비밀번호 보이기/숨기기를 개발하여 사용해보고자 생각하였다. 로그인 개발 시, 비밀번호 input type은 password로 지정하는데 그럼 비밀번호가 ****라고 표시되기 때문에 사용자는 자신이 입력한 값을 알 수 없다. 따라서 눈모양 아이콘을 클릭하면 토글 형식으로 비밀번호가 보였다, 안보였다 하는 기능을 개발하였다. 이때 필요한 코드는 비밀번호 입력 input box 와 눈모양 아이콘은 위한 i 태그를 한 번에 감싸주는 div를 선언하는 html이 필요하며, 아이콘을 input box 내의 적당한 위치에 배치하기 위한 css가 필요하다. 또한, 아이콘을 누르면 act..

오늘은 이미지 위에 텍스트를 올려 원하는 위치에 배치하는 기능을 개발하고자 하였다. 개발할 때의 이슈는 나는 이미지에 position: relative;를 적용시켜 개발하고자 하였다. 하지만 이미지에 해당 css를 적용시키니 기능하지 않았다. 그 이후로 여러 시행착오를 겪은 결과로 원하는 결과를 이끌어내기 위해서는 이미지와 오버레이 시키고자 하였던 텍스트를 하나의 div로 묶고 해당 div에 position: relative; 주며 이미지는 width: 100%; vertical-align: middle; 를 통해 꽉채우고 텍스트에 position: absolute; 를 적용시켜 개발해야한다는 것을 알게되었다. ​ 아래는 개발된 html 코드이다. { 어린이 생활 과학 교실 } 수료증 홍길동 아래는 개발..

FrontEnd를 개발하며 CSS에 대한 공부를 하기 시작하였다. 기능을 개발하던 중 마우스 오버 시 발생하는 이벤트를 javascript가 아닌 css로 구현하고자 하니, hover라는 방법을 이용하게 되었고 개발하던 중 난관을 만나게 되었다. 그것은 hover시 특정요서의 투명도를 1로 설정하여 안보이던 글씨를 hover시 에만 보이게 하는 기능을 구현하고자 하나, hover시 이벤트 대상을 선택하는 방법을 알지 못하였다. 구글 검색을 통해 알아낸 결과는 다음과 같다. 내가 하고자 했던 기능은 이미지에 마우스 오버시 hover되며 해당 이미지를 어둡게하고 발급 가능이라는 글씨를 나타내고 싶었다. 따라서 이미지는 slick-slide 클래스 내의 photo 클래스 내의 nft-pic이라는 클래스로 선언..