Dev Diary

네, CSS 미디어 쿼리 없이 반응형 디자인을 구현하려면 vw(viewport width)나 rem 단위를 사용하는 것이 좋은 방법입니다. 이 접근 방식은 "fluid typography" 또는 "fluid design"이라고 불립니다. 각 단위의 특성과 사용 recommendation을 살펴보겠습니다: 1. font-size:    - vw 사용:       - 장점: 뷰포트 크기에 따라 자연스럽게 조절됩니다.      - 단점: 매우 큰 화면이나 작은 화면에서 텍스트가 지나치게 크거나 작아질 수 있습니다.      - 예: `font-size: calc(16px + 0.5vw);`    - rem 사용:      - 장점: 루트 요소의 font-size를 기준으로 하여 일관성 있게 조절됩니다.    ..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 CSS Diner 사이트를 통해 Selectors 연습을 하고 있다 그 중 level 18 에서 이해가 가지 않는 부분들이 있어서 좀 더 파고들어 보려고 한다 :nth-child 자식 요소 선택을 사용하여 해결하면 되는 일이다 위 예시를 참고하여 응용해보았다 div plate:nth-child(3) 응? 안 되네? (div가 여러개 있는 것이 아니라 하나만 있어서 div를 선택해보았다) .table plate:nth-child(3) 얘도 안 되네?... :nth-child(3) 이 코드로만 된다 그런데 위 예시를 보면 EVERY element 를 대상으로 하는 것 같은데 만약 div가 여러개 있다면 `:nth-child`를 사용해 ..

//비전공자가 혼자 공부하는 공간입니다 //잘못된 정보가 있을 수 있어요 공부 내용은 https://inpa.tistory.com/entry/SCSS-%F0%9F%92%8E-SassSCSS-%EB%9E%80-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%BB%B4%ED%8C%8C%EC%9D%BC 아래 블로그를 참고 하였다 이렇게 출처 남겨도 되는지 모르겠네... [SCSS] 💎 Sass(SCSS) 개념 소개 & 설치 세팅 💯 정리 CSS 와 Sass(SCSS) Sass(SCSS)에 대해 얘기하기에 앞서, CSS에 대한 이야기를 짧게 해보자. 🤔 CSS의 단점 CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다. 예를들 inpa.tistory.com 나는 공부..

//비전공자가 혼자 공부하는 공간입니다 너무 간단한 것인데 자꾸 까먹는 것 같아서 메모용으로 작성해두려고 한다. 가운데 정렬할 때는 margin-left: auto; margin-right: auto; 안되면 display: block; 줘보자 서로 왼쪽으로 가라 오른쪽으로 가라 부딪혀서 가운데 정렬이 되는 듯 싶다 간단하게는 margin: 0 auto;