매일 공부한거 기록하기

max-width와 min-width를 되던데로 쓰던 날들.. 이번엔 정리해보도록 하자 1. min-width : 최소 width값 설정, 최소 width이상일때 적용되는 코드이다. 스마트폰같은 작은 사이즈에 사용 점차 확장시킨다. 2. max-width : 최대 width값 설정, 최대 width이하일때 적용되는 코드이다. 데스크탑용 큰 화면 사이즈에 사용 점차 축소시킨다. 출처: https://studiomeal.com/archives/1004 반응형 웹, min-width와 max-width 중 어떤 것을 사용하는게 좋을까 글을 시작하기 전에..이 질문에 대한 답은 정답이 없으며, 작업자 개개인마다 선호하는 방식이 다를 수 있습니다. 이 글 역시 제 생각을 쓴 것이니 참고 삼아 봐주세요~ 반응형 웹..

npm install --save @popperjs/core 요걸 설치해 주면 된다!

지금까지 css, styled-components만 계~속 썼었다. 우연히 공부해볼 기회가 생겨서 Tailwind에 대해서 우선 간단하게만 알아보기로 한다. 사실 예전에 한번 봤을때 클래스 이름이 너무 길어서 깔끔하지 못하다는 인상을 받았었는데.. 이참에 장점을 알아봐야지~~~ 공식 홈페이지 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 장점 1. Utility-First를 지향하는 CSS프레임워크이다. 2. 안쓰는 스타일은 빌드시 제거해준다. 3. 결과물이 ..

공식주소 https://ant.design/ Ant Design - The world's second most popular React UI framework Ant Design 5.0 Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance. ant.design 설치 npm i antd 간단한 사용 import { Button } from "antd"; TEST DEFAULT TEST PRIMARY antd에서 Button을 import해주고 공식문서를 보고..

1. CSS전처리기란 ? Pre-Processor CSS가 복잡해짐에 따라 CSS코드를 마치 프로그래밍 개념을 사용해 특별한 syntax를 가지고 CSS를 생성하게 하는 프로그램. 2. CSS전처리기 종류 Sass (Scss) -> 문법이 조금 다르다 Less Stylus 3. Sass 작성방법 중첩 .header { width: 100%; .menu{ font-size: 10px } .login_btn{ color: blue; &.active{ color: red; } } } 변수설정 : $사용 $main-red-color: #eb4034; .warning{ font-color: $main-red-color } 등이 있다. 4. LESS CSS에 Script처럼 기능을 덧붙임, CSS의 기존 문법을 그..

영어에서 한국어로 처리 하려고 했을때 한국어가 세로로 나오는 문제가 생겼다. 이럴때는 white-space:nowrap; 요걸 추가해주면 된다! 휴 속 시원~~~

div에 text를 넣었을때 지정한 width를 넘어갈때가 있다! width를 직접 지정해줘서 인데 요거 둘중에 하나 골라 잡아서 써보셈~~~~ word는 단어단위로 잘라준당! word-break: break-all; word-break: break-word; 요걸 추가해주면 된다! 이건 왜 맨날 까먹음ㅎ? 문제 있을시 .. 살살 지적부탁 출처 https://developer.mozilla.org/ko/docs/Web/CSS/word-break word-break - CSS: Cascading Style Sheets | MDN CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. developer.mozilla.org

반응형화면을 만들때 가장 먼저 어려움을 겪는 구간아닐까? width를 %를 잡고 img를 올렸을때 width별로 img위치가 어그러지는 경험ㅠㅠ 이럴땐 calc를 쓰면 좋다! https://developer.mozilla.org/ko/docs/Web/CSS/calc calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org

styled-component에서 이미지를 항상 background-image:url();로 쓰고 있던중.. 갑자기 styled.img로 써볼까? 하는 생각이 들어서 검색해봤다! 다양한 방법이 있군.. ~이미지를 사용하는 방법을 알아보자~ 1. image를 import해서 url (${image});로 쓰는 방법 import smileLogo from "images/main/smileLogo.png"; const SmileLogo = styled.div` background-image: url(${smileLogo}); `; 여기서 height와 width를 조절하려면? 2. styled.img.attrs를 사용한다. import smileLogo from "images/main/Yummy.png"; ..