본문 바로가기

분류 전체보기

 (223)
자바 스크립트(JavaScript) 기초 문법 - 연산자 자바 스크립트(JavaScript) 기초 문법 연산자 자바 스크립트에서의 연산자는 산술, 문자열 연결, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다. 1) 산술 연산자 산술연산자에는 +(덧셈), -(뺄셈), *(곱셈), /(나눗셈), %(나머지)가 있다. 연산을 하기 위해서는 연산 대상 데이터가 2개 있어야 한다. 나눗셈은 0으로 될 때까지 나눈 몫을 구하고, 나머지는 몫을 제외한 나머지를 구한다. 2) 문자열 연결 연산자 문자열 연결 연산자의 피연산자(연산 대상 데이터)가 문자형 데이터이다. 여러개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다. 숫자형과 문자형이 더해질 경우 숫자가 문자열로 치환되어 하나의 문자열로 반환된다. 문자열+문자열 = 하나의 문자열 (ex_ "hi"..
자바 스크립트(JavaScript) 기초 문법 - 선언문, 주석, 변수 (var, let, const 차이) 자바 스크립트(JavaScript) 기초 문법 자바스크립트 선언문 선언문은 자바스크립트 코드를 작성할 영역을 선언하는 부분이다. 자바스크립트 주석 자바스크립트 선언문 안에 주석처리는 아래와 같다. 보통 HTML내에 작성된 자바스크립트는 js파일을 따로 만들어 외부 스크립트 방식으로 사용을 한다. 자바스크립트 소스를 찾기 쉬울 뿐더러 관리가 원할해진다. 외부 스크립트 방식은 아래와 같은 코드를 추가하면 된다. 자바스크립트 변수(Variable) 변수는 변하는 데이터(값)을 저장할 수 있는 메모리 공간이다. 변수에는 데이터가 오직 한 개만 저장되며, 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워진다. 변수 선언 변수를 선언할 때는 var 키워드(또는 let 키워드)를 변수명 앞에 붙인다..
이클립스(Ecilipse) Dynamic Web Project 생성 및 구조 이클립스(Ecilipse) Dynamic Web Project Dynamic Web Project 생성 Dynamic Web Project는 웹을 만들 때 생성한다. Project name에서 프로젝트 이름을 설정하고, Target runtime에서 프로젝트를 실행할 서버를 확인한다. Source folders on build path와 Default output folder를 확인하고 next를 눌러준다. (가끔 Source folders에 이름이 없으면 Edit버튼으로 이름을 지정해준다. output folder도 동일) Context root는 프로젝트 이름으로 실행하면 실행된 웹 브라우저 url에 해당 프로젝트 이름이 먼저 오게 된다. Content directory는 작업폴더의 이름으로 웹 콘텐..
자바 스크립트(JavaScript), 자바와 자바스크립트의 차이점, 자바스크립트 작성 방식 (외부, 내부, 인라인) 자바 스크립트(JavaScript) 자바 스크립트는 동적인 웹페이지를 만들기 위해서 가장 많이 사용되는 자바 스크립트이다. 1995년 동적인 웹페이지를 만들기 위해서 네비게이터 웹브라우저를 만든 넷츠게이프사와 선마이크로 시스템사에서 공동으로 개발된 사용자 스크립트 언어이다. 자바와 달리 변수의 자료형을 선언할 필요가 없다. 변수에 저장되는 값에 의해서 자료형이 결정된다. 모든 명령어가 영문 대소문자를 구분한다. 이전의 자바스크립트는 클라이언트(사용자) 컴퓨터에서만 작동하는 언어였지만, 현재 노드(Node).js를 사용할 경우 백엔드 프로그램 언어와 같이 서버(server)에서도 작동한다. 자바와 자바스크립트의 차이점 특징 자바 언어 자바 스크립트 언어 종류 소스 파일을 컴파일 하여 실행하는 컴파일 언어 ..
CSS - 속성 float (div 수평정렬) CSS - 속성 float (div 수평정렬) float float 속성은 요소의 위치를 잡을 때 아주 중요한 역할을 하는 스타일 속성이다. float의 사전적 의미는 물위에 '떠있다'의 뜻을 가진다. 이미지와 텍스트를 함께 배치할 때 이 float 속성은 유용하다. 이미지에 float="left"속성을 주면 이미지는 왼쪽으로 배치되고 뒤따르는 텍스트는 이미지를 감싸며 배치된다. float된 요소는 부모 컨테이너의 가장 왼쪽이나 오른쪽으로 이동한다. float된 요소후에 추가되는 요소는 float 요소를 감싸면서 배치된다. float된 요소 이전에 추가된 요소는 float의 영향을 받지 않는다. float속성으로는 요소를 레이아웃의 왼쪽이나 오른쪽으로만 배치될 수 있다. 위쪽이나 아래쪽으로는 float할..
CSS - 속성 정리 (2) / CSS3 애니메이션 CSS - 속성 정리 (2) Position : static(기본값); => 요소가 순서대로 배치된다. 위치 지정이 필요 없다. absolute => 순서와 상관없이 브라우저 창 내에서 지정한 위치에 나타난다. relative => 직전 요소에 이어서 상대 위치에 배치된다. fixed => 현재 보이는 브라우저 화면 내에서 절대위치에 배치된다. 현재 보이는 브라우저 화면 내에서 항상 같은 위치에 나타난다. 화면을 스크롤 해도 같은 위치에 나타난다. ( 상담, 쪽지 등과 같은 항상 동일위치에 있어야 하는 창을 만들 때 많이 사용된다.) z-index : 여러개의 콘텐츠를 겹쳐서 배치할 때 앞뒤 순서를 결정해주는 속성이다. 큰 수를 지정할수록 앞쪽에 배치된다. 이 속성은 position이 absolute나 ..
CSS - 속성 정리 (1) / 타입 선택자 css CSS - 속성 정리(1) background-color : 배경색 background-image : 배경 이미지를 정의 background-repeat : 배경 이비지의 반복 여부를 지정 (repeat-x; => 수평방향 x축으로 반복 / repeat-y; => 수직방향 y축으로 반복) background-attachment : 배경 이미지가 고정 or 스크롤인지 지정 background-position : 배경 이미지 위치를 설정 background-size : 배경 이미지 크기를 지정 border:2px solid red; => 2 , solid , red 테두리 두께를 2픽셀, 실선, 테두리 선색을 빨강 (+border-top, border-bottom, border-left, border-rig..
CSS 스타일 시트 / CSS 선택자 문법 / CSS를 삽입하는 방법 (외부 스타일 시트방법, 내부 스타일 시트 방법, 인라인 스타일 시트방법) CSS 스타일 시트 CSS Style Sheet html 5 에서는 기존의 css1, css2 뿐만 아니라 css3까지도 완벽히 지원하는 것을 기본 목표로 한다. 기존의 css1, css2에서는 주로 텍스트, 폰트, 배경 및 색상, 목록, 박스 모델 등에 관련된 속성을 다루었다면, css3에서는 2D/3D 변환, 장면 전환, 애니메이션 등 더욱 다양한 스타일 지정 기능을 포함하고 있다. 스타일시트(Style sheet) 는 웹에서 작성한 문서에서 PC화면이나 모바일 단말기 화면에 출력될 외형 스타일을 좀 더 다양하면서 손쉽게 빠르게 적용하기 위하여 사용된다. 스타일시트를 사용하면 콘텐츠 내용과 디자인의 분리가 가능해진다는 점이 큰 장점이다. CSS로 디자인 요소를 별도로 작성하여 다수의 개발자가 동시에 ..

티스토리툴바