studio.heelab

이전 글 리액트의 기본 요소: 폼, State, 합성과 상속, 컨텍스트이전 글 리액트의 기본 요소: 이벤트 핸들링, 조건부 렌더링, 리스트와 키이전 글 리액트의 기본 요소; 컴포넌트와 Props, State와 생명주기, 훅이전 글 리액트 시작하기교재: 소플의 처음 만난 리액ewhacse.tistory.com 교재: 소플의 처음 만난 리액트 키워드CSS styled-components Ch15.스타일링CSS웹 개발할 때 스타일링을 하기 위해 사용하는 도구 구성요소selector(선택자): 엘리먼트에 스타일이 적용되는 규칙스타일: 속성과 값으로 이뤄진 키-값 쌍-> 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술한다 id 선택자: id를 기반으로 선택하는 형태로..

이전 글 리액트의 기본 요소: 이벤트 핸들링, 조건부 렌더링, 리스트와 키이전 글 리액트의 기본 요소; 컴포넌트와 Props, State와 생명주기, 훅이전 글 리액트 시작하기교재: 소플의 처음 만난 리액트 키워드리액트 JSX 엘리먼트 렌더링Ch00. 준비하기HTML 살펴보기HTML이란ewhacse.tistory.com 교재: 소플의 처음 만난 리액트 키워드폼 State 합성과 상속 컨텍스트 Ch11. 폼폼사용자로부터 입력을 받기 위해 사용하는 양식 리액트의 폼컴포넌트 내부에서 state를 통해 데이터를 관리한다 HTML의 폼엘리먼트 내부에 각각의 state가 존재한다 제어 컴포넌트-사용자가 입력한 값에 접근하고 제어할 수 있도록 해 주는 컴포넌트-그 값이 리액트의 통제를 받는 입력 폼 엘리먼트 모든 ..

이전 글 리액트의 기본 요소; 컴포넌트와 Props, State와 생명주기, 훅이전 글 리액트 시작하기교재: 소플의 처음 만난 리액트 키워드리액트 JSX 엘리먼트 렌더링Ch00. 준비하기HTML 살펴보기HTML이란 웹사이트의 뼈대를 구성하기 위해서 사용하는 마크업 언어태그를ewhacse.tistory.com 교재: 소플의 처음 만난 리액트 키워드이벤트 헨들링 조건부 렌더링 리스트와 키Ch08. 이벤트 핸들링이벤트 처리하기이벤트: 사용자가 버튼을 클릭하는 등의 사건 DOM의 이벤트-이벤트의 이름을 모두 소문자로 표기-이벤트를 처리할 함수를 문자열로 전달 리액트의 이벤트-리액트는 이벤트의 이름을 *카멜 표기법으로 표기 *ex. onClick -이벤트 처리할 함수를 그대로 전달 이벤트 핸들러(이벤트 리스..

이전 글 리액트 시작하기교재: 소플의 처음 만난 리액트 키워드리액트 JSX 엘리먼트 렌더링Ch00. 준비하기HTML 살펴보기HTML이란 웹사이트의 뼈대를 구성하기 위해서 사용하는 마크업 언어태그를 사용하여 웹사이트 구조ewhacse.tistory.com 교재: 소플의 처음 만난 리액트 키워드컴포넌트와 Props State와 생명주기 훅Ch05. 컴포넌트와 Props컴포넌트리액트는 컴포넌트 기반→ 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이 컴포넌트들이 모여 전체 페이지를 구성→ 개발 시간과 유지 보수 비용 감소 자바스크립트 함수와 개념적으로 비슷하다-속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴한다 리액트 컴포넌트의 역할: 어떠한 속성들을 입력으로 받아서 그에 맞는 리엑..

교재: 소플의 처음 만난 리액트 키워드리액트 JSX 엘리먼트 렌더링Ch00. 준비하기HTML 살펴보기HTML이란 웹사이트의 뼈대를 구성하기 위해서 사용하는 마크업 언어태그를 사용하여 웹사이트 구조 만들고, 웹사이트에 들어갈 내용 채워 넣을 수 있다. 태그 - HTML의 시작과 끝을 알리는 태그 태그 - 어떤 웹사이트인지 알 수 있는 여러 가지 속성(제목, 설명 등)을 담고 있는 곳 태그 - head 태그 안에서 제목을 넣기 위해 사용 - 웹사이트에서 보이는 콘텐츠를 담는 태그 SPA (Single Page Application)복잡한 웹사이트 접속 시, 각 페이지별로 HTML 파일이 따로 존재하며, 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 HTML 파일을 받아와서 화면에 표시한다.→ 수십..

교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 손자요소 하위 선택자 - 상위 요소와 하위 요소를 공백으로 구분section p { color: blue; } /*section " data-og-host="ewhacse.tistory.com" data-og-source-url="" data-og-host="ewhacse.tistory.com" data-og-source-url="https://ewhacse.tistory.com/56" data-og-url="https://ewhacse.tistory.com/56" data-og-image="https://blog.kakaocdn.net/dna/CSCPf/hyZNUR6FM4/AAAAAAAAAAAAAAAAAAAAAIfqJwX6wDB5b62ls_LRbX7rUDTW_9ahh6Qy9HGoJ6Sk/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=7w1f2QSQbWeiyKtSfjz9uUYd4F8%3D