npm i styled-components npm i -D @types/styled-components 1. Styled-Components 특징 - 반환되는 값은 JSX Element 또는 React 컴포넌트 - 컴포넌트는 Javascript의 스코프를 따르기 때문에 해당 스코프 안에서 격리된 스타일을 적용할 수 있음 2. 기본 문법 import styled from "styled-components"; const BlueButton = styled.button` background-color: blue; `; styled 함수는 HTML 요소를 그 속성으로 내장하고 있어, 컴포넌트를 styled.HTML 태그` CSS 속성 `와 같이 선언해줄 수 있음. 이렇게 정의한 컴포넌트는 React에서 일반적인..
1. transform 속성 https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. developer.mozilla.org flex나 grid를 적용하기 곤란한 요소에 위치 속성(top, bottom, left, right)과 transform 속성을 이용하면 해당 요소를 깔끔하게 정렬하는 것이 가능함. 하지만, transform 속성을 제대로 이해하지 못하고 사용한다면 원하는 결과를 얻을 수 없음. 1. transform 속성은 오른쪽부터 그 속성값을 적용함. 만약, tra..
1. prefers-color-scheme https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme prefers-color-scheme - CSS: Cascading Style Sheets | MDN prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다. developer.mozilla.org 사용자의 PC 다크 모드 설정에 따라 웹페이지에 다크 모드를 적용하려고 할 때 미디어 쿼리를 이용하면 시스템 설정에 맞춰서 다크 모드가 적용됨 @media (prefers-color-scheme: dark) { :root { --color-body: rg..
https://specifishity.com/ Specifishity :: Specificity with Fish specifishity.com 1. 예시1 /* 코드 A */ input[type="button"] { ... } /* 코드 B */ .thisClass { ... } class로 더 명확하게 요소를 지정한 코드 B로 덮어씌우질 것 같지만, ① 코드 A: input 0-0-1 + [type="button"] 0-1-0 = 0-1-1 ② 코드 B: .thisClass 0-1-0 = 0-1-0 코드 A의 명시도가 더 높아 코드 B는 무시됨. 2. 예시2 명시도는 동일한 요소에 동일한 속성을 적용했을 때만 고려됨 /* 코드 C */ input[type="button"]:hover { color: ..
1. 해당 요소의 position 속성에 따른 기준 해당 요소의 ① position: relative이면 자신이 원래 위치했던 곳이 기준, ② position: absolute이면 position: static이 아닌 가장 가까운 부모 요소의 (0, 0) 지점이 기준, ③ position: fixed, sticky이면 문서의 (0, 0) 지점이 기준 HTML 삽입 미리보기할 수 없는 소스 left: 10%를 지정했을 때 위치가 모두 다름 2. top/bottom/left/right 속성의 (%) 값 해당 요소의 position 속성에 따라 자신이 기준으로 삼는 요소의 크기를 100%로 잡음. 즉, 해당 요소가 ① position: relative이면 부모 요소, ② position: absolute이면 ..
이번에야말로 CSS Flex를 익혀보자이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누studiomeal.com 1. 행/열 사이 여백① row-gap: 각 행 사이의 여백 지정② column-gap: 각 열 사이의 여백 지정a. justify-content, align-content 속성은 메인축 방향에 따라 행/열 기준이 달라지지만 이 속성은 메인축, 수직축 방향에 영향받지 않음b. flex items이 2개 이상일 때 item 개별로 여백을 지정하면 반응형 웹에서 wrap 되었을 때 레이아웃이 어긋나므로 개별로 여백을 지정하는 것보단 row-gap..
양쪽 요소는 각각 왼쪽과 오른쪽 가장자리에 배치하고, 가운데 요소는 부모 요소의 중앙에 정렬하는 방법은? 1. position: absolute 속성 이용 HTML 삽입 미리보기할 수 없는 소스 1. 양쪽 요소 정렬 float: left / right 2. 가운데 요소 중앙 정렬 position: absolute; left: 50%; transform: translate(-50%); 3. 부모 요소 position: relative; 자식 요소에 absolute 속성을 지정하기 위해서 필요 overflow: hidden; float, absolute 속성이 지정된 자식 요소들을 제대로 포함하기 위해 필요 2. display: inline-block 속성 이용 HTML 삽입 미리보기할 수 없는 소스 1. ..
https://developer.mozilla.org/ko/docs/Web/CSS/overflow overflow - CSS: Cascading Style Sheets | MDN overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x (en-US), overflow-y (en-US)의 값을 설정합니다. developer.mozilla.org 요소 내의 콘텐츠가 요소의 크기를 넘어갈 때 넘어간 부분을 처리하는 방법에 대한 속성 overflow: hidden 속성을 가진 부모 요소와 외부로 넘쳐흐르는 자식 요소에 대해 ① 부모 요소에 고정된 height 또는 width 속성이 있을 경우 자식 요소의 넘친 부분을 보이..
1. Block Formatting Context(BFC) https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ Understanding Block Formatting Contexts in CSS - SitePoint Ritesh Kumar delves into the CSS spec to explain, with demos and diagrams, what is meant by "block formatting contexts" and how they affect page layout. www.sitepoint.com 1. 같은 부모 요소 내의 있는 자식 요소들은 새 BFC를 만들지 않는 한 동일한 BFC를 가짐 2. 새로운 ..
속성명 그대로 "떠 있는" 요소를 만드는 속성. float 속성이 지정된 요소의 '바로 다음'에 나오는 요소의 성격에 따라 요소의 속성 float 속성을 가진 요소와의 배치 inline 어울림 inline-block 어울림 block 요소 내부의 문자열 어울림 block 무시 1. float 요소와 block 요소가 배치된 경우 #1 HTML 삽입 미리보기할 수 없는 소스 ① block 요소는 float 요소를 무시하고 배치됨 ② block 요소 내의 문자열은 float 요소와 어울려서 배치됨 2. float 요소와 block 요소가 배치된 경우 #2 HTML 삽입 미리보기할 수 없는 소스 1과 동일하지만 block 요소의 문자열을 float 요소와 한 줄에 어울려서 배치하기에는 block 요소의 크기가..
CSS 2022. 6. 30. 11:43
npm i styled-components npm i -D @types/styled-components 1. Styled-Components 특징 - 반환되는 값은 JSX Element 또는 React 컴포넌트 - 컴포넌트는 Javascript의 스코프를 따르기 때문에 해당 스코프 안에서 격리된 스타일을 적용할 수 있음 2. 기본 문법 import styled from "styled-components"; const BlueButton = styled.button` background-color: blue; `; styled 함수는 HTML 요소를 그 속성으로 내장하고 있어, 컴포넌트를 styled.HTML 태그` CSS 속성 `와 같이 선언해줄 수 있음. 이렇게 정의한 컴포넌트는 React에서 일반적인..
CSS 2022. 5. 21. 16:48
1. transform 속성 https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. developer.mozilla.org flex나 grid를 적용하기 곤란한 요소에 위치 속성(top, bottom, left, right)과 transform 속성을 이용하면 해당 요소를 깔끔하게 정렬하는 것이 가능함. 하지만, transform 속성을 제대로 이해하지 못하고 사용한다면 원하는 결과를 얻을 수 없음. 1. transform 속성은 오른쪽부터 그 속성값을 적용함. 만약, tra..
CSS 2022. 5. 7. 22:01
1. prefers-color-scheme https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme prefers-color-scheme - CSS: Cascading Style Sheets | MDN prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다. developer.mozilla.org 사용자의 PC 다크 모드 설정에 따라 웹페이지에 다크 모드를 적용하려고 할 때 미디어 쿼리를 이용하면 시스템 설정에 맞춰서 다크 모드가 적용됨 @media (prefers-color-scheme: dark) { :root { --color-body: rg..
CSS 2022. 5. 3. 13:34
https://specifishity.com/ Specifishity :: Specificity with Fish specifishity.com 1. 예시1 /* 코드 A */ input[type="button"] { ... } /* 코드 B */ .thisClass { ... } class로 더 명확하게 요소를 지정한 코드 B로 덮어씌우질 것 같지만, ① 코드 A: input 0-0-1 + [type="button"] 0-1-0 = 0-1-1 ② 코드 B: .thisClass 0-1-0 = 0-1-0 코드 A의 명시도가 더 높아 코드 B는 무시됨. 2. 예시2 명시도는 동일한 요소에 동일한 속성을 적용했을 때만 고려됨 /* 코드 C */ input[type="button"]:hover { color: ..
CSS 2022. 4. 10. 22:02
1. 해당 요소의 position 속성에 따른 기준 해당 요소의 ① position: relative이면 자신이 원래 위치했던 곳이 기준, ② position: absolute이면 position: static이 아닌 가장 가까운 부모 요소의 (0, 0) 지점이 기준, ③ position: fixed, sticky이면 문서의 (0, 0) 지점이 기준 HTML 삽입 미리보기할 수 없는 소스 left: 10%를 지정했을 때 위치가 모두 다름 2. top/bottom/left/right 속성의 (%) 값 해당 요소의 position 속성에 따라 자신이 기준으로 삼는 요소의 크기를 100%로 잡음. 즉, 해당 요소가 ① position: relative이면 부모 요소, ② position: absolute이면 ..
CSS 2022. 3. 28. 15:18
이번에야말로 CSS Flex를 익혀보자이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누studiomeal.com 1. 행/열 사이 여백① row-gap: 각 행 사이의 여백 지정② column-gap: 각 열 사이의 여백 지정a. justify-content, align-content 속성은 메인축 방향에 따라 행/열 기준이 달라지지만 이 속성은 메인축, 수직축 방향에 영향받지 않음b. flex items이 2개 이상일 때 item 개별로 여백을 지정하면 반응형 웹에서 wrap 되었을 때 레이아웃이 어긋나므로 개별로 여백을 지정하는 것보단 row-gap..
CSS 2022. 3. 22. 17:21
양쪽 요소는 각각 왼쪽과 오른쪽 가장자리에 배치하고, 가운데 요소는 부모 요소의 중앙에 정렬하는 방법은? 1. position: absolute 속성 이용 HTML 삽입 미리보기할 수 없는 소스 1. 양쪽 요소 정렬 float: left / right 2. 가운데 요소 중앙 정렬 position: absolute; left: 50%; transform: translate(-50%); 3. 부모 요소 position: relative; 자식 요소에 absolute 속성을 지정하기 위해서 필요 overflow: hidden; float, absolute 속성이 지정된 자식 요소들을 제대로 포함하기 위해 필요 2. display: inline-block 속성 이용 HTML 삽입 미리보기할 수 없는 소스 1. ..
CSS 2022. 3. 21. 19:35
https://developer.mozilla.org/ko/docs/Web/CSS/overflow overflow - CSS: Cascading Style Sheets | MDN overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x (en-US), overflow-y (en-US)의 값을 설정합니다. developer.mozilla.org 요소 내의 콘텐츠가 요소의 크기를 넘어갈 때 넘어간 부분을 처리하는 방법에 대한 속성 overflow: hidden 속성을 가진 부모 요소와 외부로 넘쳐흐르는 자식 요소에 대해 ① 부모 요소에 고정된 height 또는 width 속성이 있을 경우 자식 요소의 넘친 부분을 보이..
CSS 2022. 3. 21. 17:33
1. Block Formatting Context(BFC) https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ Understanding Block Formatting Contexts in CSS - SitePoint Ritesh Kumar delves into the CSS spec to explain, with demos and diagrams, what is meant by "block formatting contexts" and how they affect page layout. www.sitepoint.com 1. 같은 부모 요소 내의 있는 자식 요소들은 새 BFC를 만들지 않는 한 동일한 BFC를 가짐 2. 새로운 ..
CSS 2022. 3. 19. 22:33
속성명 그대로 "떠 있는" 요소를 만드는 속성. float 속성이 지정된 요소의 '바로 다음'에 나오는 요소의 성격에 따라 요소의 속성 float 속성을 가진 요소와의 배치 inline 어울림 inline-block 어울림 block 요소 내부의 문자열 어울림 block 무시 1. float 요소와 block 요소가 배치된 경우 #1 HTML 삽입 미리보기할 수 없는 소스 ① block 요소는 float 요소를 무시하고 배치됨 ② block 요소 내의 문자열은 float 요소와 어울려서 배치됨 2. float 요소와 block 요소가 배치된 경우 #2 HTML 삽입 미리보기할 수 없는 소스 1과 동일하지만 block 요소의 문자열을 float 요소와 한 줄에 어울려서 배치하기에는 block 요소의 크기가..