프로그래밍-Web/CSS(15)
-
[이슈] After , Before 가상요소
참고자료:blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/ [공유]::before와::after, 그들의 정체는? [공유]::before와::after, 그들의 정체는? 안녕하세요! UI개발2팀 조가영입니다. 무려 10주에 걸쳐 진행한 OJT. 면수습 후 OJT의 꽃인 블로깅을 작성하려니 감회가 더욱 새롭네요! 과제를 하던 중 발견한 blog.hivelab.co.kr www.youtube.com/watch?v=wTUMrLAbREo 리턴하는 화면에서는 tiledBackground만 렌더링하였지만 ::before 선택자가 처리되어, 실제 tiledBack..
2021.01.22 -
[이슈] 억지로 속성 바꾸기, div안의 div target하기
1. div안의 div는 >로 잡는다 2. 속성이 제공된 컴포넌트 디폴트 속성과 충돌할 때 억지로 내 설정을 적용하려면 !important한다
2021.01.16 -
[Material UI] Material UI 컴포넌트에 CSS먹이기
보통은 styled-component로 div를 잡아서 하다가 컴포넌트를 외부에서 가져다가 쓰는 경우는 조금 애매했다 예를들어 Material UI에서 TextField 컴포넌트를 가져다 쓰는 경우 material-ui.com/styles/basics/#higher-order-component-api @material-ui/styles - Material-UI You can use Material-UI's styling solution in your app, whether or not you are using Material-UI components. material-ui.com 이런 경우에는 withStyles이라는 hoc를 사용한다 이에 대한 변수를 생성해주고 요렇게 해당 변수를 컴포넌트로 사용하면 ..
2021.01.15 -
[이슈] 컨텐츠에 맞춘 Container 크기 조정
height나 width를 auto로 설정해주면 내부에 있는 컨텐츠 크기(글자를 보여주는 container라면 글자의 높이나 길이)에 따라 컨테이너 크기가 변함
2021.01.14 -
[개념 정리] Styled-Component 적용
기본적으로 Wrapper를 설정한다. Child element들에 대해 세밀한 조정이 필요하다면 콘솔로 잡아보고 props를 설정한다.
2021.01.13 -
[개념정리] CSS Position
static -디폴트 relative - 현재위치에서 상대적인 offset, 기준(0.0)은 주변 element의 static 요소 - a,b element가 존재하는 화면에서 a가 left:100px이고 b의 relative가 left: 100px 라면 실제 화면에서 b는 left: 200px의 위치로 계산됨 - relative로 정해진 element는 다른 요소에 영향을 주지 않는다 absolute - 현재위치에서 상대적인 offset, 그러나 기존의 element와 별개이며 부모요소에 dependent한 기준(0.0)을 갖게 된다. - 부모가 모두 static이거나 부모가 없다면 기준(0.0)이 브라우저가 된다. - 부모가 하날도 static이 아니라면 부모의 위치가 기준이 된다. fixed - 현..
2021.01.12