반응형3 fimga px to rem 사용하기 desktop 페이지가 거의 완성되어 반응형으로 동작하는 moblie 페이지를 제작하려고 한다. 어디선가 주워듣기론 desktop 페이지는 px을 사용하는 게 좋고, moblie페이지는 rem을 사용하는 게 좋다고 했던 게 기억났다. (모바일 페이지에 더 유연한 디자인을 적용하는 게 좋다고 했던 것 같다...) 그래서 figma에서 inspect탭에서 사이즈를 가져와서 코드로 짜려고 하는데, 기본적으로 피그마는 px단위만을 지원하기 때문에, 직접 수치를 변환해서 사용해야 하는 것 같았다. 그래서 찾아보니 px을 입력하면 rem으로 바꿔주는 플러그인 들이 있는 것 같았다. 하지만 일일히 수치를 입력하고 계산하기 귀찮아서 Heron Handoff 라는 플러그인을 사용하기로 했다. 피그마 화면에서 플러그인 -.. 2021. 11. 18. css 반응형 웹 만들기 css파일에 미디어쿼리 적용하기 @media only screen and (min-width:100px) { } 컴퓨터 화면에 적용 : screen 속성 설정 : (min-width or max-width) /* test.css */ html, body, div{ width: 100%; height: 100%; } @media screen and (max-width:500px){ body { display: flex; flex-direction: row; } #test1 { background-color: antiquewhite; } #test2 { background-color: red; } #test3 { background-color: blueviolet; } } @media screen and (.. 2021. 6. 6. SIMPLE LINE SKIN 추천 [티스토리 스킨] 안녕하세요~ 첫 블로그 포스팅을 합니다 :) 항상 블로그를 할 때마다 어떤 스킨을 쓸지가 항상 고민인데요~ 디자인이 좋으면 기능이 부실하고, 기능이 좋으면 디자인이 별로고..... 둘다 좋으면 유료거나 다른 블로거들이 많이 사용하고 있어서 쓰기 싫고..... 그러다가 SIMPLELINE SKIN (반응형) 2단을 찾게 되었습니다. ⭐︎SIMPLE LINE SKIN⭐︎ ⭐︎제 블로그에 적용한 모습입니다⭐︎ 아직 포스팅이 없어서 허전하긴 하지만, 아주 깔끔하고 보기좋은 것 같아요 ㅎㅎ SIMPLELINE SKIN 2018. 9. 20. 이전 1 다음
