박주니 개발 정리

설명 이유 보통 그룹으로 지정할 것도 없이 동시에 적용을 할려면 클래스 name을 가지고 와서 , 구분한다음 한번에 이벤트를 적용하면 됬지만 hover이나 동작에 대한 이벤트를 줄때에는 별도로 설정해야한다는 것을 알게 되어서 정리하게 되었습니다. 예시 코드 테스트 적용 미적용 조건 li테그에 테스트에 마우스를 갖다대면 h1테그 적용부분도 동시에 hover 적용해서 글자가 빨간색으로 변하게 만들어보세요 css .test-group:hover li, .test-group:hover h1 { color: red; } 설명) 먼저 적용하고자하는 범위에 상위에 있는 클래스를 가지고 와서 hover을 적용하고 그다음에는 상세 적용할 부분을 지정하면 됩니다. 회고) 이 방법을 몰랐을경우 hover을 동시에 적용하고자..

설명 이유) quill editor을 적용을 했을 때 nextjs에 적용할 때에는 css 추가 작업한 것 없이 정상적으로 작동되는 것을 볼 수 있었으나 react에 적용할 때에는 특히 이미지를 링크 걸때 이벤트가 발생되더라도 깨짐현상 또는 나타나지 않는 현상을 확인하게 되었습니다. 그래서 해결 방법을 공유하고자 정리하게 되었습니다. 먼저 발생하는 원인을 파악해야합니다. 이미지 드래그하고 링크를 클릭한 후에 나오는 모달을 개발자 도구를 통해서 확인합니다. 지금 형광펜으로 체크한 부분을 선택해서 styles를 보시면 마우스 스크롤을 움직일 때 해당 모달이 스크롤에 영향을 받아서 움직이는 것을 볼 수 있고 margin-top도 변경되는 것을 볼 수 있습니다. 1. QuillEditor.css를 만들어서 mar..

먼저 modal 을 이해하기 위해서는 absolute와 relative 관계를 이해를 해야하는데 제가 이해한 부분은 absolute는 도화지 relative는 그 도화지에 그리고자하는 대상이라고 생각하니 이해하기가 쉬웠습니다. 1. html에서 absolute 대상과 relative 대상을 간단하게 만듭니다. test 주의) 만약 전체 영역을 대상으로 absolute를 설정해야한다면 .absolute에 css width: 100%, height: 100% 지정시 전체 영역이 되는 지 부터 확인을 해야합니다. 만약 하위에 속해서 다른 css에 영향을 받는다면 전체 영역 칸으로 빼내야합니다. 만약 지금 설명하는 것이 이해가 안되신다면 css layout 설정하는 방법을 다시 공부하시길 바랍니다. 2. 먼저 ..

inline-block으로 적용할 때 안에 있는 리스트 퍼블 수정시 제대로 적용이 안돼고 https://blogpack.tistory.com/553 inline-block 태그의 공백 버그를 회피하기 inline-block 태그에는 일종의 버그성인 공백 문제가 있습니다. 이미 널리 알려진 버그지만 태그 자체의 버그를 패치하자니 다른 사이드 이펙트가 더 커져서 방치 아닌 방치가 되고 그런 사이에 온 blogpack.tistory.com grid로 가로슬라이드를 만들어봤습니다. 먼저 ul과 li로 기본 폼을 만들어놓습니다. 1. ul width 영역을 100%으로 하고 li를 3-4개정도 반복한 후 ul에서 li .을 제거해주시면 됩니다. 참고) li에서 .을 제거하는 방법은 line-style: none ..