CSS

[React] Vite 프로젝트 기본 마진(Margin) 8px 없애기

2024.02.02

Vite로 프로젝트 생성 후 height: 100vh를 적용했지만 전체 margin이 8px 적용되어 있는 것을 알게 되었다. vite로 초기 프로젝트를 생성하면 기본적으로 margin이 8px 생긴다고 한다. margin을 없애보자. CSS 파일 만들기 이를 없애려면 index.css 파일에 코드를 추가해야한다. #root{ // 기존에 쓰인 코드 } body{ margin: 0, } index.html 파일에 style 설정하기 index.html 안에 참고 https://velog.io/@hyorish03/Vite-VITE%EC%9D%98-%EA%B8%B0%EB%B3%B8-margin-%EC%97%86%EC%95%A0%EA%B8%B0 https://snowdeer.github.io/vuejs/202..

HTML & CSS

[CSS] Text-Overflow로 텍스트 생략 기호로 표시

2023.07.23

텍스트 ...으로 표시하기 텍스트가 너무 길 경우 ...으로 생략 하려고 했다. text-overflow : ellipsis 속성을 적용했지만 반응이 없어 조금 더 조사했다. text-overflow ellipsis 안먹힘 해결 방법 다음과 같은 조건으로 CSS가 작성되었는지 점검한다. 텍스트를 감싸고 있는 부모 요소는 블록 엘리먼트 요소(div, table, ul, ol, header, footer..)이다. 따라서 width값을 설정할 수 있고 이에 따라 text-overflow가 발생할 수 있다. white-space: nowrap - 문자 간 공백은 축소되고 개행(줄 바꿈)은 방지된다. overflow: hidden - 위 속성의 영향으로 문자의 개행이 방지되었기 때문에 텍스트가 한 줄로 길게 늘..

[React] Vite 프로젝트 기본 마진(Margin) 8px 없애기

[CSS] Text-Overflow로 텍스트 생략 기호로 표시

티스토리툴바