이것 역시 앞서 올린 box-shadow값을 css로 변환해준 도구와 비슷한 도구입니다.  아래 페이지에서 확인이 가능한데요.https://cssgradient.io/  피그마에서 그라디언트 값을 옮겨 적으면,background:linear-gradient() 값으로 쉽게 변환시켜줍니다! border/background 등 값 쉽게 확인할 수 있습니다 :)

보통 홈페이지나 앱 작업 시, 피그마로 디자인을 전달 받으면 피그마 내에서 코드 확인이 가능하기 때문에 디자인과 동일한 값을 정확하게 작업할 수 있습니다.하지만 포토샵으로 디자인을 전달 받을 시에는 정확한 값을 넣기가 애매한 부분이 있는데요.저와 같은 어려움을 겪으신 분이 있으셨는지 멋진 개발자 분께서 아예 도구로 만들어주신 것이 있었습니다!  바로 아래 페이지 입니다.https://melanieceraso.com/psd-to-css3/  포토샵에서 box-shadow값이 있을 때,포토샵 값을 그대로 입력하면 css코드로 변환시켜주더라구요 :) 해당 도구를 사용하면 디자인과 똑같이 작업할 수 있습니다!

갤럭시 같은 경우 사용자가 휴대폰 자체의 폰트 사이즈를 키울 경우,자신이 작업하며 설정한 폰트 크기대로 보여지지 않는 경우가 생기게 됩니다.그 경우 아래 코드를 입력하면, 사용자가 휴대폰 자체의 텍스트 크기를 키워도 영향을 받지 않습니다 :)html { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}  하지만, 크롬 브라우저에서 휴대폰 자체 폰트 크기 문제가 아닌 폰트 사이즈가 크게 보이는 오류가 발생할 때도 있습니다.그런 경우에는 해당 엘리먼트의 부모 요소에 max-height값을 추가하면 해결됩니다 :) 크롬 브라우저에서 해당 텍스트가 크게 보이는 오류가 발생합니다. ..

vscode에 유용한 플러그인이 많이 있습니다.제가 vscode를 사용할 때 무조건 다운부터 받고 시작하는 플러그인을 소개해 드릴게요!   1. Material Icon Theme첫 번째로 Material Icon Theme 라는 플러그인 인데요!이 플러그인은 폴더를 만들 때 폴더 구분이 쉽도록 아이콘으로 바꿔주는 플러그인 입니다! : ) 해당 플러그인을 다운받지 않아도 기본적으로 아이콘 표시가 있으나, 다운 받으면 폴더 간 구분이 더 쉬워집니다! css / js / images 외에도 page 폴더, 마크다운 파일 등의 아이콘 표시도 더 확인이 쉽도록 표시가 되니 확인해보세요^-^  2. Live Server두 번째로 Live Server 플러그인 입니다.이 플러그인은 새로고침을 하지 않아도 내가 수정..

안녕하세요!오늘은 소스코드를 확인할 수 있는 여러가지 방법에 대해서 알아보도록 하겠습니다 :)작업을 진행하다 보면 99.9999999%의 확률로 여러 홈페이지의 소스 코드를 확인해봐야 할 일이 생깁니다.하지만, 가끔 홈페이지의 우클릭이나 F12키가 막혀있는 경우가 있죠?그럴 때 아래 방법을 통해 코드를 확인해 보세요! 1. F12 단축키가장 흔하게 쓰이는 방법입니다.F12 단축키를 사용하여 개발자 도구 확인이 가능합니다. 2. Ctrl + shift + i 단축키F12 단축키가 막혔을 때 제가 자주 사용하는 단축키 중 하나 입니다ㅎㅎ(f12키나 우클릭만 막고 ctrl + shift + i는 안 막아두는 경우도 꽤 돼서 나름 유용합니다.) 3. Ctrl + U 단축키 (or 우클릭 → 페이지 소스보기)..