Per ardua ad astra.

모든 웹 브라우저에서 공통된 HTML 요소 스타일이 보여지도록 설정하는 방법 (normalize.css)들어가며모든 웹 브라우저에서 공통된 HTML 요소 스타일이 보여지도록 설정하는 방법에 대해 정리해본다. 방법normalize.css 사용하기normalize.css@normalize.css@는 다양한 브라우저에서 HTML 요소의 스타일을 일관되게 보이도록 만들어주는 CSS 파일이다.웹 브라우저마다 기본 스타일이 다르게 적용되기 때문에, 웹 페이지가 각각 다른 브라우저에서 다르게 보일 수 있다.이러한 불일치를 해결하기 위해 @normalize.css@는 각 브라우저의 기본 스타일을 초기화하거나 표준화하여, 웹 페이지가 어디서든 일관되게 보이도록 해준다.@normalize.css@는 모든 기본 스타일을 제..

미디어 쿼리(Media Query) 장치 화면 너비 브레이크포인트 정리들어가며CSS의 미디어 쿼리(Media Query)를 이용하여 반응형 디자인(Responsive Design)을 만들 수 있다.이때 사용할 수 있는 장치(Device)의 화면 너비 브레이크포인트(Breakpoint)에 대해 정리해본다. 장치 화면 너비 브레이크포인트Portrait 모드는 세로 화면, Landscape 모드는 가로 화면을 의미한다.장치브레이크포인트비고모바일320pxPortrait 모드예) iPhone 5, iPhone SE480pxLandscape 모드태블릿768pxPortrait 모드예) iPad태블릿 / 컴퓨터1024pxLandscape 모드컴퓨터1200px 이상Desktop, Laptop예제 코드/* 모바일 Port..

외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법들어가며@antd@ 등 외부 컴포넌트 라이브러리의 UI 컴포넌트를 Styled-Components를 이용하여 직접 수정하는 방법을 정리해본다. 방법스타일 파일(@컴포넌트명.style.js@)이나 컴포넌트 파일(@컴포넌트명.js/jsx/tsx@)에서 다음과 같이 코드를 작성하고 변경/추가하고자 하는 스타일을 넣어주면 된다.import styled from "styled-components";import { 외부컴포넌트명 } from "외부_컴포넌트_라이브러리_패키지";export const 커스텀외부컴포넌트명 = styled(외부컴포넌트명)` 속성: 값;`; 그리고 다른 일반적인 Styled-Components 요소처럼 사용하면 된다.i..

일반 CSS와 CSS Module 비교들어가며리액트(React.js)에서 CSS Module과 일반 CSS의 차이점에 대해 정리해본다.두 방식의 큰 차이점은 CSS 클래스의 범위(Scope)와 이름 충돌 방지이다 일반 CSS 방식일반적으로 사용되는 CSS는 전역적으로 동작한다.스타일 시트에서 정의된 클래스 이름이 프로젝트의 모든 컴포넌트에 영향을 미칠 수 있다.모든 컴포넌트는 같은 CSS 파일을 참조할 수 있고, 클래스 이름이 겹치면 스타일이 덮어씌워질 가능성이 있다. HomePage.css.button { background-color: blue; color: white;} HomePage.jsximport './HomePage.css';const HomePage = () => { return (..

자주 사용되는 테일윈드 CSS 클래스 정리들어가며테일윈드(Tailwind) CSS에서 자주 사용되는  클래스들을 정리해본다. 자주 사용되는 클래스들레이아웃(Layout)container: 반응형 컨테이너를 설정mx-auto: 수평 중앙 정렬flex: Flexbox 컨테이너 생성grid: 그리드 레이아웃 설정space-x-*: 자식 요소 간의 가로 간격 설정 (수평)space-y-*: 자식 요소 간의 세로 간격 설정 (수직) 정렬(Alignment)text-center: 텍스트를 중앙 정렬items-center: Flexbox 또는 Grid에서 요소를 수직 중앙 정렬justify-center: Flexbox 또는 Grid에서 요소를 수평 중앙 정렬 간격(Spacing)p-*: 전체 패딩 적용px-*: 좌우..

Tailwind CSS들어가며테일윈드(Tailwind) CSS에 대해 정리해본다. Tailwind CSS개념유틸리티 우선 CSS 프레임워크미리 정의된 CSS 클래스를 사용하여 빠르게 사용자 인터페이스를 구축할 수 있도록 도와준다.전통적인 CSS 프레임워크와 달리, 구성 요소를 만들기 위한 완성된 스타일이 아니라, 각 스타일 속성에 대한 클래스(유틸리티 클래스)를 제공한다.개발자는 자신의 디자인에 맞게 클래스를 조합하여 원하는 스타일을 쉽게 적용할 수 있다. 특징 다양한 스타일 속성을 제어할 수 있는 클래스를 제공한다.예) @bg-blue-500@ : 배경색을 파란색으로 설정CSS의 재사용성과 모듈화를 강조한다.클래스 이름이 의미를 가지므로, 다른 프로젝트에서도 쉽게 이해하고 사용할 수 있다.반응형 디자인..

whitespace-pre-wrap 클래스들어가며테일윈드(Tailwind) CSS의 @whitespace-pre-wrap@ 클래스에 대해 알아보자.  @whitespace-pre-wrap@Tailwind CSS에서 사용하는 유틸리티 클래스 중 하나로, HTML 요소 내의 텍스트를 처리하는 방법을 지정한다.이 클래스를 사용하면 텍스트를 다음과 같이 처리할 수 있다. 공백 유지텍스트 내의 연속된 공백을 유지한다.여러 개의 공백이 있어도 하나로 축약되지 않는다. 강제 줄바꿈텍스트 내의 줄바꿈 문자를 유지한다.텍스트에 포함된 줄바꿈(@\n@)은 실제로 줄바꿈이 된다. 자동 줄바꿈텍스트가 요소의 너비를 초과하면 자동으로 줄이 바뀐다.이 클래스는 @white-space: pre-wrap;@ CSS 속성과 동일한 효..

CSS positon 속성 (static, relative, absolute, fixed, sticky)들어가며CSS의 @position@ 속성에 대하여 정리해본다. @position@ 속성용도문서 상에 요소(Element)를 배치하는 방법을 지정한다.@top@, @right@, @bottom@, @left@ 속성이 요소를 배치할 최종 위치를 결정한다. 속성값 @static@요소를 일반적인 문서 흐름에 따라 배치한다.이 속성값을 사용하면 @top@, @right@, @bottom@, @left@, @z-index@ 속성을 사용할 수 없다.기본값이며, 따로 지정하지 않아도 된다. @relative@일반적인 문서 흐름에 따라 배치되지만, @top@, @right@, @bottom@, @left@ 속성을 사용..

주피터 노트북에서 셀 강조 효과 나타내는 방법 여러 요소를 사용하여 주피터 노트북에서 셀 강조 효과를 나타낼 수 있다. 방법 경고(alert) 메시지 This is a warning message. 성공(success) 메시지 This is a success message. 에러(error) 메시지 This is an error message. 정보(info) 메시지 This is an information message. 이러한 스타일 클래스(alert-warning, alert-success, alert-danger, alert-info 등)를 사용하여 메시지의 색상과 스타일을 변경할 수 있다. 이러한 스타일은 주로 부트스트랩과 같은 CSS 프레임워크에서 제공되며, 웹 페이지 디자인에 사용된다. 페이..