목록WEB STUDY (244)
whatisthis?
React.js Day 02 (=빈 태그)의 사용 리액트에서 단점이였던 것이 항상 컴포넌트를 로 감싸줬어야 했다. 그러면, reactDOM으로 렌더링 했을때 root>div>컴포넌트 이런식으로 쓸 데 없는 div가 생겨버리게 된다. 따라서, 이런 단점을 개선한 것이 바로 로 감싸주는 것. 1. 컴포넌트의 render 부분 return ( 💯구구단 게임💯 📃 {this.state.first} 곱하기 {this.state.second} 는? 입력 LOG 🔎 {this.state.line} {this.state.result} ); 2. ReactDOM의 render 부분 ReactDOM.render( , document.querySelector("#root") ); 이런식으로 div#root 하위 div들이 ..
React.js 선언형 코드를 예측 가능하고 디버그하기 쉽게 만들어줌. 컴포넌트 기반 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있음. 💡 웹팩(webpack)의 기능 - 쪼개진 js 파일을 html이 실행할수 있는 하나의 파일로 합쳐준다. React 클래스 컴포넌트 HTML like-button.js const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); } render() { return e("button", null, "like"); } } 클래스형 컴포넌트 - class 클래스명 extends React.Co..
Modal pop-up - without JS 📌 기본 원리 - 을 해서 해당 div#popup에 가상클래스 :target을 준다! - display block과 none 토글되게 - 닫기버튼에는 로 다시 되돌린다. HTML Open modal 닫기 CSS #popup { display: none; } #popup:target { display: block; } 🔻 응용 예제 위 원리를 이용해서 응용 예제를 만들어보자. div#popup에 class도 추가해서 스타일 하나를 가지고 여러개의 모달을 만들 수 있게. 또한, display: block이아니고 display: flex를 해서 가운데정렬도 덤으로 할수 있게. index.html Open Modal A Open Modal B Open Modal C..
폴더 Add - Commit - Push 하기 명령어 순서: $ git status $ git add 폴더 이름 $ git commit -m "커밋 로그" $ git remote -v $ git push origin main 1. git status 명령어로 working directory 상태 확인 2. git add 명령어로 staging area로 폴더 이동 3. git commit과 git push 명령어로 commit한 사항을 repository로 최종 업로드 파일과 달리 추가되는 점이 있다면 4번째 라인의 "git remote -v" 라는 명령어임. 업로드 하려는 폴더의 상위폴더에 git이 연결(.git 폴더가 있음)돼있기 때문에 해당 명령어를 이용해 내 github repository(원격 ..
Landscape = 모바일 화면회전 (가로 ver) @media (orientation: landscape) { /* 속성 */ }
en) MDN 문서 영어로 공부하기 - 영어 공부도 하고, (문장구조+코딩용어+작문) - 코딩 지식도 얻을 수 있음 - 하루 30분씩만 매일매일 💯💯 📃 이번에 볼 문서는? - React 시작하기 React 시작하기 - Web 개발 학습하기 | MDN 이 문서에서는 React를 소개합니다. 우리는 React에 대한 약간의 배경지식과 사용 예시, 로컬 컴퓨터에 React 툴체인을 설정하는 방법을 배우고 프로세스에서의 React 동작 원리를 배우기 위해서 간단 developer.mozilla.org
BootStrap (부트스트랩) - 반응형 grid-system 때문에 유명! 👍 - CSS Framework. Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com Quick start 누르고 CSS 라 적힌 부분의 코드를 copy한다. >> html 파일의 head 에 붙여넣음. ❗ 참고 우리는 지금 grid system만 사용하므로 그냥 저 link부분만 가져와도 되고, 만약 컴포넌트나 다양한 기능들을 사용하려면 script태그도 가져와야 한다. 그냥 아무것도 설정 안해도 bootstrap이 기본 제공하는 reset style에 의해 깔끔하게 나온다! grid-system 기본 구조 container 안..
Grid System - 디자이너가 웹 디자인을 할 때 그리드 시스템을 이용해서 디자인을 한다. container column gutter 여기서 하늘색 전체에 해당하는 것이 container, hotpink색 칸 하나에 해당하는 것이 column이다. 주로 그리드는 12칸짜리를 많이 사용한다. column을 통해 요소의 width를 설정한다. (예> 3칸짜리, 6칸짜리 등 column을 기준으로 잡음) gutter은 요소간의 여백을 주는 것. = 간격을 위한 여백을 줌. 💡 이러한 grid-system을 반응형으로 해준 framework ===== Bootstrap! ref https://edu.goorm.io/learn/lecture/20583
1. 기복적으로, 나중에 오는 선언이 덮어씀 2. 선택자 우선순위 선택자 우선순위 요소 선택자 정말 어쩔수 없을때만 사용할 것. 안좋은거임. 1 / 인라인 스타일 적용 hello > 어떠한 스타일보다 가장 강력히 적용됨. 2/ !important 선언 - 인라인 스타일보다 더 강력함. - 무슨일이 있어도 이걸 적용하라는 뜻. - 사용 자제하는것이 좋음. * { color: red !important; } ref lecture. https://edu.goorm.io/learn/lecture/20583
CSS - Selector 1 / 요소, 클래스, ID 선택자 2 / 자식, 자손, 형제 선택자 3 / 구조적 가상 클래스 선택자 4 / 동적 가상 클래스 선택자 1 / 요소, 클래스, ID 선택자 Type Selector - HTML 태그 이름으로 선택자 작성 span { color : #0066ff; font-size: 16px; font-weight: 500; } Class Selector - HTML의 class속성의 속성값을 사용 .stop-button { color : #0066ff; border: none; } class는 중복 선언 가능하므로 같은 클래스에 동일한 스타일을 한꺼번에 작성 가능하다. 반대로, 한 요소에 여러 클래스를 가질 수도 있다. 만약, class1이면서 class2면서 ..