C-log

이번 포스팅에서는 react-router-dom을 사용해서 우리가 만들어 놓은 컴포넌트들을 페이지간 이동이 가능하게 만들 것이다. 우선 react-router-dom을 설치하면 된다. 코드는 아래와 같다. import { BrowserRouter, Routes, Route } from "react-router-dom" import Home from "./routes/Home"; import Detail from "./routes/Detail"; export default function SubApp() { return ( ) } 강의에서는 switch문을 사용할 것이다. switch문은 react ver5까지 지원을 해주고 이후 ver6부터는 Routes를 사용해야한다. Route에 컴포넌트를 열결하는 ..

*해당 포스팅은 CSS Diner 게임을 통해 다양한 선택자들을 연습하는 게임이다. 강의에서도 해당 게임을 해설해주니 한번 풀어보길 권장한다. 13번 문제가 잘 풀리지 않았는다. 코드는 아래와 같다. 문제는 과 을 삭제 해야한다. 문제는 '+'를 사용해서 형제관계(Sibling)를 선택하는 것인데 이것은 인접한 선택자를 선택해서 문제를 해결하면되는 것이다. 즉, 우리가 선택해야하는 선택자들은 모드 plate를 사이에 두고 있다. 따라서 plate+apple이라고 작성하면 해당 apple들이 모두 사라진다.

*해당 포스팅은 CSS Diner 게임을 통해 다양한 선택자들을 연습하는 게임이다. 강의에서도 해당 게임을 해설해주니 한번 풀어보길 권장한다. 7번 문제가 잘 풀리지 않았는다. 코드는 아래와 같다. 해당 코드에서 bento 태그 안에 있는 orange를 선택해야 한다. 그러기 위해서 class table인 div로 진입하고 bento태그로 진입 후 class small인 orange에 진입을 해야한다. 자세히 보면 class small을 가지고 있는 것은 orange뿐만 아니라 apple도 가지고 있다. 그래서 모든 orange를 선택하고 그 중 .small을 지적해주면 된다. 즉, oragne.small 이렇게 말이다.

이번 포스팅에서는 font-size의 기본적인 단위 px과 em/rem을 알아볼 것이다. px와 em/rem은 절대적이냐 상대적이냐 로 나뉜다. px은 화면에 표시되는 가장 작은 단위이며 상대적인 크기를 가지고 있어 웹 브라우저가 확대가 되어도 크기가 고정된다. 따라서 화면의 크기 변동에 영향을 받지 않기 위해선 px를 사용한다. em은 부모 요소의 글꼴 크기에 따라 상대적으로 크기가 조절되는 것이다. 즉, 부모 자식관계에서 상호적이라는 것을 알 수 있다.예로 들면 부모의 요소의 글꼴 크기가 16px이고 자식 요소에 2em이 되적용이 된다면 자식 요소의 크기는 32px가되는 것이다. rem은 글꼴 크기 기준으로 상대적인 크기를 나타낸다. em과 달리 상속된 부모에게 영향을 받지 않으며 항상 루트의 요소의..

이번 시간에는 가상클래스 선택자(pseudo class selector)를 포스팅 해볼 것이다. 가상 클래스 선잭자는 특정 상태나 특징을 가진 요소를 선택하기 위해 사용되는 CSS 선택자이다. 이러한 클래스는 요소의 상태나 특징에 따라 동적으로 스타일을 적용하는 데 사용된다. 가상 클래스 선택자는 콜론(:)으로 시작하며, 해당 요소의 상태나 특징을 정의하는데 사용된다. 대표적인 예시로는 hover와 같은 것들이 있다. 우선 html태그를 살펴보면 아래와 같다. DOCTYPE html> Document 방문함 방문안함 이것들을 먼저 클릭 했을 때 반응을하는 강상클래스는 아래와 같다. a:active { color: green; } 그리고 우리가 가장 많이 사용되는 hover기능은 아래와 같다. a:hove..

이번 포스팅에선 html의 부모 자식 선택자를 css로 선택하는 방법을 배워 볼 것이다. 여러 방법들이 있고 어떻게 어떤 태그에 접근하냐에 따라 선태자를 선택하는 방식이 달라진다. 우선 html 코드는 아래와 같다. DOCTYPE html> Document HTML CSS JavaScript HTML CSS selector declaration JavaScript 우선 우리는 ul태그의 글자들을 모두 빨간색으로 선택하고 싶다. 그렇다면 stye.css에 아래와 같이 코드를 작성하면 된다. ul li { color: red; } 이렇게 하면 ul의 li코드들이 모두 붉은 색이 될 것이다. 이번엔 ol태그의 li들과 구별 짓기위해서 파란색으로 ol태그에 영역을 구분 짓는 선을 만들고 싶다면 아래와 같이 하면..

CSS: Cascading Style Sheets | MDN Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌 developer.mozilla.org

구간 합은 합 배열을 이용하여 시간 복잡도를 더 줄이기 위해 사용하는 특수한 목적의 알고리즘이다. 구간 합의 핵심 합 배열은 기존의 배열을 전처리(가공)한 배열이라 생각하면 된다. ex) [1, 2, 3, 4, 5] - (합 배열) -> [1, 3, 6, 10, 15] ex) [1, 2, 3, 4, 5] - (구간의 합/2~4까지) -> 3+4+5 = 12 시간 복잡도는 O(N)이다. 합 배열과 구간 합 공식을 전재적소에 활용하면 코딩 테스트에서 시간 복잡도를 줄이는 데 많은 도움이 될 것이다. 꼭 원리를 이해해야한다. * 누적의 합 구간의 합관련 문제들을 실버 3~1정도이다. 따라서 누적의 합 예시를 봐야 조금 더 이해가 될 것이다. O(N)인 누적의 합을 하기 이전에 아래는 O(N^2)의 시간 복잡도..