뭐라도 기억하기 위한 블로그

반응형 디자인, 접근성, 유지보수 때문에 px보다는 rem을 많이 쓰는 추세다.rem은 루트 폰트 크기를 기준으로 하기 때문에 수정이 필요할때는 일괄적으로 조절을 할 수 있다. css단위 px, em, rem이란?⬆️ ⬆️ ⬆️ 이건 예전에 내가 정리했던 css 관련 게시글. 작업을 할때는 보통 1rem = 16px로 작업을 한다. 그렇지만 작업자가 매번 rem을 계산하기에는 매우 귀찮기 때문에px ➡️ rem으로 변환해주는 mixin 함수를 미리 만들어놓으면 작업할 때 매우 편하다!! // 변환함수@function rem($px) { @return ($px / 16) * 1rem;} //사용 예시.text { font-size: rem(24); // 1.5rem 반환 margin-bott..

정말이지 티스토리에 리액트 파일, 폴더 정리하는 것만 몇 번 썼을지 모르겠다.물론 지금 다 비공개 상태지만 ㅎㅎ이번 기회에 확실하게 공부하지 뭐,,,ㅎㅎ .├── README.md├── node_modules├── package-lock.json├── package.json├── public│   ├── index.html│   └── (기타 등등...)└── src    ├── App.tsx    ├── assets    ├── components    ├── index.tsx    ├── pages    └── styles리액트 프로젝트를 생성하면 자동으로 위와 같은 폴더 및 파일 구조가 생성된다.(임의로 생략한 파일 및 폴더도 있다.) 📍 폴더에 대한 간단 설명☑️ node_modules패키지 코..

npx create-react-app test00 --template typescripttest00 이라는 프로젝트 폴더를 만든 명령어참고로 나는 자바스크립트가 아닌 타입스크립트로 프로젝트를 만들었다.만약 타입스크립트가 아니라 자바스크립트 프로젝트를 만들거라면 뒤에 (--template typescript)는 생략하면 됨. 하지만 해당 명령어를 터미널에 실행하면, 위의 이미지와 같은 에러가 쭉 뜬다.해당 에러에 대해서 열심히 구글링해보니 12월에 리액트 19버전이 릴리즈 된 이후로 create-react-app이 제대로 실행되지 않는다는 글을 보았다. ➡️ 그래도 test00폴더로 진입(cd test00)해서 npm start를 하면 프로젝트가 실행이 되긴 한다. 😡하지만...이렇게 컴파..

페이지가 로딩 될 때, 이미지 영역은 뒤늦게 로딩 되면서 덜컹- 하는 느낌이 들때가 있다.(실제로 프로젝트할 때 해당 결함이 많았다.)  ⭐해당 문제를 해결하기 위한 방법 정리! 1. 이미지를 감싸는 컨테이너에 크기를 지정 - 실제로 내가 제일 많이 사용했던 방법 중 하나    2. 또는 이미지 컨테이너에 최소 높이값을 지정 위 처럼 마크업 자체에 사용해도 되고, CSS에 적용해도 됨.  3. loading="lazy" 속성을 사용- 이미지의 지연 로딩(lazy loading)을 구현하는 HTML 속성- 이미지가 뷰포트(화면에 보이는 영역)에 들어올 때까지 이미지 로딩 지연- 페이지 초기 로딩 시 이미지 요청을 줄여 로딩 속도를 향상- 사용자가 스크롤하여 이미지가 뷰포트에 가까워지면 이미지를 로드- 불필..

회사에서 마크업 작업을 하다가 아래와 같이 a태그 안에 이미지 태그를 넣으니 이미지 사이사이 여백이 생기는 현상이 생겼다.해당 작업을 하면서 새롭게 알게 된 사실을 정리해본다!    ✅ 여백이 생기는 이유1. 인라인 요소의 특성 태그는 기본적으로 인라인 요소.인라인 요소는 텍스트와 같은 방식으로 취급되어 베이스라인(baseline)을 기준으로 정렬된다. 2. 베이스라인과 여백 인라인 요소는 베이스라인 위에 배치되며, 베이스라인 아래에는 소문자 g, p, y 등을 위한 여분의 공간이 존재한다.이미지는 이 공간을 사용하지 않지만, 여전히 그 공간이 남아있어 여백으로 보이게 된다.  3. HTML 코드의 공백 여러 이미지를 나란히 배치할 때, HTML 코드에서 태그 사이의 줄바꿈이나 공백이 브라우..