본문 바로가기

HTML&CSS16

[HTML / CSS] a태그(Link) 내에 있는 text를 세로 중앙 정렬하기 Code // Styling a { display: flex; align-items: center; } span { padding-top: 4px; } // The Part of HTML or React Redner // a 태그 역할. 동일하게 동작한다. {name} a태그에서 가운데 정렬은 모두 끝난다. 그러나 Font 자체의 여백이 있기 때문에 이를 조절하려면, 결국 padding을 주는 수 밖에 없다. Font의 여백에 따라 padding-top or bottom을 주면 된다. Render padding-top Not padding-top 2022. 12. 15.
[HTML / CSS] Styled-component 에서 css reset 방법 1번 방법 - 직접 쓰는 방법 import React from "react"; import ReactDOM from "react-dom/client"; import { createGlobalStyle, ThemeProvider } from "styled-components"; import { theme } from "./theme"; import router from "./router"; import { RouterProvider } from "react-router-dom"; const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&displa.. 2022. 12. 12.
CSS 작업 방식에 대한 고찰 (feat. Styled-Components) 여러 자료들(블로그, 클론코딩)에서 하는 말이 모두 다르다. 그래서 어떤 방식이 더 나은지 잘 모르겠다. CSS module 방식도 있고, tailwind 도 있고, styled component 도 있다. 이 것 말고도 많은데, 주로 사용하는 것은 그래도 이정도니까... 전반적으로 요즘은 styled component VS tailwind 정도로 압축되어가고 있는 것 같다. css in js VS utility-first css 방식의 차이라서, 1. 렌더링 성능을 좀더 우선시 하는 사람이면, tailwind (순수한 css로 봐야 하기 때문에 렌더링 이후에 다시 js로 적용하는 방식에 비해서 속도가 빠르다.) 2. 개발자의 유지보수를 좀 더 우선시 하는 사람이면 Styled component (emo.. 2022. 11. 22.
[성능최적화] 차세대 이미지 적용하기 (webp) 아래와 같이 적용하면 된다. 그러면, source 부분을 먼저 불러오고, 불러오지 못하는 환경(구형 브라우저나 webp를 미지원하는 경우)일 때는 img 태그를 불러오게 된다고 한다. 확실히 성능최적화는...이미지가 가장 크게 효과보는 것 같은 기분이다. 디자이너가 제대로 있어서 webp도 주고, jpg도 압축해서 전달해주면 참 조으련만......팀에 부재해있다. 그래서 이미지를 전달해 주시는 담당자에게, 아래 사이트에서 줄이고 전달해달라고 요청해두었다. jpg -> webp 변환사이트 : https://convertio.co/kr/jpg-webp/ jpg 용량 줄이는 사이트 : https://www.iloveimg.com/ko/compress-image 결과 점수를 10점 올렸다. 신난다. 이미지만 줄.. 2022. 5. 25.
[css] padding, margin 작성 순서 요즘은 css 작업을 주로하지는 않아서, 가장 많이 사용하는 기능 중에 하나인데 작성 순서가 가끔 헷갈려서 기록한다. 작성 순서 원칙은 12시부터 시계방향이다. 중첩할 때는 12시-6시, 3시-9시로 된다. 12시, 3시-9시로 했으면 당연히 그 다음은 6시겠지. 1. margin / padding ? 2. margin / padding의 사용법 0. 방향마다 다를 때는 margin-top: 1rem, padding-bottom : 1rem, 같은 형태로 작성. 1. 다 다를 때 시계방향으로 작성 (margin/padding: 상, 우, 하, 좌) 2. 상하 좌우 같을 때 (margin/padding: [상=하] , [좌=우]) 3. 좌우는 같고 상하가 다를 때 (margin/padding: 상 , [좌.. 2021. 10. 1.
[CSS] CSS 수정 시 캐쉬 충돌 방지 하는 방법 (쿼리 스트링) [펌] 결론 위와 같은 방식으로 css 주소 뒤에 Query String을 붙여준다. ?ver=1.1 일 필요는 없고 아무거나 붙여도 된다. 관용적으로, 이전 버젼과 다음 버젼을 구분하기 어렵기 때문에 ver=1.1 .. 1.2 ..1.3 이렇게 붙이는 것을 권장할 뿐.. after 라고 쓰든.. spring이라고 쓰든...기존 호출문과는 다르게 해서 css를 다시 호출해야 한다고 인식만 하게끔 하면 된다. 퍼온 글 웹사이트를 운영하다보면 웹사이트의 디자인이나 프론트엔드 동작을 바꾸기 위해서 CSS 또는 javascript 파일을 수정하는 일이 종종 생기게 된다. 이때 수정된 파일을 서버로 배포하더라도, 기존 웹사이트를 이용하던 유저의 브라우저 캐쉬때문에 수정된(fresh) 파일을 다운로드 하지 않고 캐쉬를 이.. 2021. 5. 25.

티스토리툴바