본문 바로가기

dev42

[간단 프로그램]lotto 프로그램 만들기 ✅ 주요 기능 1 부터 45까지의 정수가 랜덤으로 화면에 나오는 프로그램 1. 1 - 45 랜덤 정수 만들기 num 변수 생성 후 Math.random()를 사용해서 랜덤으로 숫자를 나오게 한 뒤 45까지 수가 나와야 하므로 * 45를 해줬다. 그 뒤에는 +1을 더해서 0의 자리 숫자는 나오지 않게 했다. 그리고 난 후 콘솔에 찍어보면 소수점이 있는 수가 출력되는데 소수점을 없애고 정수만 출력하기 위해 parseInt() 함수를 사용했다. var num = parseInt(Math.random() * 45 + 1); 📍 Math.random() : 0 ~ 1까지의 난수를 생성하는 함수 📍 parseInt() : 문자열을 숫자로 반환하는 함수지만 정수값만 리턴하는 특징이 있어 소수점을 자를때 도 사용됨 .. 2023. 3. 28.
[HTML, CSS] portfolio 페이지 만들기 두개의 scene 으로 나눠진 porfolio 페이지를 반응형으로 만들었다. 구현해야 하는 요소만큼 오류도 많아 주말 하루를 받쳐서야 완성할 수 있었다😢 해당 글은 작업하면서 있었던 오류들을 정리한 글이다. 일단 처음에 폰트를 설정할때 나는 보통 @font-family 를 주는데 종찬 강사님 같은 경우엔 :root 변수 로 폰트를 설정했다 둘의 차이는 뭘까? 내 생각으로는 @font-family 는 설정을 한 뒤 한번더 폰트를 설정해야하지만 :root 변수는 전체적으로 해당 폰트가 설정된다는 차이가 있다. 1. 큰 레이아웃 잡기 처음에 제일 큰 씬을 먼저 잡고 시작했다 시각적으로 제일 눈에 띄는 보라색 배경과 핑크 배경으로 class 명을 주었다. 각 씬 안에는 안의 콘텐츠를 모두 담는 wrapper를 .. 2023. 3. 26.
[HTML, CSS] login modal 만들기 위 로그인 모달을 html, css 까지 구현을 해봤다. 로그인 방법이 2개로 나뉘어져 있는데 직접 아이디/ 비밀번호를 적어서 로그인을 하는 방법과 SNS 계정으로 로그인하는 방식이다. 내가 위 코드를 짠 순서는 큰 모달창 가운데 정렬 을 먼저 한 다음 단 으로 나뉘어진 부분이 없어 따로 레이아웃을 정렬할 필요가 없다는 생각이 들어 위에서부터 차근차근 내려오면서 html 과 css를 번갈아가면서 짰다 . 1. 모달창 가운데 정렬하기 일단 나는 로그인 모달은 어디서든 독립적으로 쓸 수 있다는 생각이 들어 크게 article 태그로 묶어 주었다. 넓이값은 figma에 있는 넓이값 그대로 520px 을 줬는데 후에 모바일로도 반응형을 만들것을 고려하여 max-width 로 주었다. 이후에 수평 가운데 정렬을 .. 2023. 3. 25.
[css] Negative Margins(음수 마진) 종찬 강사님의 특강 강의를 듣고 작성된 글입니다. https://www.youtube.com/watch?v=OVaKTdFe5Bk 이번 종찬강사님의 특강을 듣고 알게된 Negative Margins 에 대한 포스팅을 남기려 합니다. 평소 양수로만 margin을 써왔던 저로선 굉장히 낮선 단어 조합이었습니다. 음수 마진은 대체 언제 쓰이며 어떤 특징을 가지고 있을까? 요소에 음수 마진(margin-left)을 주게 되면 아래그림 처럼 요소가 끌어 당겨지는것을 볼 수 있습니다. 음수 마진의 사용은 오류가 아니며 W3C에서도 "마진 속성에 음수 값이 허용됩니다"라고 표기 돼있다. 보여지는것에 비해 차지하고 있는 공간이 다르다 float가 적용되면 다르게 반응한다 음수 마진은 top / left 와 bottom .. 2023. 3. 20.