개인공부/CSS4 생략 scss 공부를 하다 알게된 생략 한 공간에서 일정이상의 글을 작성하게 되면 공간은 유지되고 공간을 넘어간 글은 "..." 으로 표시 ellipsis @mixin ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } p { @include ellipsis; } 2022. 7. 11. vh, vw, vmin, vmax 작성하기에 앞서 급성장염이 걸려서 제대로 된 활동을 1도 못했습니다. ㅠㅠ 알바도 중간에 조퇴하고 가지도 못하고 화장실에서만 살았습니다. ㅠㅠ 다들 몸에 맞지 않는 음식은 최대한 피하고 특히, 맵고 짜고 이런거는 최대한 지양합시다 ㅠㅠㅠ 저는 참고로 꿀아메리카노 먹고 장염걸렸습니다. 앞으로 커피와 꿀은 최대한 피할듯 싶습니다.... vh(Vertical Height) & vw(Vertical Width) 반응형 웹 디자인 테크닉은 퍼센트 값에 의존하지만 무조권적으루다가 모든 문제가 해결되지는 않습니다. CSS의 너비값은 가장 가까운 부모의 상대적인 값에 영향을 받습니다. 만약 타겟의 너비의 값을 뷰포트의 너비와 높이의 값을 맞게 사용할 수 있다고 합니다. 우리는 vh, vw라고 부르기로 했습니다. vh는.. 2022. 3. 30. CSS의 단위 공부하다 적은 rem과 em의 간단한 차이 ## px과 rem(root em) 그리고 em px은 가장 기본이되는 단위라고 생각하시면 됩니다. 기본적으로 파워포인트, 엑셀, 한글 등 에서 사용되며 처음으로 HTML, CSS를 배울때도 px단위로 가장 많이 사용합니다. ## rem rem의 개념은 기준이 되는 값을 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 요소는 최상위 요소인 html태그에서 지정된 크기를 의미합니다. html{ font-size: 20px; } div{ font-size: 1.25rem; // 20 x 1.25= 25px padding: 1.5rem; // 20 x 1.5 = 30px margin: 2rem; // 20 x 2 = 40px } 이런식으로 표현이 가능합니다. ## em em의 개념은 기준이 되는 .. 2022. 3. 30. 내가 보려고 만들어놓은 CSS ## 박스 가운데로 정렬 .loginBox { width: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px; background-color: white; } ## 버튼으로 바꾸기 a.btn { display: block; text-decoration: none; border: 1px solid; text-align: center; border-radius: 5px; font-size: 16px; padding: 13px; margin-bottom: 10px; color: gray; opacity: 0.8; position: relative; } a.btn:hover { opacity: .. 2022. 3. 24. 이전 1 다음