🗒️ 2017/05/17 (15)

1. 2017.05.17 요소의 참조

   * 참조 방법 1) id 속성 값으로 검색하는 방법 - document.getElementById() 함수(메서드)를 사용하면 요소의 id 속성을 바탕으로 요소의 오브젝트를 참조할 수 있음. - getElementById()는 document 오브젝트가 갖고 있는 메서드임. document.getElementById("ID명") 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... 사과 // innerHTML 프로퍼티로 참조할 수 있는 문자열 오렌지 포도 var a = document.getElementById("apple"); document.write(a.innerHTML + "는" + a.id); Colored by Color Scripter cs - '.'(피리어드)를 붙여 작성..
2. 2017.05.17 DOM이란?

   * JavaScript의 오브젝트- JavaScript에서는 OS나 웹 브라우저의 구성 요소, HTML 문서 등과 같은 것을 오브젝트라는 단위로 취급함. (이를 '오브젝트 지향'이라고 함.)- HTML의 요소도 JavaScript에서는 오브젝트로 취급함.- 오브젝트에는 일반적으로 데이터를 나타내는 프로퍼티(property)와 행동을 나타내는 메서드(method)가 포함되어 있음. * DOM- DOM(Document Object Model)이란, HTML 문서를 태그나 속성의 계층 구조(트리 구조)로 간주하여 참조하는 개념.- 이 구조를 'DOM 트리'라고 함. * 웹 브라우저의 오브젝트- 트리 구조는 웹 브라우저에 따라 다소 다를 수 있음. 내용 출처 : HTML5가 보이는 그림책 (ANK Co., Lt..
3. 2017.05.17 JavaScript란?

   * JavaScript- JavaScript란. HTML파일에 심어 넣을 수 있는 스크립트 언어를 말함.- 웹 사이트와 통신을 하지 않아도 사용자 조작 등으로 글자색이나 배경색을 변경하거나 웹 페이지를 전환할 수 있음. (색 변경, 일정 시간 후에 페이지를 전환, 메시지 상자를 표시, 드롭다운 메뉴를 만듦 등)- Java와 JavaScript는 문법만 비슷할 뿐, 별개의 언어임에 주의! [스크립트 언어]- JavaScript 코드(스크립트)가 들어간 HTML 파일을 웹 브라우저에서 읽어 들이면 JavaScript가 해석되어 그대로 실행됨.- 모든 스크립트가 항상 화면에 실행 결과가 표시되는 것은 아님. * JavaScript의 예 123456789101112131415161718JavaScript 예제 ..
4. 2017.05.17 표시/배치 (Display/Placement)

   * 표시와 배치.myview {position: relative;top: -1px;z-index: auto;visibility: visible;display: inline;} 1) position 프로퍼티- 배치 방법을 지정함static : 일반 배치 // 초기값relative : 일반 배치에 대한 상대 위치로 배치absolute : 이 요소를 포함하는 블럭 내의 절대 위치로 배치fixed : 창 안의 절대 위치로 배치 2) top 프로퍼티(상) / bottom 프로퍼티(하) / left 프로퍼티(좌) / right 프로퍼티(우)- 요소의 위치를 지정함.auto(자동) // 초기값또는 %나 px로 지정. (position이나 static인 경우는 무시됨.) 3) z-index 프로퍼티auto(자동) //..
5. 2017.05.17 배경/리스트 (Background/List)

   * 배경 이미지 저장하기- 웹 페이지나 테이블의 셀에 배경 이미지를 넣을 수 있음. .mybg {background-image: url("wall.png");background-repeat: no-repeat;background-attachment: scroll;background-position: center center;} 1) background-image 프로퍼티- 배경 이미지를 지정함.- http로 시작하는 절대 URL이나 CSS의 상대 URL로 지정.- 이미지가 없을 때는 none을 지정. 2) background-repeat 프로퍼티- 반복할 방향을 지정함.no-repeat : 반복 없음repeat : 가로 세로로 반복repeat-x : 가로로 반복repeat-y : 세로로 반복 3) bac..
6. 2017.05.17 박스 (Box)

   - CSS에서 중요한 개념 중 하나로 박스 모델이라는 것이 있음.- 모든 요소는 '박스'라 불리는 사각 틀을 갖고 있음. * 박스의 폭과 높이- 박스의 폭과 높이를 지정하려면 width와 height 프로퍼티를 사용해야 함..mybox {width: 200px;height: 100px;} 1) height 프로퍼티- 박스의 높이를 지정함.auto(자동) // 초기값또는 %나 px로 지정 2) width 프로퍼티- 박스의 폭을 지정함.auto(자동) // 초기값또는 %나 px로 지정 * 여백, 패딩, 테두리- 값을 하나만 지정하면 상하좌우에 동일한 값이 지정됨.- 스페이스로 구분하여 값을 4개 지정하면 상, 하, 좌, 우순으로 지정한 것이 됨. 프로퍼티명 의미 값 margin 여백의 폭 %나 px로 지정하..
7. 2017.05.17 색/텍스트 (Color/Text)

   * 적용할 범위 지정하기 - style 속성으로 지정하는 경우를 제외하고 CSS는 셀럭터로 적용 대성할 지정함. 방법 서식 작성 예 태그에서 지정하기 태그명 { } span{font-size:large;} 태그와 글래스명에서 지정하기 태그명.클래스명{ } div.group1{background-color:red;} 클래스명에서 지정하기 클래스명{ } .group1{text-align:right;} id에서 지정하기 #id명{ } #code1{color:blue;} 여러 요소에 적용하기 태그명1.태그명2{ } span, div{font-size:large;} 모든 요소에 적용하기 *{ } *{background-color:red;} * 색 변경하기 - 다음 프로퍼티를 사용하면 색을 지정할 수 있음. .my..
8. 2017.05.17 CSS란?

   * CSS란?- CSS(Cascading Style Sheets)는 웹 페이지에서 디자인이나 레이아웃과 같은 문서의 모양(스타일)에 관한 부분을 지정하기 위한 장치를 의미함.- 현재 웹 페이지에서는 문서의 내용이나 의미 부여에 관해서는 HTML에서, 장식에 관해서는 CSS에서 한다는 개념이 일반적임. * CSS를 작성하는 장소- CSS를 작성하는 방법에는 크게 세 가지의 종류가 있음. 1) style 속성으로 지정하는 방법- HTML 태그 안에 style 속성을 지정하여 요소에 스타일을 적용함. CSS를 적용했습니다. 2) style 요소를 사용하여 동일한 파일 안에서 지정하는 방법- HTML 파일의 head 요소 안에 style 요소를 넣어 스타일을 지정할 수 있음.- 여러 개의 속성에 스타일을 적용할..
9. 2017.05.17 XHTML

   * XML이란?- XML이란, HTML과 비슷한 마크업 언어의 일종으로, HTML처럼 웹 페이지를 표시하는 것이 아니라 다양한 데이터를 취급하는 데 널리 사용됨.- 또한 HTML보다 규칙이 엄격하여 확장성이 뛰어남.- HTML은 정해진 태그를 사용하여 웹 페이지를 나타냄.- XML은 작성자가 자유롭게 이름 붙인 태그를 사용하여 범용적인 데이터를 나타냄. * XHTML이란?- XML의 작성 규칙을 HTML에 도입하여 HTML의 장점과 XML의 장점을 조합한 마크업 언어. * XHTML의 작성 규칙- XHTML은 HTML과 높은 호환성을 갖고 있지만 작성 방법에 있어서는 몇 가지 차이가 있음. 1) 요소와 속성은 소문자로 작성함.그림책에 대해 (O)그림책에 대해 (X) // HTML에서는 요소와 속성의 대소..
10. 2017.05.17 Git 명령어 목록

    - Git은 다양한 명령어를 지원함. - 구글에서 'git cheat sheet' 등의 검색어로 검색하면 많이 찾을 수 있음. - Git은 파일을 세 가지 작업 영역으로 관리함. 1) Working Directory : 저장소가 추적 중인 파일들이 위치하는 영역 2) Staging Area : 커밋할 준비가 된(staged) 파일들이 위치하는 영역 3) Repository : 커밋되어 버전을 관리하는 파일들이 위치하는 영역. 이 영역의 파일이 수정되면 Working Directory 영역으로 이동하게 됨. *설정하기 명령어 설명 git config --global user.name "이름" Git에서 커밋할 때 기록할 이름을 설정함. git config --global user.email "이메일" Gi..
11. 2017.05.17 메타 요소

    - 메타 요소를 지정하면 HTML 파일에 정보를 부여할 수 있음. * 메타 정보 - HTML 파일 안에는 메타 정보라는, 화면에는 표시되지 않는 정보를 심어 넣을 수 있음. - 메타 정보에는 웹 페이지 언어의 종류 등을 저장하는데, 이는 웹 브라우저나 검색 엔진용 정보로 이용됨. * meta 태그 - meta 태그는 메타 정보를 지정하기 위한 태그. - 속성의 종류에 따라 HTML 문서의 내용이나 문자 코드, 검색 엔진용 키워드 등을 지정할 수 있음. - meta 요소는 해더()안에 작성함. - name 속성을 지정하면 작성자의 정보나 키워드 같은 문서 정보를 심어 넣을 수 있음. - http-equiv 속성을 지정하면 언어나 스타일 같은 정보를 심어 넣을 수 있음. ... ... * 메타 정보의 종류 ..
12. 2017.05.17 요소의 지정

    * id와 class - 속성 중에는 글로벌 속성이라는 거의 모든 요소에 지정할 수 있는 것이 있음. - 그중에서도 중요한 것이 'id 속성'과 'class 속성' - 이러한 것은 스타일시트나 JavaScript와의 연결에 사용됨. * id 속성 - id 속성은 요소에 식별자를 지정함. - 하나의 도큐먼트 안에는 동일한 이름의 id를 지정할 수 없음. * class 속성 - class 속성은 요소에 클래스명을 지정함. - 하나의 도큐먼트 안에 동일한 클래스를 여러 개 지정할 수 있음. * 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 그림책 소개 p.text { color: #999999; } #header { ..
13. 2017.05.17 폼 (Form)

    - 폼은 데이터를 선택하거나 입력하기 위한 부품. - 폼의 내용은 form 요소 안에 작성함. action 속성을 사용하여 송신할 곳의 URL을 지정하거나 method 속성을 사용하여 통신 방법(GET 또는 POST)을 지정할 수 있음. 1) GET : 보내진 데이터는 URL의 일부(파라미터)로 주소 표시줄에 나타남. 2) POST : 보내진 데이터는 URL에 표시되지 않음. 긴 데이터를 보낼 때 적합함. 1 2 3 4 5 이름을 입력하세요. Colored by Color Scripter cs * type 속성의 종류 1) text : 텍스트 한 줄분의 입력 폼(텍스트 상자)을 나타냄. (type 속성을 직정하지 않는 경우는 이 형식이 됨.) maxlength 속성을 사용하여 최대 문자 수를 지정할 수 ..
14. 2017.05.17 table 태그

    태그 기능 표(테이블)를 작성함. 요소로 둘러싼 부분이 표기 됨. 표에 행을 추가함. 요소로 둘러싼 부분이 행이 됨. 표에 헤더(제목 행)가 되는 셀을 추가함. 요소로 둘러싼 부분이 셀의 제목이 됨. 표에 셀을 추가함. 요소로 둘러싼 부분이 셀의 내용이 됨. 표의 타이틀(캡션)을 나타냄. * table 태그에서 설정할 수 있는 속성 1) height : 테이블의 높이를 픽셀(도트 단위)로 지정함. 2) width : 테이블의 폭을 픽셀 또는 웹 브라우저의 창에 대한 비율(%)로 지정함. 3) cellspacing : 셀 간격을 픽셀로 지정함. 4) cellpadding : 셀의 여백을 픽셀로 지정함. 5) border : 표의 테두리 폭을 픽셀로 지정함. * td, th 태그에 설정할 수 있는 속성 1)..
15. 2017.05.17 기본 태그

    * 문장의 구분이나 줄바꿈 등에 사용되는 태그 태그 기능 작성 예 하이퍼링크를 추가함. href 속성을 사용하여 링크할 URL을 지정할 수 있음. 다른 페이지뿐만 아니라 매일 주소나 페이지 안의 다른 장소도 링크할 수 있음. 여기를 클릭 ~ 문장에 제목을 붙임. 숫자가 작을수록 큰 레벨을 가리킴. 그림책 단락을 나타냄. 달리 표시할 요소가 없는 경우에 사용하기를 권장함. HTML 태그란 줄바꿈을 나타냄. 줄을 바꿀 문장의 끝에 이라고 씀. 종료 태그 은 필요없음. 줄바꿈 합니다. 번호가 없는 항목 쓰기의 범위를 나타냄. 항목은 로 지정함. aaa bbb 번호가 붙은 항목 쓰기의 범위를 나타냄. 항목은 로 지정함. aaa bbb * 여러 개의 문장을 하나의 단위로 묶는 태그 태그 기능 작성 예 콘텐츠의 단..