IT/web35 [css] display block 한줄에 하나 inline 내부 내용의 크기 만큼 부피 차지 (width, height 조절할 수 없음) 마진은 좌우만 설정 가능하다. inline은 line-height로 문자 상하위를 결정하기 때문이다. padding은 잘 적용되지만 top은 예외가 발생한다. line-height까지 적용을 못시켜 안의 내용물이 padding값을 적절하게 설정을 안한것 처럼 보인다 border도 padding과 마찬가지 img는 inline이지만 inline-block으로 취급 padding 예 apple banana cherry .wrapper { border: 1px solid black; text-align: center; padding: 60px; margin: 20px; background-colo.. 2024. 4. 19. [css] img 하단에 생기는 알 수 없는 빈 공간 샘플코드에 대한 결과를 확인하면 img 하단에 살짝 여백이 생기는걸 확인 할 수 있다. .wrapper { border: 1px solid black; } img { width: 200px; height: 200px; } 이유는 img 태그는 magin, border, padding 기본적으로 잡혀져 있지 않지만, 인라인 요소이기에 텍스트와 같이 인라인 요소의 baseline 기준으로 배치되기 때문이다. 영어의 문자 특성 때문에 baseline 아래 decent height이라는 공간이 필요함 apple banana cherry .wrapper { border: 1px solid black; } img { width: 200px; height: 200px; } span { background-color:.. 2024. 4. 19. [css] 여러 div를 몽땅 가로 가운데 정렬 아래의 샘플 코드는 block 요소 div를 6개를 노출한다. 각 요소마다 한줄씩 자리 잡고 있다. 1 2 3 4 5 6 .dot { width: 40px; height: 40px; background-color: orangered; color: white; text-align:center; border: 1px solid gray; line-height: 40px; margin: 0 auto; } pagination처럼 개수와 상관없이 원하는 div만큼 가운데 정렬을 시키고 싶으면, dot class에 display: inline-block으로 설정하고 wrapper를 만들어 해당 클래스에 text-align: center를 추가하면 된다. dot class에 inline-block 속성을 주어 한줄씩.. 2024. 4. 19. [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. 이전 1 2 3 4 5 6 다음
