Study Record

변수변수란 데이터를 넣어두는 그릇이다. 스크립트 중간에 변수에 담긴 데이터 값이 바뀌어도 상관없다.   변수 선언하기 - var 명령어변수를 이용하기 위해서는 미리 변수를 선언해야한다. 선언이란, 변수의 이름을 JavaScript 에 등록하고 값을 넣어두기 위한 영역을 메모리상에 확보하는 것을 말한다. 변수 선언은 변수의 이름과 그 변수 들어갈 초기값을 정의할 수 있다. 초기값은 필수가 아니다.var 변수명 = [초기값]; 변수 선언 예시) var a;var a, b;var c = 10;var d = 'Hello, World'; 변수명만 정의할 경우 undefined 가 자동으로 변수에 할당된다.  + 변수 선언은 임의JavaScript 에서 변수의 선언은 필수가 아니다. 왜냐하면 명시적으로 변수가 선언..

자바스크립트의 기본적인 표기   "안녕하세요, 자바스크립트!" 표기하기   Javascript 를 HTML 파일 안에 집어넣기Javascript 코드를 HTML 파일에 집어넣으려면     외부 스크립트와 인라인 스크립트를 같이 병용한경우, 즉 src 속성을 지정한 경우       Anchor 태그에 스크립트 집어넣기 (JavaScript 의사 프로토콜) 요소에 코드를 기술하는 것 외에 Anchor 태그에 herf 속성에 스크립트를 집어넣을 수 있다. 이러한 기법을 JavaScript 의사 프로토콜이라고 부른다.링크 클릭   자바스크립트 문장 규칙자바스크립트 코드는 일반적으로 하나이상의 문장으로 되어 있다. 문장에는 다음과 같은 규칙이 있다.  ㉮ 문장의 맨 끝에 세미콜론(;)을 붙인다.세미콜론을 생략해도..

CSS 포지셔닝과 주요 속성브라우저 화면 안에서 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 두 속성이 있다. 바로 float 속성과 position 속성이다. 이 속성들과 박스 모델의 마진, 패딩, 테두리 속성까지 포함해 전체적인 레이아웃이 완성된다. 같은 내용이라도 어떻게 배치함에 따라 완전 다른 사이트처럼 보여진다.   박스 너비 기준 정하기 - box-sizing 속성박스 모델을 배치하려면 우선 박스 모델의 너비를 알아야 한다. 모던 브라우저에서 박스 모델의 width 와 height 속성은 박스 모델 전체의 너비와 높이가 아니라 박스 모델 안에 있는 콘텐츠 부분의 너비와 높이이다. (인터넷 익스플로러 8 제외) 웹 문서에서 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야 하는데 wid..

CSS 와 박스 모델웹에서 레이아웃을 간단히 말하면 여러 박스 모델들의 조합이라고 할 수 있다. CSS 박스 모델이란 말 그대로 박스 형태의 모델이다.   블록 레벨 요소와 인라인 레벨 요소박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 먼저, 블록 레벨(block-level) 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. (ex. , ) 인라인 레벨(inline-level) 요소는 줄을 차지하지 않는 요소로 화면에 표시되는 콘텐..

그라데이션과 브라우저 접두사색상 그라데이션을 사용해 배경을 꾸밀 수 있다. 선형 그라데이션과 원형 그라데이션 총 두가지를 설명하려고 한다. 선형과 원형 그라데이션은 CSS3 에서 처음으로 소개된 기능이지만 구문이 복잡하고 브라우저 사이의 지원 방법이 달라 사용하기 어려웠다.  현재의 표준화된 구문 외에도 그라데이션을 지원하지 않는 브라우저와 접두사를 붙여 사용하는 브라우저까지 고려해야할 필요가 있다.접두사브라우저 버전-webkit-사파리 5.1~6.0-moz-파이어폭스 3.6~15-o-오페라 11.1~12.0 예시).grad { background: blue; /* 그라데이션을 지원하지 않는 브라우저용 */ background: -webkit-linear-gradient(left top..

웹에서 색상 표현하기웹에서 색상을 표현하는 방법은 16진수 표기법, rgba와 rgba 표기법, hsl과 hsla 표기법, 색상 이름 표기법이 있다.   16진수 표기법#ff0000 처럼 # 기호 다음에 6자리의 16진수로 표시하는 방법이 가장 기본적으로 색을 표현하는 방법이다.    rgb와 rgba 표기법16진수 표기법 다음으로 rgb 와 rgba 표기법이 있다. rgba 의 a(alpha)는 불투명도 값을 나타내는 것으로 1은 완전히 불투명한 것이고 0.9 나 0.8 처럼 숫자가 작아질수록 투명해지다가 0이 되면 완전히 투명해진다./* 기본형 */rgb(red 값, green 값, blue 값);rgba(red 값, green 값, blue 값, alpha 값);/* 예시 */color: rgb(2..

목록의 불릿과 번호 스타일 지정하기 - list-style-type 속성메뉴 항목이 목록과 링크를 결합한 형태이다. 목록과 링크를 만드는 속성에 대해서 알아보고자 한다. /* 기본형 */list-style-type: none | |    순서 없는 목록에서 불릿 모양 바꾸기 순서 없는 목록은 기본적으로 채운 원(disc)을 불릿으로 사용한다. list-style-type 속성의 여러 속성 값을 이용해 불릿을 바꿀 수 있다.none: 항목 앞에 붙는 불릿을 없앤다. 주로 네비게이션(메뉴)를 만들 때 불릿이 보이지 않게 사용한다.disc : 채운 원 모양의 불릿이다. 기본값이다.circle : 빈 원 모양의 불릿이다.square : 채운 사각형 모양의 불릿이다.  회사 소개 도서 사무실 ..

텍스트 스타일 텍스트 스타일은 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타일이다.   글자 색 지정하기 - color 속성웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때는 color 속성을 사용한다. 속성값은 16진수나 rgb(또는 rgba), hsl(또는 hsla), 색상이름으로 표기할 수 있다.h1 {color:rgb(0,200,0);} h2 {color:blue;} .accent {color:#ff0000;}   텍스트에 줄 표시하기/없애기 - text-decoration 속성decoration 속성을 이용하면 텍스트에 밑줄을 긋거나 취소선을 표시할 수 있다.h1 { text-decoration: underline; } /* 밑줄을 표시한다. */p { ..