본문 바로가기

IT223

[css] 가로 가운데 정렬 개발자 콘솔에서 parent margin 영역을 확인해보면, 마진영역이 브라우저 꽉차게 나오는데 이 의미는 auto값으로 설정할 수 있는 마진의 최대값을 의미한다. parent가 블럭요소이기 때문에 한줄을 다 빌렸다. 밑의 영역은 parent가 빌린 영역이 아니다. 마진을 auto값을 주면 빌린 영역을 사용 할 수 있다. margin-left: auto로 설정하면, margin 최대값을 사용하기 때문에 컨텐츠가 오른쪽으로 정렬된다. 그래서 양쪽 모두 margin-left, right auto로 주면 가운데로 정렬됨 margin-top, bottom auto로 주면 상하까지 가운데로 정렬될거라 예상할 수 있지만 위에 언급했듯이 빌린영역이 없기 때문에 적용될 수 없다. wow .parents { width:.. 2024. 4. 19.
[css] height: 100% 의미 아무것도 보이지 않는다. 그 이유는 div 안에 아무것도 없으면 배경을 깔 공간 자체가 없었기 때문 .cover { background-image: url(..) } hello world 문자 크기 만큼 배경이 보인다. width는 지정이 안되어 있으므로 auto 값이 기본으로 되어있음 (height도 마찬가지) hello world .cover { background-image: url(..) } width: auto 요소의 부모 크기 기준으로 가득찬다. body의 width 만큼 cover width가 결정됨. 그래서 한줄 전체가 보임 height: auto 요소의 자식 기준으로 자동 조절된다. 꽉 차는걸 보고싶다고 height: 100% 을 설정해본다면, 안된다. wow .cover { backgr.. 2024. 4. 19.
[webpack] externals 개념 및 사용 이유 webpack 설정에서 externals 속성을 사용하여 node_modules 폴더에 있는 패키지들을 번들링에서 제외하는 것은 일반적인 상황입니다. 여기에는 몇 가지 이유가 있습니다: 라이브러리의 외부 의존성 유지: 많은 라이브러리들은 프로젝트에서 직접적으로 번들링되지 않고, 대신에 node_modules 폴더에 설치됩니다. 이러한 라이브러리들을 번들링에 포함시키면 번들 크기가 매우 커지고, 의존성 관리가 어려워집니다. 따라서 externals 설정을 사용하여 라이브러리를 번들링에서 제외시킴으로써 번들 크기를 최소화할 수 있습니다. 서버 사이드 렌더링(SSR)과 호환성: 서버 사이드 렌더링을 구현하는 경우, 서버에서 사용되는 라이브러리들이 클라이언트와 달라질 수 있습니다. 서버에서는 보통 node_mo.. 2024. 4. 13.
[web] zero-runtime 이란? 개념 CSS 프레임워크나 라이브러리가 브라우저에서 실행되는 동안 전혀 추가적인 JavaScript 코드를 필요로 하지 않음을 나타냅니다. 즉, 프레임워크가 브라우저에서 실행될 때 추가적인 JavaScript 코드를 생성하거나 실행하지 않는 것을 의미합니다. 일부 CSS 프레임워크는 스타일을 적용하고 관리하기 위해 JavaScript를 사용합니다. 예를 들어, 특정 CSS 클래스를 토글하거나 동적으로 스타일을 변경하는 등의 작업을 수행하기 위해 JavaScript 코드를 사용할 수 있습니다. 이러한 프레임워크는 브라우저에서 실행될 때 JavaScript 코드를 실행하여 스타일을 조작합니다. 반면에 "zero runtime" CSS 프레임워크는 브라우저에서 실행되는 동안에도 추가적인 JavaScript 코드.. 2024. 4. 13.
[web] thumbnail의 width 값 비율에 따라 height 크기 조절하기 정공법은 아니지만, 많은 개발자들이 사용하는 방법을 소개하고자 한다. 반응형이 100% 지원되진 않지만 레이아웃이 변경이 되면 일부 컨텐츠들은 반응형처럼 작동되는게 보기 좋다. 핵심은 코드는 아래와 같다 눈여겨 볼 속성은 height와 padding-bottom 이다. height를 0으로 설정함으로써 기본 보여주는 속성을 완전히 지우고, padding-bottom 속성을 주면서 width 기준으로 간접적으로 height를 1.6배 증가하라고 설정한다. padding을 %로 설정하면 width값에 비례한다고 한다. https://developer.mozilla.org/en-US/docs/Web/CSS/padding Percentages: refer to the width of the containing .. 2024. 4. 13.
[react] CRA 대신 webpack으로 react 프로젝트 구성하기 들어가기 전 코드만 보고 싶다면, 아래의 링크를 확인해보세요 https://github.com/insidedw/minified-cra GitHub - insidedw/minified-cra Contribute to insidedw/minified-cra development by creating an account on GitHub. github.com 프로젝트 구성 npm init -y package.json에 의존성 설치 리엑트 설치 리엑트는 runtime에서 읽혀야 하니 dependencies에 추가합니다. npm install react react-dom webpack 설치 npm install -D webpack webpack-cli webpack-dev-server html-webpack-pl.. 2024. 4. 3.

티스토리툴바