■ Web개발/css (9) 썸네일형 리스트형 tailwindcss에서 flex:1, flex:2, flex:3처럼 비율 구현 tailwind로 프로젝트를 진행하고 있는데 flexGrow를 쓰면 비율을 맞춰주는줄 알았는데 그것이 아니었다...ㄷㄷ 내용에 어떤 text가 있다면 이 크기만큼 더 공간을 차지해버린다. 즉 text가 있으면 비율이 안맞음. 커스톰에 구현을 해줘야하는데 module.exports = { theme: { extend: { flex: { 2: '2 2 0%', 3: '3 4 0%', 4: '4 4 0%', 5: '5 5 0%', 6: '6 6 0%', 7: '7 7 0%', 8: '8 8 0%', 9: '9 9 0%', }, } } } 이런 식으로 구현을 해주면 된다, 이러면 flex-2 를 className에 적용시키면 2 비율만큼 차지한다. 즉 1 2 5 2 이렇게 있으면 1+2+5+2 = 10이니까 1.. div에 onClick 걸기 (안쪽 클릭이 안될 경우 - css에 pointer-events: none;) div에 onClick을 걸었으면, 그 div의 자식 div들에는 pointer-events:none; 을 먹여줘야 전체 클릭이 적용된다. 솰라솰라 밥주세용 이렇게 div에 onClick을 걸어서 클릭시에 '함수아무거나'를 실행시킬 수 있는데 문제는 안쪽 클릭이 안된다...... 가생이만 클릭했을때 함수아무거나에서 e.target.id를 뽑아봐도 암것도 안나온다.... ------------------------------------ 함수아무거나 = (e) => { console.log(e.target.id); } ------------------------------------ 그래서 안쪽 div를 제거해봤더니 잘 작동. 아 div영역에 뭔가 문제가 있구나. css를 찾아보니, pointer-event.. css 특정 div에 scroll bar 생성하기 (flex 이용) ...상당히 애를 먹었다 대충 이런식이라면 .bot::-webkit-scrollbar { width: 10px; } .bot::-webkit-scrollbar-thumb { background-color: #11141a; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } .bot::-webkit-scrollbar-track { background-color: rgb(56, 56, 56); border-radius: 10px; box-shadow: inset 0px 0px 5px rgb(46, 46, 46); } 이렇게만 하면 될거같은데 안된다.......... 결국 열심히 구글링해서 결국 찾았는데 2가지가.. css 마우스 올려둘 때 색상 변환, 클릭시 색상 변환 .background:active { background-color: rgb(32, 41, 124); } 이런식으로 active를 설정하면, 클릭했을 때 색상이 변하게 된다. .background:hover { background-color: rgb(32, 41, 124); } :hover를 덧붙일 경우, 마우스를 위에 올려뒀을 때 변화를 적용시킬 수 있다. CSS inherit, 100% 차이 width같은 값을 조절할 때 inherit을 할지 100%를 할지 고민할때가 있었는데 차이가 크다. inherit은 위에 적용된 값을 불러온다. 즉 부모단에 입력된 값이 10%라면 inheirt을 하면 10%인 부모값의 10%를 가져온다. 즉 1%가 되는 셈. 100%는 위의 가로 길이를 그대로 가져온다. (width에서) css 사용할 때 기존 페이지의 색상 맞추는 법 (color zila, 그림판) 크롬에서 확장프로그램 color zila를 사용하면 페이지의 색상을 가져올 수 있는데 이미지를 크롬에서 띄워서 할 경우에는 이 부분을 허용해주면 이미지 파일 내에서도 rgb값의 추출이 가능해진다. 그림판에서도 색상 추출이 가능한데, 도구에서 색을 뽑아서 색편집을 누르면 RGB값이 뜬다. Css 자잘한 Tip 헤더는 px로 고정해두는 것도 괜찮음. flex를 사용하는게 수정사항 반영에 유리함 @mixin 사용하면 테마 변경에 좋다.(변수에 색깔 지정하기) align-content 는 align-items보다 큰 개념. overflow:auto - 상단에 넣으면 아래 컴포넌트 안삐져나옴 css로 위치 가운데 맞춤 position: absolute; top: 50%; transform: translateY(-50%); 부모에는 position: relative 넣어주시면 위치 겹치게 할 수 있습니다. 부모요소의 height, width값도 잘 체크할 것. top과 left를 동시에 먹여야 할 경우 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 혹은 이런식으로 display:flex를 주고 justify와 align-items로 조절할 수 있다(혹은 align-content). 이는 크롬창에서 개발자 도구(F12)로 들어가서 이것저것 눌러보면서 바꿀 수 있음. 위의 flex옆의 바둑같은 버튼을 클릭하면 이런식으로 어떤걸 선택하겠냐.. 이전 1 2 다음 목록 더보기
