Front-end
-
[100DaysOfCode] 26강Front-end/100DaysOfCode 2022. 8. 18. 23:37
오늘 배운 내용 Form element HTML form은 user input을 수집하기 위해 사용된다. user input은 프로세스을 위한 서버로 보내진다 form 태그가 다른 input 요소들을 감싸주는 형태이다 (text fields, checkboxes, radio buttons, submit buttons, ...) form 태그로 감싸면서 검색 엔진과 장치들에게 입력 양식이 시작할 것이라 알려주는 역할을 수행한다 양식이 어떻게 제출될지 제어하는 역할을 수행한다 input element input element는 closing tag가 필요 없는 void element이다 💡 종류: text, radio, checkbox, submit, button action Specifies where t..
-
[100DaysOfCode] 25강Front-end/100DaysOfCode 2022. 8. 18. 22:53
오늘 배운 내용 1️⃣ CSS 변수 2️⃣ 루트, html, * 선택자 비교 3️⃣ css transform, transition 1️⃣ CSS 변수 1. 선언 방법 --변수명: 값; 2. 사용 방법 속성: var(--변수명); ** 디폴트값 선언 가능 var(--변수명, default 값); 3. 예시 --color-grey-100: rgb(236, 236, 236); background-color: var(--color-grey-100); 2️⃣ 루트, html, * 선택자 비교 html html 요소를 선택한다(html 파일의 최상위 루트 요소) CSS 규칙은 html 및 html의 다른 요소에도 상속된다 :root (가상 선택자) 문서의 최상위 루트 요소를 선택한다 최상위 요소 안에 포함된 요소에..
-
[100DaysOfCode] 23강 - 24강Front-end/100DaysOfCode 2022. 8. 17. 23:52
💡 반응형 웹사이트 만들기 미디어 쿼리 미디어쿼리 작성법 @media (min-width or max-width: 1200px) { p { font-size: 2rem; } } max-width Desktop 먼저 작업 후 Mobile 작업 min-width Mobile 먼저 작업 후 Desktop 작업 반응형웹 & 햄버거 메뉴를 만들어보자! HTML 태그 WEBFOOD Browse Meals My Orders Browse Meals My Orders CSS 태그 /* *************************************************************** */ /* ham menu */ .menu-btn { width: 2rem; height: 2rem; display: fle..
-
[100DaysOfCode] 21강Front-end/100DaysOfCode 2022. 8. 13. 23:08
💡 이번 모듈 목표: 반응형 웹사이트 만들기 먼저 반응형 웹사이트로 만들어보기 적합한 웹사이트를 퍼블리싱했다! (햄버거 먹고싶다) em? rem? %? 어떤 것을 사용해야 할까? 평소에 사용하던 익숙한 px 외에 다른 단위들을 서로 비교해보자 px % em rem 이해하기 쉽고, 절대적인 값이다 부모 요소에 상대적이다 폰트 사이즈에 상대적이다 root element(HTML, 브라우저)의 폰트 사이즈에 상대적이다 사용자 환경에 구애를 받지 않고, 사이즈가 바뀌지 않는다 폭포처럼 부모- 자식 간의 연속적인 속성 때문에 다루기가 어렵다 폭포처럼 부모- 자식 간의 연속적인 속성 때문에 다루기가 어렵다 만약 적용 가능한 경우 선호된다 구글 크롬 - 환경설정에서 브라우저의 기본 폰트 사이즈가 16임을 확인할 수 ..
-
[React] StateFront-end/react 2022. 8. 10. 23:17
State란? ✨ React의 핵심 개념 - 리액트 컴포넌트의 변경 가능한 데이터 - 개발자가 직접 정의한다 - 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다(나머지는 instance에 정의하면 된다) - state는 자바스크립트 객체이다 // 클래스 컴포넌트 class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } } state는 한번 정의되면 직접 수정하면 안 된다(setState 함수를 통해 수정해야 한다) //직접 수정한 잘못된 예시 this.state = { name: 'yeonsu' }; //setState 함수를 이용한 올바른 예시..
-
[React] 댓글 컴포넌트 만들기Front-end/react 2022. 8. 8. 15:01
🔥 props.name과 props.comment를 이용한 댓글 컴포넌트 만들어보기 import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, imageContainer: {}, image: { width: 50, height: 50, borderRadius: 25, }, contentContainer: { marginLeft: 8, display: "flex", flexDirection: "column", justifyContent: "center", }, nameText..
-
[React] 시계 만들기Front-end/react 2022. 8. 8. 13:09
현재 시간을 표시해주는 element를 만들어보자! import React from "react"; function Clock(props) { return ( Hi, React! 현재 시간: {new Date().toLocaleTimeString()} ); } export default Clock; 1. Clock.jsx 파일을 만들고, 현재 시간을 알려주는 컴포넌트를 만든다 import Clock from './chap_04/Clock'; setInterval(() => { const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); }, 1000); 2. index.js 파일에 1000ms마다 새롭게 Clock 컴포..