본문 바로가기

Web62

[CSS] SCSS_기본 사용법 [선택자] div { color:black; .foo { // 자손(descendant) 선택자 color: black; } > .foo { // 자식(child) combinator color: black; } + .foo { // 인접형제(adjacent sibling) 선택자 color: #000; } ~ .foo { // 일반형제(general sibling) 선택자 color: yellow; } & .foo { // Sass 부모(Parent) 참조 선택자 color: #fff; } .foo & { // Sass 부모(Parent) 참조 선택자 color: red; } &.bar { color: green; } } [import] @import 'common.css'; @import 'commo.. 2020. 6. 11.
[CSS] Reset 자주 사용하는 CSS 리셋 코드 커스텀 영역은 입맛대로 변경하자. (body의 font-family 라던가..) @charset 'UTF-8'; /* basic reset */ 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,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside.. 2020. 6. 11.
[React] Styled-Components 스타일 컴포넌트 ※ 버전에 따라 사용법이 조금 다르다보니 공식문서를 참고하는 편이 가장 좋다. 공식문서 : https://styled-components.com/docs 스타일 컴포넌트 렌더 import styled, { css } from 'styled-components'; 1. 기본 사용 const Container = styled.div` background: #ffeaa7; `; function Test() { return ( ); } 2. SASS(SCSS)의 중첩 사용과 props 사용 function Test() { return ( green pink ); } const Button = styled.button` width: 100px; height: 50px; border-radius: .. 2020. 6. 11.
[React] Hook, State 클래스 컴포넌트와 함수 컴포넌트 리액트 컴포넌트 에서 props 데이터만 다룬다면 함수형 컴포넌트를 사용 할 수 있다. Hook 도입 이전(react v16.8미만) 에는 컴포넌트에서 state, 생명주기(life cycle)를 다루려면 반드시 클래스 문법을 사용 해야했다. 함수 컴포넌트(function component) function Test() { return ( test ); } //또는 const Test = () => { return ( test ); } 클래스 컴포넌트(class component) class Test extends Component { render() { return ( test ); } } 개념적으로 React 컴포넌트는 함수형에 더 가깝다고 한다. 친절한 리액트 개발진.. 2020. 6. 11.
[React] JSX, Props JSX / 컴포넌트 컴포넌트는 html을 반환하는 함수. xml이나 html생겼지만 javascript 다. jsx는 리액트 컴포넌트다. 대문자로 시작한다. 커스텀 컴포넌트 생성 프로젝트 폴더 프로젝트명/src/컴포넌트파일명.js 로 컴포넌트 파일 생성한다. 컴포넌트명 첫글자는 대문자로 작성하자. 예) 프로젝트폴더/src/First.js 생성 First.js import React from 'react'; // 컴포넌트 생성시 무조건 써주자 function First() { // 컴포넌트 명 앞은 대문자 return ( // 반환 될 html을 작성 First text ); } export default First //export 해주어야 jsx가 인식한다. 생성한 컴포넌트는 index.js 에서 렌더해.. 2020. 6. 11.
[javascript]이벤트 위임(event delegation) JS 이벤트 위임 left right 위와 같은 DOM구조에서 각 버튼 클릭시 이벤트가 발생하길 원할 때 const btns = document.querySelectorAll(&#39;.btn&#39;); function btnClick(){ console.log(this); } for(let i = 0; i < btns.length; i++){ btns[i].addEventListener("click", btnClick); } //for문이 싫다면 btns[0].addEventListener("click", btnClick); btns[1].addEventListener("click", btnClick); ... 위 코드처럼 각 버튼에 이벤트리스너를 달아주면 된다. 하지만 위 처럼 버튼이 조금밖에 없는.. 2020. 6. 11.

티스토리툴바