💻Front-end 🎨UI, UX 📒Log

*설치 : yarn add styled-components, yarn add styled-reset(초기설정) 세팅 styles 폴더 내부에 GlobalStyle.js, GlobalFonts.js, theme.js(반응형) 파일 생성 GlobalStyle import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kb..

*세팅 : Live Sass compile 설치 SASS (Syntactically Awesome Style Sheets) CSS내 반복되는 내용은 줄이고 작업할 때, 유지보수 할때 효율적으로 스타일시트를 관리하기 위한 시트 변수 문법 : 자주 쓰지만 기억하기 어려운 값들을 저장해서 쓰기위한 문법 $서브색상 : #333333; .text { color: $메인색상 } Nesting : 중괄호 안에 또 셀렉터를 쓰는 문법 .navbar { ul { width : 100%; } .navbar { :hover { color : blue; } } .navbar { &:hover { color : blue; } } @extend : 이미 존재하는 속성들을 복붙하지 않고 사용 .btn { font-size : 16..

@keyframes 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬때 쓰는 쿼리 우리가 정한 이름 스테이지 : 0%-100%, from(0&와 같음) 그리고 to(100%와 같음) CSS 스타일 : 각 구간에 적용시킬 스타일 페이지 넘어갈 때, 서서히 페이지 보이게 하기 .container { //css -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ animation: fadein 2s; } @keyframes fadein { //keyframes 쿼리 from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyfr..

.box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ 타이포디자인 할때, width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ 중요 width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */ 중요 } // 실제 접속시 스마트폰 기기의 실제 가로폭을 보고 렌더링 해주는 메타 태그 @media screen and (max-width : 1200px) { //태블릿 1200px 이하일 경우 class 적용 .box { font-size : 40px; } } @media screen and..

OG 메타테그 Favicon - link 아이콘

dispaly : flex ? : 가로 정렬로 배치 * 추가 요소 .flex-container { display : flex; / 부모한테 적용 justify-content : center; /* 좌우정렬 */ center 중앙, start 좌측, end 우측 align-items : center; /* 상하정렬 */ flex-direction : column; /* 세로정렬 */ flex-wrap : wrap; /* 폭이 넘치는 요소 wrap 처리 */ } .box { flex-grow : 2; /* 폭이 상대적으로 몇배인지 결정 */ 박스 비율 nav-bar 만들때 사용 ! }

nesting 부모 루틴 안에서 자식 루틴을 넣어서 짜는 것이라고 보면 된다. const MyStyle = styled.div` width: 50vw; height: 150px; background-color: ${(props) => (props.bg_color? "red" : "blue")}; p { color: red; } `; p 태그라는 자식요소를 추가 시켜서 nesting 시켜줬다. & : 부모 참조자 선택 (div) &:hover { background-color: yellow; }