728x90 300x250 SMALL Front-end320 flex : auto, flex:1, flex:2, flex: initial축약형 flex 축약형 표현 flex: initial; = flex: 0 1 auto; flex: auto; = flex: 1 1 auto; flex: none; = flex: 0 0 auto; flex: 1 = flex: 1 0 auto; flex: 2 = flex: 2 0 auto; flex: initial = felx: 0 1 auto; flex: initial로 지정하면 기본값이 적용 flex: 0 1 auto와 같은 효과를 나타내기 때문에 flex-grow가 0이기 때문에 flex-basis값보다 커지지 않고 flex-shrink가 1이기 때문에 컨테이너 공간이 부족하면 크기가 줄어들게 된다. flex-basis가 auto이기 때문에 flex항목은 내부 컨텐츠 크기 만큼 공간을 차지하게 된다 flex:.. 2021. 11. 21. 브라우저 지원 여부 확인 사이트 계속 새롭고 편하고 화려한 기술들이 나오고 있는데 새로운 기술들을 쓰자니 브라우저마다 가능한 기술이 다르기 때문에 지원을 하는지 확인이 필요할때가 많은데요 오늘은 내가 사용할 기술을 어떤 브라우저에서 지원하는지 지원여부를 한눈에 확인할 수 있는 사이트 소개 하겠습니다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com caniuse라는 사이트인데요 상단에 확인하고 싶은 기술을 입력을 하면 예를들어서 텍스트에 그림자 효과를 주는 text-shadow를 입력해 보면 아래와 같이 사용가능한 브라우저들을 확인 할 수 있습니다. 빨간색으로 표시된 버전은 지원하지 않는다는 뜻이고 초록색은 지원 가능 노란색으로 표시된 부.. 2021. 11. 20. px을 %로 계산하는 방법 px을 %로 계산하는 공식 자식태그(px) / 부모태그(px) = 결과값 결과값 * 100 = %(퍼센트) 참고로 px을 em으로변경할때는 아래의 사이트에 들어가면 자동으로 계산해 준다. PXtoEM.com 2021. 11. 19. vw 계산기 http://publishing.kr/vw/ VW 계산기 publishing.kr 2021. 11. 18. 이전 1 ··· 51 52 53 54 55 56 57 ··· 80 다음 728x90 반응형 LIST
