전체 글120 [NextJS] 반응형 디자인을 해보자!! - Grid편 (ft. tailwind CSS) 서론 여태까지 프로젝트에서 데스크탑 화면만 구성해봤지만, 사실 반응형 디자인은 어렵지 않다.tailwind css나 mui 등을 사용할 때, 반응형 디자인을 쉽게 할 수 있게 지원해주기 때문에 그렇게 어렵진 않다. 이번엔 grid를 사용해서 반응형 디자인을 할건데, tailwind css를 사용해 보자. 계획먼저, tailwind css에서 반응형 디자인은 어떻게 하는지 찾아보자. sm, md, lg 등을 추가하는 것으로 반응형 디자인을 간단하게 설계할 수 있는데, 보통 width 그럼 이제 Grid로 어떻게 할까? 먼저 Grid를 알아보자. 가로를 기준으로 Grid Item들을 배치할 거면, grid-templates-columns 속성을 활용하면 된다.간단하게 classname에 gird-cols-$.. 2025. 2. 17. [NextJS] 컴포넌트 재사용성을 높이자!! (ft. tailwind CSS) 서론 {/* 타이틀 */} 배고프다 14,000원 {/* 정가 */} 20,000원 35% 테일윈드 CSS를 사용하여 작업한 컴포넌트인데, 이 컴포넌트에서 반복이 너무 많고, 최대한 줄일 부분이 보여서 재사용성을 높여보자! 기준 정하기 먼저, 할인된 가격과 정가, 그리고 할인률. 이 세 가지의 기준으로 나눌 수 있으니, 조건부 스타일링으.. 2025. 2. 17. 백준 10282 해킹 C++ 간단한 해설 단순하게 다익스트라를 하면 된다. (c에서 시작해서, b->a로 이어지는데, s초가 더해진다.)그러나 단순하게 2차원 배열로 그래프를 만들면 25%정도에서 메모리 초과가 발생한다.나는 그래서 연결리스트로 풀 수 있지만 꼼수로 다음과 같이 그래프 연결이 필요한 부분만 연결하였다.vector>> graph(n+1,vector>());for(int i=0;i>a>>b>>s; graph[b].push_back({a,s});} 답 #include #include #include #include #define ll long longusing namespace std;int main(){ cin.tie(0); ios_base::sync_with_stdio(0); int t; c.. 2025. 2. 11. 백준 28449 누가 이길까 C++ 간단한 해설 HI팀이 이기는 경우랑 무승부만 세면 자연스럽게 ARC팀이 이기는 경우의 수가 나온다.(전체 경우의 수인 N*M에서 빼면 된다.) 이 때, 전체 경우의 수는 100,000*100,000 이므로 int 자료형의 범위를 넘어가니 long long 형으로 해야한다. HI팀이 이기는 경우의 수는 누적합을 써도 좋지만 나는 간단하게 이분탐색으로 찾았다. upper_bound의 결과값 - lower_bound의 결과값을 하면 간단하게 무승부인 경우의 수를 셀 수 있고,lower_bound의 결과값이 이기는 경우의 수이다. lower_bound는 같거나 큰 값만을 탐색하므로 결과값에서 -1을 해야 하는게 맞지만 Index를 반환하기 때문에(Index가 0부터 시작해서) 따로 처리를 안해주고 결과값 그 .. 2025. 2. 8. 글씨가 짤리는 버그 - HTML 태그 제대로 알고 쓰자 폰트가 짤리는 버그가 발생하였다.후배가 티스토리 블로그의 스킨을 편집하는데 미묘하게 폰트 윗 부분이 짤리는데 원인을 모르겠다고 말해주었다.그래서 개발자 도구와 함께 분석한 결과, 폰트 크기는 13px인데, height가 12.8px인 것이 문제였다. 그런데 더 근본적인 원인은 태그로만 내용물을 작성한 것이 문제이다. MDN에 의하면 태그는 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정할 때 사용한다. 태그뿐만이 아니라 태그도 사실 우리가 무지성 난사하는 태그도 별로 좋지 않다. 태그 또한, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정하는데 사용한다. Title Contents1 Contents2 이를 본질적으로 생각해보자. 태그는 분할한다는 느낌을 가지고 있다. 구역을.. 2025. 1. 20. 백준 1911 흙길 보수하기 C++ 간단한 해설 진짜 간단하다. 이전에 판자를 어디까지 놓았는지 기억하면 된다. 그런데, 사소한 계산에서 실수를 하기 쉬워서 조금 성가셨다. if(lastPanel>=v[i].second) continue; if(lastPanel>=v[i].first) v[i].first=lastPanel+1; if(v[i].second-v[i].first 스위핑으로 인한 조건 분기를 생각하자... 답 #include #include #include #define ll long longusing namespace std;int main(){ cin.tie(0); ios_base::sync_with_stdio(0); ll n,l; cin>>n>>l; vector> v(n); .. 2025. 1. 15. 이전 1 2 3 4 5 ··· 20 다음
