CSS 6

[React] JSX

※배워가고 있는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드립니다!😁 리액트를 막 배우기 시작하면서, 처음 부딪친 난관은 바로 JSX 였다! html 만 공부하던 나에게 조금 혼란을 주는 문법이었는데, 오늘 스터디에서 현직자분이 가르쳐주신 덕분에! (감사합니다ヽ(✿゚▽゚)ノ) 조금 명확해질 수 있었다. 그래서 알게 된 이참에 저서를 참고해서 조금 정리해두려고 한다. 1) JSX 문법이란? 근본적으로, JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐입니다. -React 문서- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번..

웹/React 2021.07.11

#4 숫자야구

※소소한 개인 프로젝트 기록입니다. 1) 과정 이번엔 숫자야구다. 숫자야구의 방식은, 상대방이 고른 4개의 숫자를 맞히는 게임이다. 가령, 상대방이 1234 를 골랐다고 하자. 내가 제출한 정답이 1243일 경우 2스트라이크 2볼이 되는데, 자리수, 숫자 모두 같을 경우 스트라이크로, 자리는 다르지만 정답에 포함되어있는 숫자일 경우 볼로 처리한다. (위와 같은 경우에는 1,2가 자리, 숫자가 똑같아서 2스트라이크. 4,3은 자리는 다르지만 정답에 포함되어 있으므로 2볼.) 내가 만든 게임에서는 10번의 기회 내에 정답을 제출하면 승리(홈런), 10번의 기회 내에 정답을 맞히지 못하거나 혹은 아웃(0스트라이크 0볼)이 3번 될 경우 패배하고 정답이 무엇인지 출력된다. 앞서 간략하게 설명했지만 그래도 들어있..

개발일기 2021.07.04

#3-2 계산기(+α 버전)

※소소한 개인 프로젝트 기록입니다. 1) 과정 2021.06.27 - [개발일기] - #3-1 계산기 에 이은 프로젝트입니다. #3-1 계산기 ※소소한 개인 프로젝트 기록입니다. 1) 과정 이번 프로젝트는 '계산기'이다. 왜 3-1 이냐면, 현재 코드까지는 오직 두개의 수만 계산할 수 있기 때문! 이번에도 역시나 'Zero cho'님의 강의에서 아이 sebada.tistory.com 이전 글에서 언급한 계산기 응용 버전이다. 코드를 많이 수정한 것은 아니고, 이전 버전이 오직 숫자 2개만 연산이 가능했다면, 이번엔 연달아 숫자를 받아서 연산하는 것이나, = 를 눌러 나온 최종 값에 또 다른 연산을 시작하는 방식으로 여러개의 수를 계속해서 연산할 수 있는 계산기를 만들었다. const operCal=(va..

개발일기 2021.07.02

#3-1 계산기

※소소한 개인 프로젝트 기록입니다. 1) 과정 이번 프로젝트는 '계산기'이다. 왜 3-1 이냐면, 현재 코드까지는 오직 두개의 수만 계산할 수 있기 때문! 이번에도 역시나 'Zero cho'님의 강의에서 아이디어를 얻었다. (감사합니다🙇‍♀️ 강의 잘 보고 있습니다.) 항상 zero cho님의 유튜브 강의를 통해 강의를 보다가, 이번에 내신 자바스크립트 책이 온/오프라인으로 나와서 전자책으로 보고 있다!! 관련 링크는 아래 참고자료 칸에 첨부하도록 하겠다. 어떤 강의를 보고 클론 코딩을 하더라도, 항상 그분들 코드보다 조금씩은 더 기능을 추가해보려고 노력하는 편이라 이번에도 별거 아니지만 기능을 추가해보았다. 내가 임의로 추가한 기능과 함께 계산기의 전체적인 기능을 아래 적어보겠다. - 사칙연산(더하기,..

개발일기 2021.06.27

#1 로또 번호 추첨기

※소소한 개인 프로젝트 기록입니다. 1) 과정 날이 좋아서 산책을 했다. 요즘 자바스크립트 실전 연습을 하고 싶었지만, 도통 아이디어가 안 떠올랐는데 문득 어렸을적부터 로또 1등, 2등이 많이 나왔던 동네 슈퍼를 지나가게 되었다. 여기에서 아이디어를 얻어 소소하지만 '로또 번호 추첨기'를 만들어보기로 결심했다! 일단, 나는 로또에 대해 아무것도 모르기 때문에 로또에 대해서 먼저 알아보았다. 1부터 45까지의 숫자 중 6개를 맞히면 된다. 거기에 추가로 아래와 같이 숫자 5개를 맞힌 상황에서 보너스 볼까지 맞히면 2등이 되는 2등 보너스볼도 나온다. -출처: https://namu.wiki/w/%EB%A1%9C%EB%98%90%206/45 아하, 그러면 기본 6개 공 + 보너스 공 번호까지 추첨하는 추첨기..

개발일기 2021.06.07

[css] <div> 태그를 이용하여 가로선, 세로선 그리기

✍ 태그를 이용하여 가로선, 세로선 그리기 html에 가로 / 세로 로 이용할 div 만들어주기 가로선이냐 세로선이냐에 따라 width / height 로 선 두께, 길이 지정 ex. 가로선일 경우. height: 1px(선두께) width: 100px(선 길이) 굳이 border-right 나 border-bottom을 이용할 필요없이 background-color를 이용해서 선의 색상을 지정할 수 있다. 선의 위치는 아래의 코드대로 원하는 곳에 배치 가능 .width{ //가로줄 width:100%; //예시: 부모요소 전체에 가로줄을 그을때 height: 1px; background-color:black; // 예시: 검은색 줄 //position 으로 선 위치 어떻게 정할 건지 정하고 top, l..

웹/CSS 2021.05.23
728x90