css

폰트를 px로 많이 적용하는 편인데 요것이 잘 못 되었단걸 깨달았다..!!!! 상황에 맞는 폰트단위를 사용해야 한다는 것!!!! 💁‍♀️이런 단위가 있어요. - px: 절대단위. 어떤 요소에 의해서도 변하지 않음 - rem: 루트요소(html)에 상대적 - em: 부모요소에 상대적 - vw: 뷰포트너비(화면 크기)에 상대적 rem/em은 반응형 or 모바일 작업 할때 많이 사용하는 단위이다. 16px = 1em(1 * 16) 32px = 2em(2 * 16) 16px = 1em(1 * 16) 36px = 1rem(2 * 16) 🤷‍♂️em/rem을 사용해야 하는 이유는 뭘까요? px는 절대적이고 em/rem은 상대적이다. 상대적이란건 비례해서 적용을 한다는 것! 유동적이란 말씀! px로 모든 페이지를 적..

webkit 브라우저에서 가운데로 정렬하기 위해 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); 를 사용할때 텍스트 또는 사진이 흐릿하게,, 뿌옇게 보이는 버그가 발생한다. 그럴때!!transform:translate(-50%,-50%) 말고 translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) 를 사용한다.그럼 해결,, 단, 이미지나 컨텐츠에 height값이 잡혀있을 경우홀수값으로 줘야 작동한다. 약간 야매방법이라서,,absolute로 꼭 가운데 정렬을 해줘야하는데 흐릿한 현상이 생길경우 사용하는 게 좋을것같다.다른 방법으로 가운데정렬을 사용해도 된다면다른 방법을 쓰자 +추가position:abs..

어느날 작업하다 ie에서 position fixed 를 줬더니 스크롤 할때 떨리는(흔들거리는?) 현상을 발견했다. 평소 fixed를 많이 써봤지만 이런 경우는 또 첨봐서 css랑 스크립트를 잘못 적용했나 한참을 검색하고 해메다 이유를 발견했다 ... 바로 z-index 를 안줬던것...!!!!! z-index 주니까 떨림 현상이 없어졌다 너무나 어이없었다는 ㅎㅎㅎ예민한 ie 님을 위해 꼼꼼히 봅시다 ~~

이번 포스트는 item에게 주는 속성을 알아볼거에요유용한 속성들이 많으니 집중해봅시다 1.flex-basis 👉 아이템의 기본크기 아이템의 기본 크기를 정할때 씁니다 #container{ display: flex; background: rgb(248,243,239); } .item{ flex-basis:200px; border: 1px solid #000; font-size: 133px; } flex-basis 를 주면 아이템이 너비가 200px로 변하죠?flex기반에서는 flex-basic 이 width 값보다 우선순위가 높기 때문에 flex-basic으로 기본크기를 지정해주는게 좋습니다. 기본값 auto 2.flex-grow 👉 아이템의 너비 비율 css작업하다보면 각 요소에 비율을 주고 싶을때 넓이..

css로 작업을 하다 보면 block요소를 수평으로 주고싶을때 float나 inline-block 을 많이 씁니다 사실 이 방법으로 많이 쓰다보면 float 같은 경우에는 부모요소에 float해제도 시켜줘야하고 .. (귀찮고 비효율적) flex는 굉장히 유연하고 요소의 정렬,방향,크기,순서 까지 제어 할 수 있어요. 사실 쓰다 보면 신세계..!! 왜그런지 같이 공부해볼까요?? 이번 포스트는 부모에게 속성을 적용해 요소들이 배치가 되는 속성들을 배워볼 거에요. 집중 ~~ 1.flex 사용방법 : display:flex flex를 사용하기 위해선 컨테이너와 그 의 자식 을 만들어주어야 합니다. container 안에 item요소들을 만들어줄게요 1 2 3 4 5 위에 처럼 만들어 주었다면 flex를 적용볼게..