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 HTML&CSS 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.. HTML&CSS 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.. HTML&CSS 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점 올렸다. 신난다. 이미지만 줄.. HTML&CSS 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: 상 , [좌.. HTML&CSS 2021. 10. 1.

• 

  [CSS] CSS 수정 시 캐쉬 충돌 방지 하는 방법 (쿼리 스트링) [펌] 결론 위와 같은 방식으로 css 주소 뒤에 Query String을 붙여준다. ?ver=1.1 일 필요는 없고 아무거나 붙여도 된다. 관용적으로, 이전 버젼과 다음 버젼을 구분하기 어렵기 때문에 ver=1.1 .. 1.2 ..1.3 이렇게 붙이는 것을 권장할 뿐.. after 라고 쓰든.. spring이라고 쓰든...기존 호출문과는 다르게 해서 css를 다시 호출해야 한다고 인식만 하게끔 하면 된다. 퍼온 글 웹사이트를 운영하다보면 웹사이트의 디자인이나 프론트엔드 동작을 바꾸기 위해서 CSS 또는 javascript 파일을 수정하는 일이 종종 생기게 된다. 이때 수정된 파일을 서버로 배포하더라도, 기존 웹사이트를 이용하던 유저의 브라우저 캐쉬때문에 수정된(fresh) 파일을 다운로드 하지 않고 캐쉬를 이.. HTML&CSS 2021. 5. 25.

• 

  [HTML] Form TAG에서 name의 의미 어제 antd를 react 에서 사용하다가 Form 태그에서 자꾸 에러가 났었다. form에 있는 내용을 지우는 것이였는데, 지워지지 않았었다. 원인은 form.item 마다 설정되어 있던 name을 삭제해서였다. form 컴포넌트나 태그를 사용할 때, name을 사용하지 않으면, form의 정보를 핸들링 하는 것이 불가능하다. 바꿔 얘기하면, form을 핸들링할 필요가 없으면, name을 설정하지 않아도 무방하다는 뜻이기도 하다. 어찌보면, 단순하고, 기초적인...그러나 알아차리기 힘든. 습관처럼 작성하는 코드였을 수도 있기 때문에 헤매이다 어제 간신히 발견하게 되었다. console에도 버그가 따로 찍히지 않아서 완전 헤매었지...ㅠㅠ form.resetFields(); 도 먹히지 않았었다..ㅠㅠㅠㅠ.. HTML&CSS 2021. 4. 30.

• 

  [CSS] PostCSS 장점 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com ▪️ CSS 전처리기는 무엇인가? PostCSS 는 CSS 전처리기를 의미한다. 기본적인 css 만으로는 (다른 브라우저와의 호환성을 위해서) 중복적으로 작성해야 하는 경우가 많기 때문에 반복적인 코드 작성을 최소화하고자 등장한 전처리기이다. 또 다른 CSS 전처리기인 Sass, Less 와는 다르며, Sass와 Less는 자체적으로 프레임워크에서 제공하는 문법이 있고 이 문법을 통해서 순수 css로 변환해주는 역할을.. HTML&CSS 2021. 4. 9.

• 

  [css] 구글 웹폰트 -> 로컬 폰트로 적용하는 방법 google-webfonts-helper.herokuapp.com/fonts/noto-sans-kr?subsets=latin HTML&CSS 2021. 1. 25.

• 

  [CSS] 단 하나의 중앙정렬? 원문: Adam Argyle, https://web.dev/centering-in-css/ 여러가지 테스트를 통해 5가지 중앙 정렬 방법 중 어떤 것이 가장 변화에 탄력적으로 대응하는지 확인해보자. CSS로 중앙 정렬하는 것은 농담과 조롱으로 가득찬 악명 높은 도전이다. 2020 CSS는 많이 발전했고 이제 우리는 이 농담을 순수하게 즐길 수 있다. 만약 비디오를 선호한다면 유튜브로 이 글을 볼 수도 있다. https://youtu.be/ncYzTvEMCyE 도전 중앙 정렬에는 사용 사례, 중앙 정렬을 해야 하는 요소의 수 등에 따라 달라지는 다양한 유형이 있다. 어떤 중앙 정렬 방법이 "우승"했는지 근거를 설명하기 위해 필자는 탄력성 고리(Resilience Ringer)를 만들었다. 이는 중앙 정렬 .. HTML&CSS 2021. 1. 19.

• 

  DOM이란 무엇인가? (진행 순서, DOM & DOM Tree 차이) DOM은 문서를 파싱해서 생긴 구조화된 객체 모델을 DOM이라고 한다. HTML or XML 같은 문서를 불러와서 Tree (DOM Tree) 구조로 변환하는 것이 DOM의 역할(기능) 이다. DOM자체가 하는 것은 아니고, 일단은 브라우저의 엔진에 탑재된 Parser가 Tree구조를 만들 때, DOM이 개입한다. 그래서 DOM구조로 변환시키는 것이다. Parser는 HTML의 TEXT String을 구조화하는데서 역할을 다하고, 이를 브라우저에서 조작가능하도록 객체(속성을 제어할 수 있는)로 변환하는 것을 DOM이 담당한다. DOM을 통과하면, DOM Tree가 만들어지고, 이 DOM Tree가 CSS가 Parsing된 문서를 가지고 스타일 규칙을 DOM에 적용해서 형상을 만든다. 이를 렌더링 해서 브.. HTML&CSS 2021. 1. 12.

• 

  Text 하단 고정 Text Element를 하단에 고정 시킬 때 아래와 같이 처리했다. width 100%로 설정하고 text-align 을 먹여야 한다. .footer { position: fixed; top: 95%; width: 100%; text-align: center; font-weight: var(--weight-bold); color: var(--color-white); } 너무 기초적인 것인데 실수할 때가 있다. 정확히 익혀두자. HTML&CSS 2021. 1. 11.