듈리 스토리

예전에 웹디자인 학원 다니면서 CSS를 배울 때에는, HTML 요소들의 레이아웃을 배치할 때 거의 Float을 이용했었어요. 하지만 Float의 원래 목적은 이미지와 글을 잘 어우러지게 배치 하는 목적이 주인 것으로 알고 있고, 이러한 전체적인 레이아웃 배치를 위한 것은 아니라고 들었기 때문에 해당 목적에 맞는 Flexbox와 Grid를 언젠가는 꼭 공부해야겠다고 생각했었죠! 사실 예전에 1분 코딩님의 유튜브로 간단하게 정리된 Flex와 Grid 영상을 봤었는데 공부를 한 1년 정도 손 놓다 보니 자연스럽게 까먹게 됐었어요ㅠ 제가 전에 봤던 게 위 영상이에요! 간단하게 Flex와 Grid의 개념에 대해 잘 정리되어 있어서 추천하는 1분 코딩님의 유튜브 영상입니다~ 처음 봤을 때는 Float보다 훨씬 복잡..

DOM(Document Object Model) - HTML 페이지 문서 내에 있는 모든 요소를 객체(object)로 만드는 트리 구조의 모델. 1.HTML 문서 내에서 원하는 요소 선택 방법 document.querySelector(' 선택자 ') document.querySelectorAll(' 선택자 ') - 괄호 안 선택자에는 클래스나 아이디 모두 들어갈 수 있음. 클래스인 경우에는 . 추가하고, 아이디인 경우에는 # 추가해야함. 즉, CSS 선택자에 사용하는 후손 선택자, 자손 선택자, 동위 선택자 등등 모든 선택자 요소에 접근 가능. - 매번 위와 같이 나열하는 것 보다는, 해당 부분을 변수로 저장해서 재사용하는 것이 훨씬 편리함. - .querySelectorAll(' ')의 경우 해당 선택..

오랜만에 다시 연습하는 자바스크립트! 오랜만에 보니까 진짜 한두 달 사이에 정말 많이 까먹었다는 걸 느꼈다.. 하 연초에 공부했던 시간이 아까워진다.. 흑 ㅜㅜ 아무튼 지금은 제로초님의 유튜브 강의 중 ES2020라는 재생목록을 통해서 자바스크립트 예제 문제 풀고 복습을 하는 중이다. 지금은 숫자야구 만드는 걸 하고있는 중인데 마침 별 찍기 연습을 하는 부분이었다. 이 정도는 다행히 아직 머릿속에 대강 있어서 조금 해보니까 쉽게 할 수 있었다. 참고로, 다이아몬드 별찍기를 제외한 다른 별찍기들은 여러 번 반복해서 해보면 거의 비슷하고 좀 쉬운 편이라 나는 다이아몬드만 새롭게 해 보았음! 별찍기로 다이아몬드를 하는거.. 이거는 딱 머릿속에서 연상이 되지 않았다. (참고로 이런 모양) * *** ***** ..

처음에는 자바스크립트를 공부하면서 연산자가 그다지 중요하지 않다고 생각했다. 당연스레 어렸을 때부터 배워온 수학을 떠올리면 당연한 것들이라고 생각했기 때문이다. 그런데 자바스크립트에서의 연산자는 수학에서의 연산자와 무조건 같은 의미가 아니다. 예를 들면, 수학에서 =는 최종 계산값을 구하는 연산자로 우항과 좌항이 같다는 의미를 가진다. 그런데 자바스크립트에서 =는 대입연산자로, 좌항에 있는 변수에 우항에 있는 변수 값을 대입, 즉 저장하는 것을 의미한다. 또한 자바스크립트에서는 +가 덧셈을 의미하기도 하지만, 숫자가 아닌 피연산자 앞에 적게되면(예: +prompt( )) 해당 값을 숫자형으로 변경해주는 "단항 연산자"로 사용되기도 한다. 즉, Number()와 같은 작업을 해준다고 보면 된다. 이 부분을..

이 포스팅은 천인국님의 책, HTML5 + CSS3 + Javascript로 배우는 웹 프로그래밍 기초 에 있는 예제를 따라 해 본 겁니다(296쪽) 코드 작성의 편리함을 위해서, 내용은 모두 영어로 적어보았어요. "정수를 입력했을 때만" 작동하는 계산기 만들기 예제입니다. (소수를 넣으면 정확한 값이 출력되지 않습니다.) 참고로 전 자바스크립트 공부 시작하다가 맨날 포기하고 다시 시작하고 하는 왕. 초. 보입니다! 그리고 요즘 연습할 때 사용하는 편집기는 VS Code입니다! 책에서는 단순히 덧셈만 가지고 만든 예제였습니다. 저는 초보라 아직 코드 어떻게 효율적으로 짜는지 잘 모르고 많이 부족해요.. 그래서 해당 교재의 코드를 거의 참고했는데, 덧셈만 있으면 제가 계산기라고 하기가 조금 그래서 각각 덧..