또라에몽의 개발 주머니

display 속성이 변하는 경우 1) float 속성 : inline-block으로 변경됨 2) position : inline-block 으로 변경됨 3) 가상 클래스 ::before :: after : inline 으로 변경됨 인라인 요소를 block으로 변경하면 너비는 자동으로 100%로 변경됨 인라인 블락 요소를 block으로 변경해도 너비가 자동으로 바뀌지 않기 때문에 width : 100%를 줘야한다. 여기서 width: 100% 와 width : auto의 차이는 뭘까? 기본 코드가 이렇게 있다고 가정하고 양 옆에 padding-left:40px 씩 주면 width : 100% 를 하면 밖으로 빠져 나온다 display를 inline-block으로 바꾸면 width: auto는 컨텐츠의 크..

IE, Chrome, Firefox, Safari .. 각 브라우저마다 html, body에 기본적으로 들어가있는 margin, padding이 다르다 그래서 초기화를 시켜주고 작업을 시작하는 것이 좋다 크롬의 경우 이런식으로 margin: 8px이 처음부터 잡혀있다 react를 사용하고 있다면 간단히 reset을 할 수 있다! yarn add styled-reset npm i styled-reset import * as React from 'react' import { createGlobalStyle } from 'styled-components' import reset from 'styled-reset' const GlobalStyle = createGlobalStyle` ${reset} /* oth..

block ex) div, p , table h1~h6 등등... 기본 너비 값 : 100% 한줄에 하나씩만 배치됨 너비 값, 높이 가질 수 있음 상하좌우 margin 가능 inline ex) span, a,em, string ... 글자 개별적으로 꾸미는 서식 관련 태그 기본 너비 값 : 컨텐츠 너비 값(text의 글자 넓이 만큼) 한줄에 여러 개 배치 가능 크기 값 가질 수 없음 상하 margin 안되고 좌우만 가능 inline-block ex) img, input, button, textarea , iframe ... 이미지, 대부분 폼 요소 기본 너비 값 : 컨텐츠 너비 값 한줄에 여러개 배치 가능 크기값 가질 수 있음 상하좌우 margin 가질 수 있음 셋다 기본적으로 padding은 가능하다!..

css rem 을 쓰면 언젠간 한번쯤은 만나는 62.5%에 대해 써보려고 한다. 무지성으로 쓰고 있다가 드디어 정리를 하게 되었다. 보통 globalStyles를 보면 font-size : 62.5% 라고 되어있다. 도대체 저게 멀까 보통 css에서 크기를 주기 위해서 주로 쓰는 것들이 px, rem, em, vw, vh 이 친구들이 있다 초기에 잘 모를때는 px로 도배를 하는데 px은 쓰면 안된다고 한다 왜냐하면 웹 접근성을 저해하기 때문이다. 기본 브라우저 글꼴은 16px인데 사용자가 20px 로 설정을 하면 그에 따라 글꼴 크기가 커져야 한다 근데 픽셀로 단위를 설정하면 브라우저를 통한 사용자의 설정값이 적용이 되지 않는다. 한마디로 px는 절대적인 단위 라는 얘기이다 우리는 모니터 크기나, 모바일..