CSS6

• 

  [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] 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.

• 

  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.

• 

  반응형 작업을 위한 폰트 단위 em / rem 사용 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 결론부터 말하자면 html 태그에 10px 로 맞추고, 나머지 모든 Element는 REM을 쓰도록 하쟈 css에서 사용 하는 단위는 여러가지가 있다. 가장 많이 사용하고 있는 px를 비롯해 % / em / rem / vh / vw / vmin / vmax / ex / ch / 등이 있다. 요즘엔 사용하지 않는 것들도 있고 새롭게 떠오르는 단위도 있고..IE버전 지원 문제로 외면 받는 단위도 있다. 여기서도 IE지원 .. HTML&CSS 2021. 1. 8.

• 

  [펌]html/css flex, flexbox 반응형 웹을 위한 css 레이아웃 속성 정리 /* 나의 정리 */ 이 분 글이 가장 잘 실용적으로 설명되어 있는 것 같아서 퍼온다. Flex를 쓰면 Float : left or right, clearfix 같은 짓거리를 안할 수 있다. container 안에 item을 어떻게 정렬할 것인가? 에 대해 반응형 웹에서 구현하기 좋도록 IE10부터 지원하는 코드 형식이다. Flex 덕분에 그만큼 코드가 단순해진다. 코드가 단순해진다는 것은 그만큼 딴 짓을 더 할 여력이 생긴다. -> 더 좋은 UI가 구축될 환경이 구현되었다는 뜻. 가장 많은 쓰는 코드는 아마도.. display : flex or inline flex, justify-content: center; align-items: center; 인 것 같다. 나머지는 그 때 그 때 필요할 때 찾아서.. HTML&CSS 2020. 8. 9.