WINK-(Web & App)/HTML & CSS & JS 스터디 (114) 썸네일형 리스트형 [2024 신입부원 기초 스터디] 이종윤 #3주차 (JS 첫번째 수업) JavaScript란? Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다. 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력원인 엔진이라고 볼 수 있다.(나무위키) JavaScript로 무엇을 할 수 있을까? 1. 웹의 요소 제어 - JavaScript를 사용하여 HTML 요소를 선택하고 조작할.. [2023 신입부원 기초 스터디] 박승환 #8주차 마지막 JS @@ 요즘 알바를 너무 많이 해서 올리는 걸 신경을 못 썻네요 ㅎㅎ 늦어서 죄송합니다. 마지막 강의를 보니 실습 영상이더군요! 따라하면서 만든 결과물을 올리도록 하겠습니다!@@ 모달창 만들기 할 일 목록 만들기 지금 시간 알기 컴퓨터와 가위바위보 하기 늦었지만 오늘에서야 js블로그를 마무리 했다. 방학동안에는 HTML, CSS, JavaSctipt를 복습 및 추가적인 공부를 하면서 40일 프로젝트에 도움을 줄 것이고, 아직 JS에 대해서는 배울게 많은 것 같다. 파이썬과 비교해보면 JS는 내가 기입한 대로 흘러가는 느낌이라면, 파이썬은 논리적으로 생각을 해야되는 느낌? 설명을 잘하지는 못하겠다. 뒤에 있을 40일 프로젝트와 자율스터디 때 React를 배울 것인데 앞서 3개와 React를 공부해서 프론트엔.. [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,.. 이전 1 2 3 4 5 6 7 ··· 15 다음
