css
1.Css - Position absolute fixed시 속성 변화
Css -Position fixed하면 자식 요소는 모두 inline-block이 된다
2.Css - diplay 속성 inline / block 태그 구별
인라인 요소(Inline Element)img input label li form textarea ul select br em 블록 요소 h1 p hr fieldset iframe 시멘틱 태그들 1
3.Css - position fixed 했을 때 영역
position: fiexd;하면 영역을 잃어버리는데 다시 영역 크기를 잡아주면 해결
4.Css - inline 요소 정렬 시 간단하게
Css - inline 요소 정렬 시 간단하게 하는 법text-align: right;으로 여러줄 칠거없이 간단하게 할 수 있음
5.css - border-radius 중첩
border-radius 중첩하면 예쁘게 찌그러뜨릴 수 있다.
6.css - rendering order 문제 (with position)
이런 문제시 z-index로만 해결이 안됬었다같은 태그가 겹치면 position 속성이 있는 태그가 먼저 그려지고 둘다 position을 가지고 있다면 relative가 absolute보다 우선되어 그려짐
7.css - hr
hr은 블록요소라서 걍 띄우면 상하좌우 border가 있는 형태가 2px때문에 border:none 설정하고 커스텀 할 것
8.css - block 정렬 margin
block 정렬은 margin으로 가능하다 margin: 30px auto;margin-left: auto; 이런식으로 간편하게 정렬가능
9.css - css 가로 스크롤이 생기는 이유
최상단 부모에 기준이 되는 영역값을 잡아줘야되는게 아닐까? 하는 생각에이렇게 만들었는데 자꾸만 알수 없는 이유로 횡 스크롤이 생기는 것이였다다른 컴포넌트에 padding border 때문인건지 뭔지 알수가 없었는데width를 없애니까 사라졌다,,짱남,,일단 없어졌다wi
10.css - styled-components 조건부 전체 스타일링
이거 종종 까먹어서 자꾸 한참 찾아보게 된다 블로그 글 제목 짓기 참 어렵다
11.css inline style을 사용시 문제된다고 생각된점
회사에서 힘들었던 버그픽스에 대해 적어본다.(feat: css에서 절대로 html태그에 inline style로 작업하면 안되는 이유)프론트는 나 혼자이고 기존 서버개발자가 css작업을 해놓았는데inline style로 작업을 해놓은 상태라서 디버깅이 정말 힘들었었다.
12.stacking context (*z-index문제)
회사에서 겪은 z-index 문제를 해결하다 알게 된 stacking context 를 정리한다위 링크 내용과 같이 정리했어야 했는데 업무가 바빠서 지금에서야 정리한다스샷은 없지만,,이전에 작업하다보니 회사 급여 프로젝트의 프론트 작업에서 z-index의 무분별한 남용