본문 바로가기

분류 전체보기227

CSS 단위 이해하기(%, px, em, rem, vw, vh의 차이) CSS에는 %, px, em, rem, vw, vh등의 많은 단위들이 있다. 오늘은 이 단위들의 차이점을 알아보자 사용할 HTML class가 a인 div 태그가 b인 div 태그를 감싼 모습이다. px px(픽셀)은 CSS의 가장 기본적인 크기 단위이다. 많은 사람들이 px을 사용하고 있지만 px은 상대적이지 않고 절대적인 단위이기 때문에 반응형 웹을 만들때 불편한 점이 있을 수 있다. .a{ display: flex; justify-content: center; width: 300px; height: 300px; background-color: gray; } .b{ width: 100px; height: 100px; background-color: beige; } css를 이렇게 작성한다고 하면 웹페.. 2022. 8. 10.
[JS] 반복문 for문, while문 만약 1부터 10까지 출력을 한다고 했을 때 반복문이 없었다면 console.log(1) console.log(2) console.log(3) . . . console.log(10) 이런 식으로 괜한 노동을 했을 것이다. 이런 문제를 해결하기 위해 자바스크립트에는 많은 반복문들이 있다. for문, for-in문, for-of문, while문, do-while문 등등.. 오늘은 이 반복문들 중 가장 많이 쓰이는 for문, while문에 대해서 알아 볼 것이다. 1. for문 for문은 상당히 많이 쓰이는 반복문으로 구조는 for(변수 선언; 변수 범위 지정; 증감식) { 반복하고 싶은 코드 } 로 이루어진다. 1부터 10까지 출력을 한다고 했다면 for(let i = 0; i < 10; i++){ cons.. 2022. 8. 8.
[JS] 숫자 맞추기 게임 만들기! 숫자 맞추기 게임 - 컴퓨터가 랜덤한 숫자를 생성하면 그 숫자를 사용자가 맞추는 게임 필요한 기능 1. 약간의 HTML과 CSS 사용 2. 컴퓨터가 랜덤 번호를 지정한다. 3. 사용자가 예상 번호를 입력한 후 '확인' 버튼을 누른다. 4. 만약, 랜덤번호를 맞추면 맞췄다고 알려준다. 5. 랜덤번호 유저번호일 경우, UP 출력 7. '초기화' 버튼을 누르면 게임이 리셋된다. 8. 기회는 5번 주어지며 5번의 기회를 다 쓰면 게임이 끝난다. 9. 유저가 1~100 범위 밖의 숫자를 입력하면 알려주고, 기회를 감소시키지 않는다. 10. 이미 입력한 숫자를 또 입력하면 알려준 후 기회를 감소시키지 않는다. 1. 컴퓨터가 랜덤 번호를 지정하는 방법 let co.. 2022. 8. 5.
[JS] 조건문인 if문, switch문, 삼항 연산식에 대해 알아보자 우리는 프로그래밍을 할 때 굉장히 많은 케이스에 마주하게 될 것이다. 이 변수가 만약에 ~라면? 만약에 그게 아니고 이거라면? 이런 식의 경우 말이다. 그럴 때 사용하는 것이 if문이다. if문의 대략적인 구조를 보면 if( ) { } 이렇게 되어 있다. ( ) 안에는 true값, false 값 둘 중 하나의 값만 들어갈 수 있다. 또한 { }는 ( )안의 값이 true일 때만 실행을 한다. 만약 ( )의 값이 false라면 { }를 생략하고 if문 자체를 빠져나오게 된다. 예를 들어 let a = 1 if(a == 1) { console.log("true입니다.") } 이런 식이다. 위에서 변수 a를 1로 선언해 놓고 if ( a == 1 )을 해 주었다. a는 1이 맞기 때문에 if ( a == 1 .. 2022. 8. 4.

티스토리툴바