이 글은 CSS Flex 아이템 크기 결정 알고리즘: 이론 편을 바탕으로 CSS Flex 아이템의 크기가 어떻게 결정되는지 구체적인 사례를 통해 이해해보는 글이다. 1. 고정 크기의 헤더, 푸터와 유동적인 본문위 사진과 같이 헤더와 푸터의 높이는 고정이고, 본문의 크기는 viewport에 따라서 달라지는 레이아웃을 생각해보자. 이 레이아웃은 Flex를 사용하지 않고 CSS `calc()` 함수를 이용해서 만들 수도 있지만 요구사항이 바뀌어 헤더, 푸터의 높이가 달라진다면 각 요소의 높이를 개별적으로 수정해줘야 하는 불편함이 있다. Flex 레이아웃을 사용한다면 헤더, 푸터의 높이가 달라지더라도 본문의 높이는 수정해줄 필요가 없어 편하다. 이 레이아웃에서 CSS 코드는 아래와 같다..container ..
모던 웹에서 CSS Flex는 많이 사용되고 개념도 그리 어렵지는 않지만 내가 생각한 결과와 실제 브라우저에서 보여지는 레이아웃이 다르다면 당황스러울 수 있다. 플렉스 너비 결정 알고리즘을 이해한다면 플렉스 아이템의 크기가 왜 그렇게 결정되었는지, 왜 내가 생각한 대로 렌더링되지 않았는지 고민하느라 시간을 낭비하지 않을 수 있을 것이다.문제를 간단하게 하기 위해 플렉스 아이템에 특별히 `position`속성을 설정하지 않은 경우, 그리고 플렉스 메인 축(main axis)이 x축 방향일 때만을 고려해보자.(`flex-direction: column`이라면 동일한 내용을 y축에 대해 적용해주면 된다.)Flex Layout Algorithm1. Initial Setup2. Line Length Determi..
Single Element CSS Spinners A collection of loading spinners animated with CSS. Each spinner is created from a single div with animation, styling and pseudo-elements applied via CSS. These are pure CSS loading animations without any use of JavaScript or GIFs. projects.lukehaas.me 1. 원형 스피너(기본형) 다른 요소를 추가할 필요없이 border 속성만으로 간단하게 스피너를 구현할 수 있음. .spinner { border-top: 8px solid rgb(255, 208, 208); ..
const SBlueButton = styled.button` color: white; background-color: blue; width: auto; height: 40px; ` 1. 컴포넌트 스타일 확장하기: styled()`` # 이미 만들어둔 컴포넌트에서 기본적인 골격은 유지한 채 일부 스타일만 다르게 만들어야 할 때는 어떻게 해야 할까? 앞서 만든 SButton에서 배경색, 글씨 색만 흰색으로 바꾸고 싶을 때 styled.button 을 하는 것처럼 styled(SButton)을 적용해줄 수 있음. styled()를 이용하면 라이브러리 컴포넌트이든, 내가 직접 만든 컴포넌트든 스타일 확장이 가능함. 이때, 주의할 점은 Styled-Components에서는 클래스명을 이용해 스타일링을 하기 때문..
1. object-fit, object-position 앱에 이미지를 삽입할 때, 이미지의 정확한 width, height를 지정해주는 게 좋지만 API를 이용해 이미지를 가져올 때 이미지마다 사이즈가 다를 수 있기 때문에 이미지의 width, height를 정해주기가 쉽지 않음. img { object-fit: contain; object-position: left top; } object-fit 속성을 이용하면 내가 이미지의 크기를 지정하지 않아도 이미지의 크기를 박스 사이즈에 맞게 줄이거나 잘라줌. object-fit: contain 속성을 사용하면 이미지에 레터 박스가 생기는데 마찬가지로 이미지마다 레터 박스의 사이즈, 위치가 다를 수 있어 보기 안 좋을 수 있음. 이때, object-positi..
CSS Grid 완벽 가이드 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ... heropy.blog 1. Grid 행과 열 Grid 레이아웃은 행과 열로 이루어져 있는데, 최상단 지점부터 1번째 행/열로 지정됨. 예를 들어, 2번째 행와 3번째 행, 1번째 열과 2번째 열 영역에 위치에 있는 grid item은 grid-area: 2/1/3/2로 표현할 수 있음. (TIP: (2, 1) 지점과 (3, 2) 지점 내부) 2. grid-area grid-area: /* 시작 행 */ /* 시작 열 */ /* 끝 행 */ /* 끝 열 */; 어떠한 요소의 위치를 지정하는 방법으로,..
1. animation 단축 속성 # .someClass { animation: /* ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ */ } @keyframes ① { } animation 속성은 아래 속성들의 단축 속성으로 ①~⑧까지 속성값을 차례대로 작성해줌. ① animation-name: @keyframes 블록에서 작성한 애니메이션의 이름. ② animation-duration: 한 사이클의 애니메이션이 재생될 시간 지정 ③ animation-delay: 애니메이션의 시작을 지연시킬 시간 지정. 300ms로 지정하면 300ms 이후부터 애니메이션이 시작됨. ④ animation-direction: 애니메이션 재생 방향을 지정 ⑤ animation-iteration-count: 애니메이션이 몇 번 반복될지 지정 ⑥..
1. css 헬퍼 함수 # const Button1 = styled.button` color: ${ (props) => props.color || "white" }; background: ${(props) => props.background || "grey" }; `; Props로 전달해주는 스타일링 속성이 여러 개일 때도 동일하게 적용해줄 수 있음. 하지만, 그러한 속성들이 수 십개라면 위와 같이 코드를 작성하는 건 비효율적. 이때, Styled Components에서 제공하는 css 헬퍼 함수를 이용해줄 수 있음. css 헬퍼 함수는 styled 함수에 ${(props) => ... ${ (props) => ... } ...}와 같이 중첩된 함수를 넣어야 할 때 사용할 수 있음. // css help..
& span:nth-child(2) { animation-delay: 300ms; } & span:nth-child(3) { animation-delay: 600ms; } & span:nth-child(4) { animation-delay: 900ms; } Styled-Components의 장점은 컴포넌트 스타일의 재사용성에 있음. 컴포넌트를 재사용하게 될 경우, 자식 요소의 개수가 달라질 수 있기 때문에 위 코드처럼 자식 요소를 선택하는 문법은 한계가 있음. CSS에서는 :nth-child(n)에서 n을 사용할 수 있는 방법이 없기 때문에 CSS 문법으로는 하드 코딩을 하는 방법밖에 없음. Styled-Components는 기본적으로 CSS의 문법을 따르지만, Javascript에서 작성되기 때문에 J..
CSS 2024. 9. 5. 21:52
이 글은 CSS Flex 아이템 크기 결정 알고리즘: 이론 편을 바탕으로 CSS Flex 아이템의 크기가 어떻게 결정되는지 구체적인 사례를 통해 이해해보는 글이다. 1. 고정 크기의 헤더, 푸터와 유동적인 본문위 사진과 같이 헤더와 푸터의 높이는 고정이고, 본문의 크기는 viewport에 따라서 달라지는 레이아웃을 생각해보자. 이 레이아웃은 Flex를 사용하지 않고 CSS `calc()` 함수를 이용해서 만들 수도 있지만 요구사항이 바뀌어 헤더, 푸터의 높이가 달라진다면 각 요소의 높이를 개별적으로 수정해줘야 하는 불편함이 있다. Flex 레이아웃을 사용한다면 헤더, 푸터의 높이가 달라지더라도 본문의 높이는 수정해줄 필요가 없어 편하다. 이 레이아웃에서 CSS 코드는 아래와 같다..container ..
CSS 2024. 8. 7. 12:40
모던 웹에서 CSS Flex는 많이 사용되고 개념도 그리 어렵지는 않지만 내가 생각한 결과와 실제 브라우저에서 보여지는 레이아웃이 다르다면 당황스러울 수 있다. 플렉스 너비 결정 알고리즘을 이해한다면 플렉스 아이템의 크기가 왜 그렇게 결정되었는지, 왜 내가 생각한 대로 렌더링되지 않았는지 고민하느라 시간을 낭비하지 않을 수 있을 것이다.문제를 간단하게 하기 위해 플렉스 아이템에 특별히 `position`속성을 설정하지 않은 경우, 그리고 플렉스 메인 축(main axis)이 x축 방향일 때만을 고려해보자.(`flex-direction: column`이라면 동일한 내용을 y축에 대해 적용해주면 된다.)Flex Layout Algorithm1. Initial Setup2. Line Length Determi..
CSS 2022. 8. 31. 22:32
Single Element CSS Spinners A collection of loading spinners animated with CSS. Each spinner is created from a single div with animation, styling and pseudo-elements applied via CSS. These are pure CSS loading animations without any use of JavaScript or GIFs. projects.lukehaas.me 1. 원형 스피너(기본형) 다른 요소를 추가할 필요없이 border 속성만으로 간단하게 스피너를 구현할 수 있음. .spinner { border-top: 8px solid rgb(255, 208, 208); ..
CSS 2022. 8. 29. 22:16
const SBlueButton = styled.button` color: white; background-color: blue; width: auto; height: 40px; ` 1. 컴포넌트 스타일 확장하기: styled()`` # 이미 만들어둔 컴포넌트에서 기본적인 골격은 유지한 채 일부 스타일만 다르게 만들어야 할 때는 어떻게 해야 할까? 앞서 만든 SButton에서 배경색, 글씨 색만 흰색으로 바꾸고 싶을 때 styled.button 을 하는 것처럼 styled(SButton)을 적용해줄 수 있음. styled()를 이용하면 라이브러리 컴포넌트이든, 내가 직접 만든 컴포넌트든 스타일 확장이 가능함. 이때, 주의할 점은 Styled-Components에서는 클래스명을 이용해 스타일링을 하기 때문..
CSS 2022. 8. 24. 12:59
1. createGlobalStyle # import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` * { box-sizing: border-box; } `; export default GlobalStyle; createGlobalStyle 함수를 이용해 글로벌 스타일을 설정한 후, App 또는 index 파일에 컴포넌트로 삽입. // App.jsx import { GlobalStyle } from "./assets/globalStyles"; const App = () => { return ( ) } export default App; 2. CSS Variables 사용하기 A. CSS Varia..
CSS 2022. 8. 6. 22:35
1. object-fit, object-position 앱에 이미지를 삽입할 때, 이미지의 정확한 width, height를 지정해주는 게 좋지만 API를 이용해 이미지를 가져올 때 이미지마다 사이즈가 다를 수 있기 때문에 이미지의 width, height를 정해주기가 쉽지 않음. img { object-fit: contain; object-position: left top; } object-fit 속성을 이용하면 내가 이미지의 크기를 지정하지 않아도 이미지의 크기를 박스 사이즈에 맞게 줄이거나 잘라줌. object-fit: contain 속성을 사용하면 이미지에 레터 박스가 생기는데 마찬가지로 이미지마다 레터 박스의 사이즈, 위치가 다를 수 있어 보기 안 좋을 수 있음. 이때, object-positi..
CSS 2022. 7. 24. 16:10
CSS Grid 완벽 가이드 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ... heropy.blog 1. Grid 행과 열 Grid 레이아웃은 행과 열로 이루어져 있는데, 최상단 지점부터 1번째 행/열로 지정됨. 예를 들어, 2번째 행와 3번째 행, 1번째 열과 2번째 열 영역에 위치에 있는 grid item은 grid-area: 2/1/3/2로 표현할 수 있음. (TIP: (2, 1) 지점과 (3, 2) 지점 내부) 2. grid-area grid-area: /* 시작 행 */ /* 시작 열 */ /* 끝 행 */ /* 끝 열 */; 어떠한 요소의 위치를 지정하는 방법으로,..
CSS 2022. 7. 22. 11:16
1. animation 단축 속성 # .someClass { animation: /* ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ */ } @keyframes ① { } animation 속성은 아래 속성들의 단축 속성으로 ①~⑧까지 속성값을 차례대로 작성해줌. ① animation-name: @keyframes 블록에서 작성한 애니메이션의 이름. ② animation-duration: 한 사이클의 애니메이션이 재생될 시간 지정 ③ animation-delay: 애니메이션의 시작을 지연시킬 시간 지정. 300ms로 지정하면 300ms 이후부터 애니메이션이 시작됨. ④ animation-direction: 애니메이션 재생 방향을 지정 ⑤ animation-iteration-count: 애니메이션이 몇 번 반복될지 지정 ⑥..
CSS 2022. 7. 19. 21:21
1. css 헬퍼 함수 # const Button1 = styled.button` color: ${ (props) => props.color || "white" }; background: ${(props) => props.background || "grey" }; `; Props로 전달해주는 스타일링 속성이 여러 개일 때도 동일하게 적용해줄 수 있음. 하지만, 그러한 속성들이 수 십개라면 위와 같이 코드를 작성하는 건 비효율적. 이때, Styled Components에서 제공하는 css 헬퍼 함수를 이용해줄 수 있음. css 헬퍼 함수는 styled 함수에 ${(props) => ... ${ (props) => ... } ...}와 같이 중첩된 함수를 넣어야 할 때 사용할 수 있음. // css help..
CSS 2022. 7. 19. 18:55
& span:nth-child(2) { animation-delay: 300ms; } & span:nth-child(3) { animation-delay: 600ms; } & span:nth-child(4) { animation-delay: 900ms; } Styled-Components의 장점은 컴포넌트 스타일의 재사용성에 있음. 컴포넌트를 재사용하게 될 경우, 자식 요소의 개수가 달라질 수 있기 때문에 위 코드처럼 자식 요소를 선택하는 문법은 한계가 있음. CSS에서는 :nth-child(n)에서 n을 사용할 수 있는 방법이 없기 때문에 CSS 문법으로는 하드 코딩을 하는 방법밖에 없음. Styled-Components는 기본적으로 CSS의 문법을 따르지만, Javascript에서 작성되기 때문에 J..