Styled-Component 1. React Project 설정 1. 관련 패키지 설치 2. 웹팩 환경설정 webpack.config.js 설정 css-loader 설정 styled-components 이슈 해결 (process.ENV) [webpack.config.js] +) 간편 핫로딩을 위한 package.json 설정 3. 리액트 & 스타일드 컴포넌트 설치 4. 기본 디렉토리 & 파일 생성 위 트리구조를 따라 파일을 생성합니다 [index.html] [./src/app.jsx] [./src/index.jsx] 5. 웹팩 번들링 & 서버 실행 npx webpack npx webpack server

1. useRef() 사용법 리액트에서 html 요소를 선택하고 싶을 때는 document객체의 querySelector나 getElement 선택자를 사용하는 것을 지양합니다 (컴포넌트가 HTML로 렌더링 되기 전에는 DOM 요소에 접근이 불가능하기 때문에) 대신 리액트는 자바스크립트 선택자를 대체하는 기능으로 useRef()라는 함수를 제공하고 있습니다 먼저 예제 코드부터 살펴보겠습니다 useRef()를 사용하면 최초 렌더링이 되었을 때 input에 접근이 가능해집니다 (클래스형 컴포넌트에서 componentDidMount가 되었을 때) +) ↑ 이런 식의 사용도 가능합니다 여기서 {...obj}, {...submit}의 중괄호({})는 객체가 아닌, 이 안에서 JSX 문법을 사용하겠다는 선언적 의미입니다 (앞으로 자주 사용게 될 방식이니 잘 알아둡시다)

[목차] 미디어쿼리 반응형웹 레이아웃 짜기 1. 미디어쿼리 미디어쿼리는 브라우저의 현재 넓이(창 크기)에 따라 각기 다른 스타일이 적용되도록 하는 기술. 반응형 웹 사이트를 제작할 때 반드시 필요하다. @media (){} 문법은 정말 간단하다. (브라우저의 가로크기가 800px 이하일때는 gnb 메뉴바가 사라진다.) *참고로 반응형 웹과 모바일웹은 별개. (네이버처럼 PC 브라우저 상에서는 반응형 웹이 아니지만 모바일용 페이지가 따로 존재하는 경우도 많다

[목차] 가상요소 가상선택자 1. 가상 클래스 가상 클래스는 실제로 존재하는 요소에 CSS로 가상의 클래스를 부여해서 선택 & 제어하는 것으로, HTML에서 별도의 class 지정을 할 필요 없이 해당 요소에 CSS 속성을 부여할 수 있다. 가상 클래스의 문법은:hover, :first-child, :nth-child(n) 등과 같이 키워드 앞에 :를 붙여쓰는 것. > :first-child : 요소의 첫번째 자식을 선택해서 스타일 적용. :nth-child(n): 괄호안의 N번째 요소를 선택해서 스타일 적용. :link : 아직 방문하지 않은 링크를 선택해서 스타일 적용. :visited : 한 번이라도 방문한 링크를 선택해서 스타일 적용. :checked : `` 태그가 체크되었을 때 스타일 적용. :hover : 해당 요소에 마우스 커서를 올려놓았을 때 스타일 적용. _

[목차] `` 엘리먼트 쿼리스트링 로그인 화면 만들기 1. `` 엘리먼트 로그인 화면을 구현하기 위해서는 우선 HTML의 ``에 대해 알아야 한다. ``이란 사용자의 데이터를 서버에 전송하기 위한 엘리먼트다. 일반적으로 아래와 같은 작업을 하기 위해 ``을 이용한다. 로그인을 하기 위해 아이디와 비밀번호를 요구할 때 회원가입을 위한 개인정보 입력창을 띄울 때 로그인 화면을 만들 때의 ``의 문법은 다음과 같은 형태로 적는다. > </spa

[목차] display: flex display: flex의 여러가지 속성 1. display: flex 지금까지는 상위 엘리먼트에서 영역의 크기를 설정하고 하위 엘리먼트에 float이나 margin을 주는 방법으로 정렬해왔지만 이 방식은 수치 계산이 까다롭고 브라우저의 해석 방식에 따라 오류가 생길 가능성도 크다. 이 때 display: flex를 이용하면 상위 엘리먼트에서 하위 요소들을 미리 정렬할 수 있게 되어 레이아웃을 만들 때의 번거로움을 크게 줄여준다. > display: flex의 기본개념 이해 display: flex를 적으면 해당 요소는 부모격인 container(컨테이너) 상태가 되고, 1대 자식 요소들은 item(아이템) 상태가 된다. 아이템들은 설정된 컨테이너의 영역 안에서 inline 요소처럼 가로 방향으로 배치되고, 자신이 가진 내용물의 넓

반응형 탭 메뉴 만들기 > - A + B : +는 인접 형제 결합자. 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택함. A ~ C : ~는 일반 형제 결합자. 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택함. A[B] : []는 특성 선택자. 특정 속성[B]을 가진 요소만을 선택함. ` : 가 B와 C`라는 두가지 class를 한꺼번에 가진다. 버튼1 <l

HTML의 `` 엘리먼트를 이용해서 게시판을 만들어보자. `` 엘리먼트는 표나 게시판을 만들 때 주로 이용한다. > - ``: table row의 약자. 줄 생성. ``: table data의 약자. 칸(cell) 생성. ``: table head의 약자. 표의 제목 생성. `와 `을 써서 4x4 형태의 블록을 만든다면? 먼저 첫 번째 한 줄을 만들고 나면 나머지는 Ctrl+C & Ctrl+V... [게시판 완성 예시] ![](https://velog.velcdn.com/images/kj_code

CSS로 반응형 사이드바 만들기 1. `` 엘리먼트 먼저 HTML의 `` 엘리먼트의 효과를 알고 가자. ` `의 효과로 인해 마우스 커서로 아이디라는 텍스트 영역을 눌러도 ` 속성들이 반응함을 알 수 있다. ----- 2. 사이드바 On/Off 스위치 만들기 > - A + B : 인접 형제 결합자. 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택함. A ~ C : 일반 형제 결합자. 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택함. `으로 3줄의 선을 긋고 #icon {display: none;}으로 체크박스를 가린다. (체크박스를 가려도 `의 효과로 인해 선택이 가능해진 상

[목차] A. 이미지 타입 B. 이미지 삽입 방법 A. 이미지 타입 웹에서 사용할 수 있는 이미지의 타입에는 크게 4가지가 있으며다음과 같은 특징이 있다. 1. gif 가장 낮은 용량 낮은 이미지 품질 (8비트 컬러) 투명도 표현 O 여러장의 이미지를 하나의 파일 안에 담을 수 있음 2. jpg (jpeg) 낮은 용량 보통의 이미지 품질 (24비트 컬러) 투명도 표현 X 3. png 비교적 높은 용량 (손실 없는 이미지 압축) 높은 이미지 품질 투명도 표현 O 4. svg 가장 높은 용량

[목차] A. Position 속성 B. Z-index A. Position 속성 > [css] position 속성은 사이트 안에 '요소를 배치하는 방법'을 지정하는데 position: absolute와 relative는 margin이나 padding과 달리 상하좌우로 영역을 이동한다. 이는 이미지가 겹치는 효과를 내고 싶을 때 주로 사용한다. /* top left right bottom z-index */ --------------------------------------------------------------------------------------------------------- 1) position: absolute > [css] 은색 박스가 위에서부터 50픽셀만큼 좌측에서부터 100픽셀만큼 이동하면서 위로 뜬다. absolute는 절

[목차] A. margin & padding A-1. box-sizing: border-box B. float 속성 B-1. clear: both A. margin & padding margin으로도 padding과 같은 결과를 낼 수 있다. 1) padding을 이용한 처리 > [html] > [css] 2) margin을 이용한 처리 [html] 위와 같이 div 영역을 2단으로 나누고 css의 margin 처리를 통해 div id="text" 영역의 간격을 조정한다. 두 방법 다 출력되는 결과는 같지

[목차] A. CSS B. CSS 문법의 기초 B-1. CSS의 display 속성 C. CSS를 적용하는 3가지 방법 A. CSS(cascading style sheets) B. CSS의 문법의 기초 > #logo { background: red; } 제목 > *여기서 id=logo를 삭제하면 css 처리가 안되는 것을 확인할 수 있다. (id는 #logo와 매칭, class는 .logo와 매칭되는데 여기서 #과 .을 '선택자'라고 부른다.) CSS를 익히기 위해서는 어떠한 선택자와 속성값들이 있고, 또 그 속성마다 어떠한 값을 넣을 수 있는지를 머릿 속에 파악하는 것이 중요하다. <h