참고 https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip background-clip - CSS: Cascading Style Sheets | MDN The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box. developer.mozilla.org 코드 - background-clip을 사용하면 border-radius를 적용할 수 있음 See the Pen border gradation by 이아름 (@aahreum) on CodePen.
Flex와 Grid의 차이 플렉스와 그리드는 레이아웃을 잡을 때 많이 사용된다. flex는 1차원으로 행, 열 영역 중 하나의 방향으로 레이아웃을 나눌 수 있고, Grid는 2차원으로 행, 열 영역을 동시에 나눌 수 있다. flex에 적합한 레이아웃은 아래의 이미지와 같다. 아래처럼 콘텐츠를 한 방향으로 정렬할 때 flex는 빛을 발한다. 반면 그리드는 아래처럼 좀 더 복잡한 레이아웃을 잡을 때 편리하다. grid는 flex와 달리 열과 행을 함께 나눠야할 상황에 사용하면 좋다. flex와 grid 중 어느 하나만을 고집해서 레이아웃을 잡기 보다는 각 상황에 알맞게 flex와 grid를 사용하는 것이 중요하다.
미디어쿼리는 반응형 웹 페이지에서 가장 큰 역할을 한다 하지만 너무 많이 사용하면 웹 페이지의 성능이 저하될 수 있기 때문에 미디어 쿼리를 최소화하는 방법을 정리하고자 한다. 1. 불필요한 미디어 쿼리 삭제 사용되지 않는 미디어 쿼리는 삭제하는 것이 좋다. ex) 모바일 장치에서는 적용되지 않는 데스크톱용 미디어 쿼리를 삭제 2. flex, grid 사용 플렉스와 그리드를 사용하면 뷰포트의 너비에 따라 자동으로 레이아웃을 조정할 수 있어서 미디어 쿼리를 줄일 수 있다. See the Pen flex by 이아름 (@aahreum) on CodePen. 3. CSS 가변단위 사용 CSS 가변단위인 rem, em, vw, vh를 사용해서 미디어 쿼리를 최소화할 수 있다. h1 { font-size: 1.5e..
CSS 애니메이션 최적화 애니메이션 최적화는 왜 필요할까? 애니메이션을 구현하다보면 jank현상(스크롤 떨림, 지연, 끊김 등)이 나타난다. 이를 해결하기 위해 애니메이션 최적화가 필요하다. 애니메이션 최적화는 웹 사이트의 성능을 향상시킬 수 있고, 시스템을 절약하여 좋은 사용자 경험을 제공할 수 있다. 웹 브라우저의 랜더링 순서 웹 브라우저의 랜더링은 위와 같은 순서로 진행된다. 이 중에서 자세히 알아야 둬야 하는 부분은 Layout, Paint, Composite이다. 1. Layout 브라우저는 각 요소의 크기와 위치를 계산함 - width, height, margin, padding, position, display, float 등 2. Paint 브라우저가 요소의 스타일 정보를 이용하여 픽셀을 ..
Class 선택자 .클래스명 .gnb { ...... 태그 선택자 태그명 body { ..... ID 선택자 #ID명 #gnb { ..... 전체 선택자 * * { ..... 속성 선택자 [ ] a[title = "daum"] a태그에 title이 daum인 것 부모 자손 선택자 선택자1 선택자2 a .daum {.... 선택자 사이에 공백 넣기 자식 선택자 선택자 > 선택자 body > .gnb { .... 공백과 다른 점은 직계 자손만 선택 가능 인접 형제 선택자 선택자 + 선택자 a + ul { .... 선택자 바로 뒤에있는 태그가 선택됨 일반 형제 선택자 선택자 ~ 선택자 ul ~ span { .... ul 아래 있는 모든 sapn 태그 요소 선택됨 가상선택자 : a:hover 등 태그: nth-..
top: 50%; left: 50%; transform: translate(-50%, -50%); 흔히 가운데 정렬을 할 때 많이 사용한다. 뭔가 가운데 정렬이라 하면 뭔가 저 top: 50% left: 50%만으로 될 것 같아 보였다. (잘 모르는 나의 기준으로 봤을 때) 그런데 왜 가운데 정렬을 하고자 할때 매번 translate -50%, -50%가 쓰였다. 이 부분이 이해가 바로 되지 않아서 정리한 글 left: 50%를 적용하면 부모의 크기를 기준으로 적용된다. 부모 크기의 50%지점으로 사각형이 이동한 것을 볼 수 있다. transform: translate(-50%, 0);을 적용하면 -50% : 왼쪽으로 본인의 크기의 50%만큼 이동 - 50%이 아니라 50%였다면 오른쪽으로 이동 위 사진..
