Every step counts

공부했던 setInterval과 setTimeout을 활용하여 화면을 만들어보자. 특정 문장의 글자가 마치 타이핑을 하듯 한글자씩 화면에 순차적으로 출력되도록 하고 커서바가 깜빡이는 효과도 줄 것이다. language Learn New Language 시작은 역시 HTML 태그 빌딩 let sents = ["Bienvenue!", "Welcome!", "歡迎!", "환영합니다!"]; let randSent = ""; 전역변수로는 두가지를 쓸 것이다. 먼저 네가지 언어로된 인사가 담긴 sents라는 배열과 이중 랜덤으로 뽑힌 문장을 담을 randSent이다. randomSent(); function randomSent() { randSent = sents[parseInt(Math.floor(Math.ran..

HTML, CSS, JS를 모두 사용하여 활용하는 연습이다. 인풋박스에 준비물이름을 작성하고 버튼을 누르면 버튼 박스 아래 리스트에 추가된다. 추가된 아이템은 각기 아이템 이름 오른편에 있는 X를 누르면 리스트에서 삭제된다. 어려울거 없다. 먼저 HTML로 뼈대를 잡자. 여행 준비물 점검 목록 추가 간단하게 h2 헤더하나 두고 준비물이름을 작성 받을 인풋박스와 리스트에 더해줄 버튼, 그리고 리스트가 출력될 자리를 설정했다. 스크립트 오픈 let cnt = 0; let itemNm = ""; let arr = []; 사용할 전역변수들을 선언한다. 사실 처음부터 세개를 모두 선언한건 아니고, 알고리즘을 짜고 시행착오를 거치며 필요한 변수를 추가하기도 했다. document.getElementById("ite..

자바로도 구성해본 야구게임이다. 이하는 규칙이다; 1) 컴퓨터가 0~9 사이의 중복되지 않는 정수 3개를 랜덤으로 출제하면 플레이어가 맞추는 게임 2) 플레이어가 입력한 숫자와 컴퓨터의 출제 숫자의 수, 자리수가 동일하면 1 Strike 3) 입력한 숫자는 출제 숫자에 포함되어 있으나 자리수가 동일하지 않으면 1 Ball 4) 숫자가 전혀 포함되어 있지 않으면 Out 5) 3 Strike는 성공 게임 시작 숫자 추측하기: 결과 확인 html 태그를 먼저 자리잡아준다. 컴퓨터가 숫자를 생성하게 해줄 게임시작 버튼을 위치시키고 플레이어거 숫자를 입력할 input 박스, 결과를 확인할 버튼, 게임시작에 대한 피드백을 표시할 위치, 결과의 위치, 그리고 재미로 넣을 이미지의 위치 태그까지 작성해줬다. 이제 스크..

그동안 공부한걸 좀 활용해보자. 이번에 만들어볼건 조금 복잡하다. 먼저 input 박스에 숫자를 입력하고 버튼을 누르면 이름, html, css, js 과목 input 박스들이 입력된 숫자만큼 나타나고, 각 박스에 데이터를 넣고 버튼을 누르면 이름별 각 과목의 점수, 총점, 평균을 테이블로 출력할 것이다. 먼저 html 태그를 잡아주자. 인원제출 결과보기 사람 수를 기입할 input 박스를 첫줄에 작성 기입한 사람 수를 제출할 버튼이 두번째 기입된 이름과 점수들을 테이블로 띄울 버튼이 세번째줄에 있다. 이름과 점수를 기입할 input 박스들은 네번째줄에 뜰 것이다. 열자 스크립트. let name = ''; let html = 0; let css = 0; let js = 0; let cnt = 0; 사용..

CSS3부터는 애니메이션 기능도 사용할 수 있다. 지원하지 않는 일부 브라우저도 있지만 통상 점유율이 있는 브라우저들은 모두 지원된다. 먼저 키프레임을 통해 애니메이션을 등록한다. 시간비율은 0~100%로 작성한다. 애니메이션 동작의 1사이클 시간 내에서 해당 동작 시간이 차지하게되는 시간을 퍼센티지로 작성해주는 것이다. @keyframes [애니메이션명]{ 시간비율%{ 스타일; } 시간비율%{ 스타일; } } 의 형식으로 작성하면 된다. 적용시 사용가능한 속성들이다. - animation-name: 동작시킬 애니메이션의 이름 - animation-duration: 애니메이션 동작 시간 - animation-iteration: 애니메이션 반복 횟수. 숫자 또는 infinite(무한) 가능 - animat..

text-indent : 들여쓰기 길이 text-align : 정렬. left, right, center, justify(양쪽 정렬) text-decoration : 줄 긋기 - none - underline - overline - line-through font 속성: 글자모양, 크기, 속성, 굵기 font-size font-style font-weight font-family : 글자체를 여러개 지정 - 지정하려는 폰트들을 ,로 나열 - 한글폰트의 경우 한글이름과 영어이름을 같이 사용 - 마지막에 기본형 serif - 폰트 이름에 띄어쓰기가 있는 경우 큰따옴표로 묶어야함 test-overflow: ellipsis; 텍스트가 지정범위를 넘어갔을 때 white-space: nowrap : 한줄로 처리 h..

color: 글자색 background-color: 배경색 border-color: 테두리색 색상 지정 방법 - 이미 지정된 이름을 사용하는 방법: red, blue, green 등 - 16진수의 색상코드를 이용하는 방법: #ff0000 같은 포맷 - RGB코드를 사용하는 방법: rgb(255,0,0) - RGBA코드를 사용하는 방법: a는 투명도이며, 0~1사이의 값을 가진다. RGBA(255,0,0, 0.4) 간단하다. 연습삼아서 n모사의 유명한 검색창을 모방해서 만들어보자. 이하는 각 라인에 대한 설명이다. 61. 안의 내용은 조건에 따라 서버로 전송된다. 62. 품고있는 내용은 box라는 클래스 요소이다. 63. 품고있는 내용은 left라는 클래스 요소이다. 64. "검색어를 입력하시오"라는 메세..

HTML이 페이지의 기본 스트럭쳐라면 CSS는 거기에 스타일을 입혀주는 시트언어이다. 캡쳐된 이미지는 내가 연습삼아 HTML만으로 만든 페이지이다. 화려한 웹사이트들에 익숙한 요즘의 눈이 아니라 20년 전에도 이 정도는 제대로된 페이지라고 하기 힘들었다. 조금 낫지 않은가. 물론 CSS와 자바스크립트를 쓰기에 따라 얼마든지 더 멋지게 꾸며질 수 있다. CSS 스타일은 html 도큐먼트 내의 head 안에 style 태그를 이용하여 넣어줄 수도 있고, 별도의 파일로 만들고나서 html 도큐먼트 내에서 호출해서 사용할 수도 있다. 별도 파일을 만들어서 html 도큐먼트로 link 시키는 것이 일반적이고 권장된다. CSS의 기본단위 px: 고정된 픽셀 단위 pt: 포인트(1/72인치) pc: 피카소(1/6인치..