개발 기록 남기기✍️

Flex와 Grid의 차이점 Flex : 1차원 레이아웃 시스템(한 방향) Grid : 2차원 레이아웃 시스템(가로-세로) Grid 레이아웃을 만들기 위해선 Flex와 마찬가지로 Grid Container(부모 요소)와 Grid Item(자식 요소)가 있으면 된다. 컨테이너에 display : grid; 를 설정하면 컨테이너의 역할을 수행하고 자식 요소들은 아이템이 된다. ✅ grid를 주면 자식 요소들은 Block 속성이 된다! 근데 display: grid만 설정해서는 레이아웃에 변화가 일어나지 않는다. Grid 컨테이너 속성 속성 의미 display 그리드 컨테이너(Container)를 정의 grid-template-rows 명시적 행(Track)의 크기를 정의 grid-template-column..

position : Sticky sticky는 static 속성과 fixed 속성의 특징을 동시에 가지고 있다. sticky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해줘야 한다. sticky로 설정된 영역은 설정된 위치(예 : top : 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 스크롤 위치가 설정된 위치(임계점)에 다다르면 fixed 처럼 행동하는 속성이다. 예제 HTML 코드 Navigation static fixed sticky Long Text Area. CSS 코드 .container { width: 100%; height: 100%; display: flex; flex-direction: row; border: 2px sol..

Flexbox Froggy란 ? CSS 코드 게임으로 지시사항에 맞게 개구리들을 연잎으로 이동시켜주는 Flexbox 학습게임이다. flexbox의 개념을 쉽게 배울 수 있다. 가끔 CSS 만진지 너무 오래되어서 Flex 개념이 가물가물할 때 한 번씩 풀어보곤 한다! 여러분도 게임으로 Flex 쉽게 배워보세요😊 🐸 Flexbox Froggy로 이동 🐸 Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com ✨ 1~5번 답 공유 더보기 1번 justify-content: flex-end; 2번 justify-content: center; 3번 justify-content: space-around; 4번 justify-content: space-be..

선택자 우선순위 선택자 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다. 적용 순서에 따른 우선 순위 규칙 같거나 서로 다른 선택자 방식으로 동일 요소에게 동일 속성을 뒤쪽에서 다른 값으로 재정의할 수 있다. 서로 나누어진 CSS 코드인 경우 HTML 문서에 적용되는 순서에 따라 뒤쪽에서 동일 요소에게 동일 속성을 재정의 할 수 있다. 선택자의 종류에 따른 우선 순위 규칙 주요 단일 선택자 방식에서 id, class, tag 순의 우선 순위 우선 순위 규칙에 의해 경우에 따라 뒤쪽에서 동일 속성을 재정의 할 수 없다. 결합 관계(복합 선택자 패턴)의 경우에는 결합되는 선택자 방식의 정해진 점수를 합산하여 우선 순위를 정한다. !import..

Checkpoint 1 styled-component를 사용해서 css의 animation 기능을 넣어주고 싶을 때는 어떻게 하면 될까? keyframes css와 동일하게 keyframes를 사용해서 애니메이션을 구현할 수 있고, 컴포넌트 안에 animation : ${animation-name} 형식으로 넣으면 동작한다. Checkpoint 2 Box 컴포넌트 안에 span 태그를 넣으려고 한다. 스타일을 적용하는 모든 태그들을 다 컴포넌트 처리 해줘야 하는걸까? import styled from "styled-components"; const Wrapper = styled.div` display: flex; `; const Box = styled.div` display: flex; justify-c..

Checkpoint 1 만약 컴포넌트의 태그는 input에서 a태그로 바꾸고 싶은데 스타일은 input 컴포넌트의 속성을 그대로 유지하고 싶을 때 어떻게 하면 좋을까? "As" import styled from "styled-components"; const Father = styled.div` display: flex; `; const Btn = styled.button` color: white; background-color: tomato; border: 0; border-radius: 5px; `; function App() { return ( Log in Log in ); } export default App; 처럼 컴포넌트 안에 as="tagname"을 입력해주면 Btn의 스타일은 유지하면서 태..

Checkpoint 1 styled-component를 사용해서 색상이 다른 Box 두개를 만들어보겠다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box1 = styled.div` background-color: teal; width: 100px; height: 100px; `; const Box2 = styled.div` background-color: orange; width: 100px; height: 100px; `; function App() { return ( ); } export default App; 정상적으로 작동하지만, Box1과 Box2에서 background-co..

CSS in JS CSS in JS는 스타일 정의를 CSS 파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 웹페이지를 HTML, CSS, JS 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JS를 몽땅 때려박는 패턴이 많이 사용되고 있다. React는 JSX를 사용해서 이미 JS가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS in JS 라이브러리만 사용하면 CSS도 손쉽게 JS에 삽입할 수 있다. JS에서 컴포넌트에 스타일 적용하는 방법 1. 컴포넌트에 직접 삽입 2. style.css App.js에 import "./style.css"로 stylesheet를 불러오고, 각 컴포넌트마다 처럼 className을 지정..