코딩항해기

Ajax (Asynchronous JavaScript and XML) JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 과거에는 XML로 데이터를 전달했기 때문에 XML로 정의되어있지만, 요즘에는 JSON을 주로 사용한다. (태그로 이뤄진 xml과 달리 가독성도 높고 데이터도 더 가볍다) HttpRequest를 이용해 페이지를 새로 가져오지 않고도 페이지 일부를 변경할 수 있도록 자바 스크립트를 통해 데이터만을 별도로 요청하거나 전달하는 기술이다.  HTTP 프로토콜을 이용한 비동기 통신이며 브라우저는 정적 HTML 파일과 CSS파일, 데이터를 어떻게 요청하면 되는지를 설명한 javascript를 통해 HTML,CSS를 이용해 골격을 먼저 형성하고 ajax 실행 부가 담긴 javascr..

자바스크립트의 호이스팅코드에서 변수와 함수 선언이 실제 코드 작성 위치와 관계없이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 특징이다. 이는 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수의 선언을 메모리에 미리 할당하기 때문에 발생한다. 다만, 변수와 함수 선언 방식에 따라 호이스팅의 동작 방식이 다르다. 변수 호이스팅변수 호이스팅은 변수 선언이 스코프의 최상단으로 끌어올려지는 것이다. var, let, const 세 가지 변수 선언 방식이 있는데, 각기 다른 호이스팅 동작 방식을 가지고 있다. var로 선언한 변수var로 선언된 변수는 선언만 호이스팅되고, 초기화(할당)는 호이스팅되지 않는다. 이로 인해 선언 전에 해당 변수를 참조하면 undefined가 반환된다. console.log(m..

텍스트 정렬 (Text Alignment)텍스트나 인라인 요소의 수평 정렬을 지정한다. text-align 속성 left 왼쪽 정렬 (기본값) right 오른쪽 정렬 center 중앙 정렬 justify 양쪽 정렬   수직 정렬 (Vertical Alignment)인라인 또는 테이블 셀 요소의 수직 정렬을 지정한다.  vertical-align 속성 baseline 기준선 정렬 (기본값) top 상단 정렬 middle 중앙 정렬 bottom 하단 정렬    플렉스박스(Flexbox) 정렬 display: flex : 부모 요소를 플렉스 컨테이너로 만든다. flex 의  justify-content (주 축(main axis) 방향으로의 정렬) 주요 속성 flex-start 시작..

자바에서 콘솔창에 매개변수로 받은 값을 출력하기 위해서는 System.out.print();System.out.println();System.out.printf();등을 사용하지만 자바 스크립트에서는 syso가 통하지 않는다. 자바스크립트에서 콘솔창에 출력하기 위해서는 콘솔로그를 사용하게 된다.console.log(); 자바의 syso사용과 동일하지만 막상 실행해보면 콘솔창에 뜨지 않는다.왜냐하면, 자바스크립트의 콘솔창은 웹에 있기 때문이다. 해당 웹 페이지에서 f12(개발자도구)를 열어 console(콘솔)창을 확인하면 인자로 받은 값이 뜨는 것을 확인할 수 있다.각종 에러 문구도 해당 웹 콘솔창에서 확인할 수 있다. ' '(싱글쿼트) " "(더블쿼트) ` `(백틱) console.log()외에도 가능..

자바스크립트 Java Script객체 기반의 스크립트 언어로, HTML으로는 웹의 내용을 작성하고,CSS으로는 웹 디자인을 하고, Java Script로는 웹의 동작(사용자 입력처리, 웹 어플리케이션 작성 등 웹페이지의 동적 변화)을 구현하는 인터프리터 언어다.  Java 와 Java Script자바와 자바스크립트는 오버로딩과 오버라이딩처럼 이름이 비슷하지만 전혀 관계가 없다. JavaJava Script언어컴파일 언어인터프리터 언어타입 검사타임 검사 엄격타입을 명시하지 않음기반클래스 기반의 객체 지향 언어프로토 타입 기반의 객체 지향 언어  태그 style 태크 (CSS) 처럼 태그 안에 바로 작성할 수도 있고, 외부 js 파일을 불러올 수도 있다.HEAD 태그 안에 존재해야하는 style 태그와 달리..

시멘틱 태그  Semantic Tag 시멘틱 태그는 HTML5에서 도입된 태그로, 문서의 구조와 의미를 명확히 하기 위해 사용된다. 주요 시멘틱 태그에는 , , , , , 등이 있으며, 각각의 태그는 고유한 의미와 용도를 가지고 있다.    시멘틱 태그 장점 div로만 이루어진 코드는 가독성이 낮아 쉽게 원하는 부분을 찾기 어렵다.반면 시멘틱 태그를 사용한 코드는 가독성이 높아 원하는 부분을 상대적으로 쉽게 찾을 수 있다.시멘틱 태그가 가진 고유한 기능을 통해 번거로운 작업을 건너 뛸 수도 있다.또한 시맨틱 태그는 관련 키워드와 문구에 대해 웹페이지를 최적화하는데 도움이 되며, 검색엔진에 풍부하고 구조화된 데이터를 제공할 수 있다.  시멘틱 태그 정리(시멘틱 태그 관련 사이트)예시와 설명이 자세하므로 ..

파비콘은 웹페이지 탭의 아이콘을 의미한다. (주황색 네모친 지구본 모양 부분) 아무것도 지정하지 않은 모습이 이미지의 지구본 모습이고, link 태그를 통해 네이버처럼 별도의 아이콘으로 변경할 수 있다.   link 태그는 head 태그 안에 위치해야하며, rel속성에는 icon, href 속성에는 icon의 경로가 들어가야한다.  link 태그를 넣어주고나면 파비콘이 지정한 이미지 파일로 변경된 것을 확인할 수 있다.(ico, png 등 다양한 확장자 가능)