hwlink

aspect ratio aspect ratio 속성은 박스, 이미지, 동영상을 정해둔 비율대로 줄이거나 늘릴 수 있어 반응형 디자인에 탁월합니다. aspect ratio 브라우저 접근성 internet explore에선 지원하지 않기 때문에 사용할 시에는 환경을 잘고려해야합니다. aspect-ratio 사용법 width:200px; background:red; aspect-ratio: 16/9; // 16:9비율로 지정 aspect-ratio: 4/3; // 4:3비율로 지정 원하는 비율로 설정해주면 됩니다. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Coding/CSS 2022. 5. 5. 01:23

상대단위 px(약 0.0264cm), pt 같이 고정된 절대단위의 값이 아닌 브라우저가 어떤 기준에 따라 계산한 값 대표적으로 em, rem, %, vw, vh가 해당된다. 본 글에서는 rem, em을 다루겠습니다. rem / em 공통점 em, rem 둘 다 font-size의 속성 값에 비례해서 결정되는 상대단위입니다. ex 1) font-size 16px 0.5em = 16px x 0.5 = 8px 1em = 16px x 1 = 16px 2em = 16px x 2 = 32px ex 2) font-size 20px 0.5rem = 20 px x 0.5 = 10px 1rem = 20 px x 1 = 20px 2rem = 20 px x 2 = 40px em, rem 동일하게 동작합니다. rem / em ..

Coding/CSS 2022. 5. 2. 21:49

프리온보딩 참여 과제를 진행하면서 반응형 페이지를 구현하여야 하는데 마크업을 어떤 스타일로 진행해야 할 지 고민 하던 중 이전부터 쓰고 싶던 Tailwind CSS를 적용해보았다. 사용방법은 공식문서를 참고 하는 것이 더욱 좋을 것 같아 정의와 장단점만 기록하려 한다. Tailwind CSS Tailwind CSS는 Utility-First Fundamentals CSS 프레임워크다. 미리 세팅된 유틸리티를 클래스명에 부여만 해주면 빠른 마크업이 가능하다. 기본 CSS로 작업시 코드 ChitChat You have a new message! Tailwind CSS로 작업시 코드 ChitChat You have a new message! 장점 1. 일관된 디자인 색을 예로 들면 같은 값에 같은 명도,채도의..

Coding/CSS 2022. 1. 16. 22:39

문제점 프로젝트 진행 중 프로필 클릭 시 background-image 말풍선으로 구현된 유저 private 리스트가 나오는 모달이 있었는데, logout 하단여백이 너무 타이트하다고 느껴 리팩토링을 진행하여야겠다고 생각하였다. 1차해결 처음엔 단순하게 width 값을 늘려주어 하단 여백을 늘려야겠다고 생각하여 기존 width:150px >>> width:165px로 조정해주었다. width 조정해주었더니 하단 여백은 해결이 되었다. 근데 만약 리스트가 추가된다면? 백그라운드 이미지를 교체하거나 사이즈를 일일이 조절해줘야하기 때문에 비효율적이라고 생각하였다. 최종해결 리스트가 추가될 때를 생각하면 어떻게 구현해야 할 지 고민하다가 말풍선을 css로 처리한다면 될 것 같다고 생각하여 검색을 해보았더니 말풍..

Coding/CSS 2022. 1. 12. 18:16

Scss 폴더관리 프로젝트 진행 시 개별 scss파일에 _sample.scss 언더바를 붙이면 컴파일이 발생하지 않는다. 그럼 컴파일이 일어나지 않는다면 스타일이 적용이 안되는데 어떡하나? 방법은 main.scss에서 _로 만든 scss파일들을 import 해서 한번에 컴파일 해주어 용량을 가볍게 관리하여 성능에 이점을 줄 수 있다.

Coding/CSS 2022. 1. 2. 22:58

참고:https://ko.learnlayout.com/position.html 1. position 속성 - relative, absolute, fixed position 프로퍼티에는 다양한 값을 설정할 수 있다. position: relative .relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; } position: fixed 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. 주로 메인페이지 헤더부분에 많이 사용한다. .fi..

Coding/CSS 2021. 11. 2. 20:46