css 빡고수 있냐? - 코딩 채널

코딩 채널

알림 알림 중 알림 취소

구독자 3536명 알림수신 57명 @은월영

프로그래밍 및 코딩 채널

Front-end css 빡고수 있냐?

jjolraman

추천 0 비추천 0 댓글 20 조회수 277 작성일 2023-03-28 04:24:41

https://arca.live/b/programmer/72763878

혹시 마음에 드는 사이트에서 관리자 툴로 볼 때, 사용한 코드 같은건 어디에 뜨는지 알고있는사람 있어..?
분명 mouse-over 혹은 hover 이벤트 같은데 도통 보이질않노....

댓글 [20] 글쓰기

디버그신사

2023-03-28 04:29:32 답글

f12에서?

펼쳐보기▼

jjolraman

2023-03-28 04:30:49 답글

ㅇㅇㅇㅇ f12

펼쳐보기▼

디버그신사

2023-03-28 04:32:46 답글

*수정됨

엘리먼츠 - (삼각형의 접어놓기 기호) 클릭 -> 그러면 바디나 헤드나 내용물 볼수있지 않나? 
근데 개발자 단에서 막아놓는 기술도 있는듯, 나 어떤 사이트 텍스트 가져갈려고 f12로 봤는데 안보이더라

펼쳐보기▼

jjolraman

2023-03-28 04:33:50 답글

어흐흑 하기사 그거도 자기들 코드니까....아쉽구만

펼쳐보기▼

디버그신사

2023-03-28 04:29:42 답글

관리자 툴이 뭐임?

펼쳐보기▼

jjolraman

2023-03-28 04:30:56 답글

윗댓에달았음 f12

펼쳐보기▼

렌

2023-03-28 04:32:01 답글

프레임워크로 짠거면 minfied js안에 숨어있을수도 있어서 힘들수도 있음. 정확히 어떤 엘리먼트 (그 위레벨인지 아래레질인지) 아는것도 힘들수 있고. 관리자 툴 디버거에 event listeners 라는 메뉴가 있긴 하니까 맞는 dom을 고른다면 거기서 찾을수도 있음

펼쳐보기▼

렌

2023-03-28 04:32:56 답글

listener이 아니라면 이런방법도 있는듯

https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools

Stack Overflow

How do I view events fired on an element in Chrome DevTools?

I have a customizable form element on a page from a library. I want to see what javascript events are fired when I interact with it because I am trying to find out which event handler to use. How ...

listener이 아니라면 이런방법도 있는듯

펼쳐보기▼

jjolraman

2023-03-28 04:33:36 답글

jjolraman

2023-03-28 04:33:24 답글

아아아... 일단 다 봐야겠네 ㄳㄳ

펼쳐보기▼

렌

2023-03-28 04:35:39 답글

hover이라면 님이 말한데로 css에 숨어있을 확률이 가장 큰데 이건 콘솔에서 디버거 메뉴로 가면 소스코드를 볼수있음. 거기 보면 사이트에서 사용하는 파일들이 나오니 (죄다 minified 된거라 가독성 매우 인좋음) 거기서 찾을수도 있고

이럴 가능성은 낮지만 그 hover이 들어가있는 파일이 url로 걸려있을수도 있는데 이런경우는 css 를 가져오는 라인들을 다 찾아서 확인을 해봐야 알듯.

이게 엄청 복잡한게 아니면 직접 걍 최대한 비슷하게 해보거나 구글에 하는법 찾아보는걸 추천함

펼쳐보기▼

jjolraman

2023-03-28 04:56:56 답글

걍 구글에 찾아야겠다 슈발 ㅋㅋ 보니까 눈알에서 즙나올려하네 아 ㅋㅋㅋ
그냥 마우스 호버하면 커서 변경이랑 설명글 살짝 나오게 하는 레벨인데 후...

펼쳐보기▼

렌

2023-03-28 05:07:26 답글

*수정됨

설명글 나오는건 tooltip 만드는법 찾으면 됨. 리엑트같은거면 강 패키지 가져다 쓰면 되고 아니면 메인 자스에 그 dom에 hover 이벤트 리스너를 붙인다음 그 콜백에서 설명글 dom의 display을 바꾸면 됨. 대신 직접 html 이랑 css 다 짜는거면 툴팁을 좀 이쁘게 건드려야함. 그리만 아마 높은획률로 님이 보는 사이트는 걍 부트스트랩이나 다른 라이브러리로 했을거임.

마우스 커서모양은 더 쉬움 걍 css에 

님의DOM:hover {
cursor:pointer
}

이렇게 쓰면 됨. 포인터 모양이 아니라면 다른 옵션 찾아서 바꾸면 되고

기억나는대로 쓴거니까 신택스는 정확하지 않을수 있음

펼쳐보기▼

jjolraman

2023-03-28 05:39:26 답글

혹시 전공시간에 관심법 배움? 어케알았노 ㄷㄷ 나도 검색하다 tooltip 나오는거랑 마우스 오버 이벤트? 그걸로 해결봤슴 ㄳㄳ

펼쳐보기▼

렌

2023-03-28 05:45:30 답글

나도 아주 비슷한걸로 해맨적이 있음. useState 쓰는거보니 리엑트같은데 그럼 걍 react bootrap이나 reactstrap, antd등에 이미 기본으로 툴팁이 들어있는걸로 기억함. 툴팁에 그냥 글 이상의 내용을 담고 싶은거 아니면 걍 이걸 쓰는걸 추천함.

직접 만드는게 재밌긴 하지만 디자인면에서 보면 수작업이 너무 필요해서 이런 라이브러리 쓰면서 껍데기만 조금 바꾸고 구현된건 얘들걸 쓰는게 훨 효율적임

펼쳐보기▼

jjolraman

2023-03-28 06:01:56 답글

와시발 부트스트랩 걍 이거였네.....ㄳㄳㄳㄳ

펼쳐보기▼

디비네스페아르

2023-03-28 05:12:31 답글

*수정됨

CSS 마우스 호버 같은 특수 셀렉터는 노드 선택하면 해당 셀렉터 강제로 활성화시키는 체크박스가 어딘가 있을거임
근데 그 특수 셀렉터가 해당 노드에 있는지 그 위 어딘가에 있는지는 찍어보기 전까지는 몰?루
자바스크립트 이벤트가 걸린건 좀 복잡하긴 한데 보통 css 클래스 토글로 처리하는 경우개 많으니까 매의 눈으로 잘 봐야 함

펼쳐보기▼

jjolraman

2023-03-28 05:38:45 답글

결국 구글링해서 걍 인라인 이벤트로 조짐... useState로 마우스 hover/off 구별해서 따로 상태 지정한 다음 커서 하나 달아주고 치웠다 ㅋㅋㅋ 아 근데 인라인 말고 걍 스타일컴포넌트로 해야하나 이거... 적용시킬 게 10줄 넘는데

펼쳐보기▼

디비네스페아르

2023-03-28 05:41:24 답글

스타일 컴포넌트가 편하긴 한데 퍼포먼스 이슈가 좀 있을거임

펼쳐보기▼

jjolraman

2023-03-28 05:59:55 답글

어흐흐흑...

펼쳐보기▼

글쓰기

전체글 개념글

최근 최근 방문 채널

최근 방문 채널

전체 공지 정보 질문 잡담 유머 C/C++ C# Python Java Front-end Back-end 앱·겜 AI·Data 그 외

번호 제목

작성자 작성일 조회수 추천

공지 아카라이브 모바일 앱 이용 안내(iOS/Android)

*ㅎㅎ 2020.08.18 31271750

공지 코딩 채널에 오신 것을 환영합니다.

강성호 2022.03.31 18574

142 Front-end CSS 그라디언트 생성기 [1]

디비네스페아르 2023.06.21 117 1

141 Front-end next.js vercel 풍의 css 프레임워크 찾았음 [1]

게임보이어드밴스 2023.06.18 117 1

140 Front-end yarn workspace 개편하다 ㄹㅇ [4]

침대위사과 2023.06.01 140 0

139 Front-end WebGPU가 개쩌는 이유 [10]

침대위사과 2023.05.29 319 1

138 Front-end 게이들아 아카라이브는 부트스트랩 안쓴거야? [19]

Leghorn 2023.05.25 369 0

137 Front-end 상태관리 라이브러리 리뷰글 작성하면 볾? [4]

게임보이어드밴스 2023.05.23 98 0

136 Front-end 배포하는 시간 <<< 의외로 프엔 개발자들이 긴장하는 순간 [1]

게임보이어드밴스 2023.05.19 212 2

135 Front-end 나는 라이브러리 쓰는걸 오히려 권장하는 편임... [14]

게임보이어드밴스 2023.05.15 198 2

134 Front-end 난 nodejs가 너무 어렵다 [8]

농즈 2023.05.07 305 -4

133 Front-end 여기 고수들 많네 [12]

kukukaka 2023.04.29 946 16

132 Front-end 프론트는 자꾸 바뀌고 할게 많음 [7]

무조건건강 2023.04.29 279 0

131 Front-end 아카라이브 문의 게시판용 버그 재현

심호흡을한다 2023.04.26 168 0

130 Front-end JS 이거 이렇게 줄여 쓸 수 있지 않음? [6]

임베디드 2023.04.23 199 0

129 Front-end 프론트엔드 허접이 뭔가 흥미를 가지고 해볼만한 포폴용 플젝이 뭐가 있을까...? 1인으로다가 [30]

jjolraman 2023.04.21 292 0

128 Front-end 프론트엔드 개발자 취직 어떻게할지 모르겠슴 [13]

타이콘데로가 2023.04.18 281 0

127 Front-end SolidJS 재밌음 [1]

디비네스페아르 2023.04.12 192 0

126 Front-end 프론트 깔짝이는중인데 백쪽 배울려면 뭐로 배우는게 제일 괜찮을까? [5]

jjolraman 2023.04.03 182 0

125 Front-end css 빡고수 있냐? [20]

jjolraman 2023.03.28 278 0

124 Front-end 배열 .push() 함수 질문 [11]

ㅇㅇ (106.240) 2023.03.27 172 0

123 Front-end 메모)버셀로 SPA 배포할떄 다른 페이지에서 새로고침 할때 404에러 뜰때

GameBoy 2023.03.16 68 1

글쓰기

전체글 개념글

사용하고 계신 브라우저가 시간대 설정을 지원하지 않으므로 GMT 시간대가 적용됩니다.