개념 if var n = 100; if (n < 200) { document.write("n은 200미만입니다.") } if (조건식) {실행문} 형태로, n이 200 미만이라면 "n은 200미만입니다."를 출력한다는 식이다. 하지만, n이 200 이상일 때는 어떻게 될까? 조건식에 맞지 않기 때문에 아무것도 실행하지 않는다. if (n < 200) { document.write("n은 200미만입니다.") } else { document.write("n은 200이상입니다.") } if 뒤에 else {실행문}를 추가해서 if의 조건식이 아닐 경우 else의 실행문을 실행하게 된다. 하지만, 여기서 n이 딱 200일 경우 "n은 200입니다."를 추가하고 싶다면 어떻게 해야 할까? if (n < 200)..

개념 while var a = 1; while (a < 3) { document.write(a); a++; // 무한 반복을 방지하기 위한 장치 }; while은 평가 결과가 false가 나올 때까지 문장을 무한 반복하여 실행한다. 무한 반복 방지를 위해 위의 코드처럼 'a++'같은 장치가 필요하다. ( ) 안에는 조건식이 들어가며, { } 안에는 조건식이 true일 때 실행될 문장이 들어간다. 따라서, a가 3보다 작을 때 k를 문서에 작성하겠다는 뜻이다. 밑에 k++가 있기 때문에 처음 1이었던 a는 2가 되어 다시 처음 조건식으로 돌아간다. do ~ while var a = 1; do { document.write(a); a++; } while (a < 3) { document.write("done..

개념 HTML의 문자(내용) 수정하기 html 코드의 id 값을 이용하여 자바스크립트로 코드를 수정할 수 있다. document.getElementById("apple").innerHTML = "apple"; 원래 p 태그에 아무 내용도 없었지만, 자바스크립트로 위와 같이 입력해주면 "apple"이라는 단어가 출력된다. 만약, p 태그에 다른 내용이 있었더라도 innerHTML을 이용하면 해당 값으로 수정된다. CSS의 color 속성 수정하기 Hello! Click // 1. h1의 색깔 수정하기 document.getElementById("bow").style.color = "red"; // 2. 버튼을 눌렀을 때 h1의 색깔이 변경 function btn() { document.getElementB..

문제 지금부터 상상을 한번 해보자. 하나의 부모 태그 아래에 여러 개의 자식 태그가 있다. 우리가 흔히 보는 메뉴바처럼 그 자식 태그는 똑같은 너비로 부모 태그를 꽉 채우고 있다. 이걸 만드려면 어떤 태그를 쓰는 게 좋을까? 답은 정해져 있지 않다고 생각한다. 왜냐하면 개인적으로 좋은 코딩은 있다고 생각하지만, 결과가 다르지 않는 이상 틀린 코딩은 없다고 생각하기 때문이다. 하지만, 조금이라도 좋은 코딩을 하기 위해선 지금 내가 블로그에 기록하며 공부하는 것처럼 여러 개의 코드 중에 좋은 코드를 구별해낼 수 있어야 하고, 그러기 위해서는 하나의 문제에 여러가지 답을 많이 알면 알수록 좋다고 생각한다. 위의 문제를 해결하는 방법은 많지만, 그 중 하나인 display: table를 소개하려고 한다. (실무..

문제 CSS만을 이용해서 위와 같은 결과물을 만들려고 한다. 이 결과물을 만드는 데 2가지 과정이 필요하다. 1) 목록에 밑줄을 만들어야 한다. 2) hover 값을 줘야 한다. (transform 사용) 이 게시물은 1번에 해당하는 과정을 설명하는 글로, 2번 과정은 따로 transform 속성 정리글에서 다루겠다. 먼저, 밑줄을 만드는 경우의 수는 많다. 해당 글씨가 들어간 태그에 border-bottom을 줘도 되고, li에 padding-bottom 값을 준 후 border-bottom을 줘도 된다. 메뉴에 어떤 태그를 썼냐에 따라 방법은 무수히 많다. 하지만, 위와 같이 주게 되면 부작용이 있다. border에도 1px처럼 크기가 있기 때문에, 위처럼 hover를 주는 경우 글씨가 갑자기 올라가..