본문 바로가기
반응형

WINK-(Web & App)/HTML & CSS & JS 스터디

 (128)
[2023 신입부원 심화 스터디] 박지민 #마지막주 React.js 섹션 3~6 섹션 3. State 1. State 소개 - state는 props의 값에 따라 내부의 구현에 필요한 데이터 - props는 사용자가 component를 사용하는 입장에서 중요한 것 2. State 사용 class App extends Component { constructor(props) { super(props); this.state = { Subject: { title: "WEB", sub: "World wid Web!" } }; } render() { return ( title={this.state.Subject.title} sub={this.state.Subject.sub} ); } } export default App; App.js가 내부적으로 사용된다면 state를 통해 사용 Compone..
[2023 신입부원 심화 스터디] 신진욱 #마지막주 React.js 섹션 3 - 6 #귀칼보단 리액트지 ㅋ 섹션 3 - State 소개 1. state 소개 - state는 props의 값에 따라서 내부에 구현에 필요한 데이터들 2. state의 사용 class App extends Component { constructor(props) { super(props); this.state = { // state에서 subject를 초기화 Subject: { title: "WEB", sub: "World wid Web!" } // 하나의 값을 다룰 때! }; } render() { return ( title={this.state.Subject.title} sub={this.state.Subject.sub} ); } } export default App; - App.js가 내부적으로 사용된다면 state를 통해 사용..
[2023 신입부원 심화 스터디] 김윤희 #마지막주차 React.js 섹션3 ~ 7 #치타는힘드러 섹션3. State 소개 1. state 소개 props는 사용자가 컴포넌트를 사용하는 입장에서 중요 state는 props의 값에 따라서 내부에 구현에 필요한 데이터들 2. state의 사용 class App extends Component { constructor(props) { super(props); this.state = { Subject: { title: "WEB", sub: "World wid Web!" }, }; } render() { return ( title={this.state.Subject.title} sub={this.state.Subject.sub} ); } } App.js가 내부적으로 사용하는 형태는 state를 통해 사용한다. state값을 subject라는 컴포넌트의 pro..
[2023 신입부원 기초 스터디] 이총명 #8주차 - JS 해치웠나..? 1 . 모달 실습 강의대로 하면 심심해서 살짝 바꿔봤어요! index.html 👉눌러보세요👈 즐겁고 행복한 하루! 😍감사합니다😍 style.css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; height: 100vh; flex-direction: column; justify-content: center; align-items: center; background-image: ..
[2023 신입부원 기초 스터디] 한승훈 #8주차 - 섹션6 0. 인사말 안녕하세요. 뭔가 오랜만이 아니라 요즘 자주 보는 기분이네요. 기분탓입니다. 다들 6/21에 스파이더맨:어크로스 더 스파이더버스 개봉하신 거 아시나요? 저는 오늘로 3회독 완료했습니다. 방학하고 시간 되실 때 꼭 보는걸 추천드립니다. 8주차는 실습 과제였습니다. 실행 화면과 코드를 이용하여 배운 것을 간단히 정리해보도록 해요. 1. Modal 연습문제 가장 먼저 할 일은 클릭할 버튼을 가져오는 것입니다. openButton을 이용합니다. 처음 화면에서는 css에서 container의 display:none; 설정 때문에 보이지 않는 것입니다. display 속성에 접근하여 none을 flex로 바꾸면 감춰져있던 모달 창이 보이게 됩니다. 버튼은 반대로, none으로 바꿔주면 됩니다. 그러면 ..
[2023 신입부원 기초 스터디] 조상혁 #8주차 - Js 실습 예제 가위바위보 게임 js 실습 코드 // 무료 강의 👉 https://youtube.com/playlist?list=PLI33CnBTx2MZGD7zAQ810_B8dDU_E8gaq // 이 아래 코드를 작성하세요. const buttons = document.querySelectorAll('button'); const computerChoice = document.querySelector('.computer-choice'); const userChoice = document.querySelector('.you-choice'); const winner = document.querySelector('.result'); const result = ['가위', '바위', '보']; const show = (user,..
[2023 신입부원 기초 스터디] 최종은 #8주차 - 배우긴했으니예제를만들어보자 JS기초기에 HTML, CSS 부분은 강사분이 깃허브에 올려주셨다 사랑합니다🤸🏻‍♂️ 1.모달 만들기 우선 모달이란? 기존의 브라우저 페이지 위에 새로운 레이어를 까는것이다 이를 HTML, CSS, JS로 만들어보게따 학습목표: HTML요소를 선택하여 JS에서 처리하긔 -> 버튼을 클릭하면 모달창이 나오게 만들긔 👉눌러보라우 🕺🕺🕺🕺🕺 둠칫둠칫 Close 이건 HTML * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans..
[2023 신입부원 기초 스터디] 정찬우 #8주차 - 스터디 끝~ 이번 주차는 그대로 보고 따라 하는 실습 주차여서 딱히 블로깅 할 게 없다. HTML을 시작으로 CSS, JS까지 한 번씩 기초는 다진 것 같다. 계속 스터디를 하면 할수록 웹에 빠지게 되었고, 이번 방학 때는 웹에 대해서 더 자세히 공부해 보고 싶어서 어제 서점에 가서 웹 관련 책을 샀다. 아직 많이 해본거는 아니지만 조금 공부 해보고 느낀 것은 물론 백도 재밌지만 나는 프론트쪽에 더 흥미를 느끼는 것 같다. 앞으로 방학 때 윙크에 무슨 스터디가 있을지는 모르지만 열심히 참여해 볼 생각입니다~ 공항 출발하기 1시간 전까지 실습하고 블로깅하고 떠납니다✈✈
반응형

티스토리툴바