[TIL] 23/12/22 재밌는 canvas 특강 - css 선택자, 리액트 IDE 사이트

TIL(Today I Learned)/스파르타 내배캠

개발자먼지 2023. 12. 23. 14:36

프론트 밥 아저씨 오창영 튜터님과 함께..

canvas로 그림판 만들기

마지막에 결국에 멘트 해주심

"참쉽죠?"

여튼 나에게 찐 프론트의 영감을 주셔버렸다

라이브세션에서 순식간에 뚝딱 더 많은걸 만들어주시긴했지만
펜으로 그리기와 펜굵기까지 반영되어있는 코드!!

MDN 사이트의 튜토리얼을 통해 더 다양한 것을 해볼수 있겠다.

많은 튜터님들이 특강 세션을 해주시는 좋은 점.

개발자마다 사용하는 환경과, 유용한 꿀팁들이 쏟아진다규..

리액트는 초반에 찾다가 못찾았는데 검색어를 어떻게 했어야했는지 몰랐던 것 같다.

코드샌드박스에 칸바스를 적용한 다른 예제가 담긴 페이지를 공유해주셨다.

사용해보려면 가입이 필요한 것 같다.
깃허브로 가입 완료! 이제 아이패드만 들고 나가서 코딩 할 수 있다ㅋㅋ

기타 IDE 사이트

https://repl.it/
리액트 말고 javascript , python 정도는 레플잇 사이트에서 해볼 수 있다.
스파르타 크리스마스 D-day 만들기 무료특강 들어봤는데 저 사이트에서 진행했다.

전에 파이썬 공부할때도 써본적이 있었다.

css 할 때 꿀팁을 발견했는데

+ 선택자 (A~B)

box-item이 ㅁ ㅁ ㅁ 옆으로 쭉 있을 경우 + 연산자를 통해 (box-item 옆에있는 box-item 이라는 뜻으로)
처음꺼를 제외하고 옆에 놈들만 margin-left를 먹일 수 있다.

혹은 border-left 를 그리면 ㅁ | ㅁ | ㅁ 이 구조를 만들수도 있다.

.box-item + .box-item {
  margin-left: 20px;
}

이참에 나머지 선택자들 공부

~ 선택자 (A~B)	A태그 옆에 모든 B태그
:first-child / nth-child(2) / last-child	자식 중 첫번째일 때 / 두번째일때 / 마지막일때 (ul 밑에 li 가 잔뜩 있을때, li 첫번째 놈을 제목으로 사용할때 꿀 사용) li:first-child { }
:only-child	외동인 자식일 때 적용, 형제가 없는 태그...
input[type=radio]:checked { border: 1px solid black; }	input 타입이 radio 인데 checked 되어있는
A:after / A:before	공간을 덧붙이고 float 효과를 제거.. overflow:hidden; 방법이 불가능 한 경우에 사용하라
&	부모 선택자, 사용 예가 파격적인데 아래글 참고 Web Club :: LESS Parent Selector(&) (tistory.com)
>	자식 선택자
띄어쓰기 div .title {	후손 선택자 div 후손중에 title 클래스를 가지고있는 모든 태그
:hover / : active / :focus (이벤트 관련 가상 클래스 선택자)	마우스가 올라간 동안 / 클릭된 동안 / (인풋) 포커스 되어있는 동안

마지막 3개는 기초인데 제일 어렵군~!!

오 이정도면 쓸만하다.

javascript 배울 때 미리미리 다 공부해놨어야 할 것 같지만 ~?

css 한참 놓고 있다가 이제야 훑어봤다.

진정한 프론트엔드로 거듭나쟈~ㅋ.ㅋ

참고로 input type도 종류가 엄청많았다.

한번 살펴보면 굉장히 표현이 풍부해 질 것 같다.

세션에서는 range 타입을 썼다.

label 과 input 사이도 이제는 알아야한ㄷ...

input type들과 label과 input 관계 참고 블로그 :

https://abcdqbbq.tistory.com/63