Every step counts

자바스크립트의 조건문과 반복문도 자바의 그것들과 유사하다. - 조건문 if(조건절){실행문}; 으로 작성되며 조건절은 true나 false로 구분될 수 있어야한다. 다중조건문도 자바와 같이 if(조건절1){실행문1}else if(조건절2){실행문2}else{실행문3}의 형태로 작성 가능하다. switch문은 switch(변수 또는 식){ case 값1: 실행문; break; case 값2: 실행문; break; ... default: 구문; 로 작성한다. - 반복문 for, while, do~while문을 사용 가능하다. 역시 자바에서와 같은 형태로 작성된다. for(초기화 ; 조건식 ; 증감식){실행문}; while(조건식){실행문}; do {실행문1} while(조건식){실행문}; 으로 작성하면 된다..

자바스크립트에서도 데이터타입 string을 사용한다. string으로 정의된 문자열은 index 번호를 가지고 있다. 1. 명령어 - 문자열 일부 추출 substring(시작지점, 끝지점-1). slice(시작지점, 끝지점). substring과 같으나 음수 입력이 가능한 것이 특징이다. substr(시작지점, 시작지점부터의 개수). charAt(index) 해당 위치의 문자만 추출 - 대체 replace(기존 문자열, 새로운 문자열) 첫번째 대칭되는 문자열만 대체되며 대소문자가 구분된다. - 채우기 padStart(목표문자길이, 채울문자) 앞쪽에 채우기 padEnd(목표문자길이, 채울문자) 뒷쪽에 채우기 - 인덱스 indexOf(문자열, index from), lastIndexOf(문자열) 지정 문자열..

자바스크립트에서 객체란 상세 특징으로 표현된 식별할 수 있는 요소를 말한다. 객체의 지속성을 확보하기위해 주로 const로 선언된다. [자료형] 이름 = {속성명: 속성값, 속성명: 속성값 ...}으로 표현한다. 속성명은 같은 객체 내에서는 중복될 수 없다. 간단하게 활용해보자. dude라는 객체를 작성했다. 속성 중 자동차의 인트로 사항은 함수로 작성했다. 라인50은 자동차의 속성을 콘솔창에 출력해주는 것이고 라인51은 자동차의 속성을 리턴해주는 것이다. 테스트를 위해 콘솔에 출력해보자. 라인58은 intro라고만 작성했기에 intro 안에 있는 글이 그대로 출력되었다. 재밌는건 이벤트 객체인데, 이벤트 객체는 전역객체이며 모든 태그에 객체를 참조시킬 수 있다. 이런식의 사용이 가능하다.

자바스크립트에서 Function은 자바에서 메소드와 유사한 쓰임을 보인다. 너무 팡션? 사용 하지 마세요. JS에서는 많이 쓰인다. 펑션은 특정기능을 수행하기 위한 코드의 집합이다. 메소드처럼 호출되어야 작동한다. 일반적으로 function 키워드를 사용하여 선언된다. function [함수명](매개변수){기능 로직}의 구조로 작성되며 return 키워드로 함수의 종료시점을 지정할 수 있다. 바로 활용해보자. herName을 매개변수로 받는 callHerName이라는 함수를 만들어줬다. 일단 라인60에서 her는 김민수로 선언해줬고, 63에서는 차후 테스트를 위해 hisName을 홍길동으로 선언했다. 정상적으로 동작한다면 콘솔창에 ur name: 매개변수 ur another name: 김민수 가 출력이 ..

자바스크립트. 이름과는 달리 자바와는 별 관련이 없다. HTML, CSS와 함께 웹페이지를 구성하는 요소 중 하나인데, 클라이언트 레벨에서 웹페이지가 동작할 수 있게 해준다. 이하는 자바스크립트의 기본적인 사용법이다. - 작성 내에 작성한다. [파일이름].js라는 파일을 따로 만들어 내부에 코드를 작성하고 script src="" 경로로 불러온다. head 태그 내부에 작성할 수도 있다. body 태그 내부에도 작성 가능하다. console.log('내용'(쌍따옴표도 가능)); 으로 브라우저 콘솔에 메세지를 띄울 수 있다. - 변수 변수를 선언할 때는 var, let, const를 사용한다. var변수는 재선언과 재할당이 가능하다. 일종의 덮어쓰기가 가능하다는 말. let은 재할당은 가능하지만 재선언은 ..

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인치..

table은 일종의 표를 만들 때 사용한다. 다른 태그와 조합해서 만드는데, tr: 한 행을 의미 td/th: 한 열을 의미한다. td: 왼쪽 정렬, 일반 글씨(일반 내용) th: 가운데 정렬, 굵은 글씨(제목 또는 머리글) colspan 열 통합 rowspan 행 통합 속성; - border 테이블의 외곽선 표기. 두께 설정 가능 - bordercolor 외곽선의 색 - width 테이블의 너비 굳이 저런 표가 아니더라도 테이블을 사용하면 요소간 배치를 좀 더 깔끔하게 잡아줄 수 있는데,