분류 전체보기 (40) 썸네일형 리스트형 간단한 JavaScript 코드 ● 산술 연산하기 실행 결과 산술 연산 뿐 아니라 대입 연산, 비교 연산, 증감 연산, 논리 연산 등 실행하고자 하는 코드를 document.write()에 작성하면 계산된 결과가 출력된다 ● document.write() 출력 명령문이며 괄호() 안에 내용을 넣는다 document.write("내용"); document.write() 안에 html 태그든 문자열을 적을 때는 이중 인용부호(" ")안에 적는데 이중 인용부호 안에 또 이중 인용부호를 넣을 수는 없다 그렇기 때문에 단일 인용부호와 함께 사용하거나 백슬래쉬()와 함께 사용한다 document.write("그녀는 '누구세요'라고 했습니다"); document.write('그녀는 "누구세요"라고 했습니다'); docu.. JavaScript란? ○ JavaScript 언어 JavaScript는 1995년 Netscape Communication Corporation 사에서 개발되고 Netscape Navigator 2.0 브라우저에서 최초로 탑재되어 웹 프로그래밍의 개념을 창시한 언어이다 현재는 모든 브라우저에서 실행되는 웹 범용 언어가 되었다 1. 자바 스크립트는 조각난 소스 코드 형태로 html 페이지에 내장된다 2. 자바 스크립트 소스 코드는 컴파일 과정 없이 브라우저 내부의 자바 스크립트 처리기(인터프리터)에 의해 처리된다 3. 자바 스크립트는 C언어 구조를 차용하고 단순화시켜 쉽게 배울 수 있다 ● 웹 페이지에서 자바 스크립트의 역할 웹 페이지는 html5 태그, CSS 스타일 시트, 자바 스크립트 프로그램의 3가지 코드가 결합되어 작.. CSS의 속성들(2) ○ CSS 고급활용 html 태그가 출력되는 모양은 항상 Box Model이다 웹 페이지를 작성하는데 필요한 고급 기술 배치 리스트 꾸미기 표 꾸미기 폼 꾸미기 애니메이션 등 동적 변화 만들기 ● 배치 display float position z-index overflow visibility ● display 박스 유형 제어 display 프로퍼티를 이용하면 디폴트 박스 유형을 무시하고 html 태그 박스 유형을 지정할 수 있다 display:inline -> 새 라인에서 시작하지 않는다 -> 옆에 다른 태그를 배치할 수 있다 -> width,height로 크기 조절이 불가능하다 -> 라인 안에 있다 -> 모든 박스 내에 배치 가능하다 -> margin-top, margin-bottom 조절이 불가능하다.. CSS의 속성들(1) ● text 속성 텍스트와 관련된 속성이다 color : 텍스트의 색상을 결정한다 direction : 텍스트가 써지는 방향을 설정한다 (ltr(left-to-right) => 왼쪽에서 오른쪽 방향으로, rtl(right-to-left) => 오른쪽에서 왼쪽 방향으로) letter-spacing : 텍스트 내에서 글자 사이의 간격을 설정한다 word-spacing : 텍스트 내에서 단어 사이의 간격을 설정한다 text-indent : 단락의 첫 줄에 들여쓰기를 할 지 안 할 지를 설정한다 (text-indent:5em => 5글자 들여쓰기. {em : 상위 요소의 크기를 가져와 그것의 배수를 적용한다}) text-align : 텍스트의 수평 방향 정렬을 설정. direction 속성과 상관없이 우선 적용.. HTML의 태그들(8) ○ CSS 파일 등 외부 파일 연결 ● 태그 외부의 문서를 연결시키는 태그이다 주로 CSS 파일 같은 스타일 시트 파일을 연결하거나, 웹 폰트를 사용할 때 폰트가 있는 주소로 연결시킬 수 있다 여러 개의 태그를 삽입할 수 있으며, 태그 안에 넣는다 link 태그의 속성 rel : 현재 문서와 연결 문서의 관계를 표시한다 href : 연결할 곳의 주소를 표시한다 type : 연결 문서의 MIME 유형을 표시한다(href 속성이 설정됐을 때만 사용한다) □ rel 속성의 값 stylesheet : 스타일 시트로 연결할 때 사용 alternate : 문서의 대안 버전(프린트나 번역 사이트)으로 연결할 때 사용 () author : 저작자로 연결할 때 사용 help : 도움말로 연결할 때 사용 license :.. CSS의 개념 ○ CSS ● CSS(Cascading Style Sheet) html 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다 CSS로 작성된 코드를 Style Sheet라고 부른다 ○ html에 CSS를 적용시키는 방법 ● Inline Style Sheet html 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법으로 우선 순위가 가장 높다 ex) 인라인 스타일 시트 해당 태그(p)가 선택자(Selector)가 되고, CSS 코드에는 속성(Property)과 값(Value)만 들어간다 선택자 : 무엇을 꾸밀지 정한다 속성 : 어떤 모양을 꾸밀지 정한다 값 : 어떻게 꾸밀지 정한다 => 속성과 값을 합쳐서 선언(declaration)이라고 한다 꾸미는 데 한계가 있으며, 재사용이 불가능하다.. HTML의 태그들(7) ● 태그 세부 사항을 선택적으로 보여주는 태그이다 요소는 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용되며, 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있다 이러한 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않는다 ● 태그 요약을 표시하는데 사용하는 태그이다 태그로 제공되는 세부사항에 대한 요약 또는 제목을 의미한다 "요약 - 세부"라는 관계를 제대로 전달하기 위해서는 태그 다음에 곧바로 태그가 이어져야 한다 실행 코드 summary 태그는 details 태그 바로 밑에 와야할까요? 네! 실행 결과 summary 태그는 details 태그 바로 밑에 와야할까요? 네! ● 태그 태그에서 사용하기 위한 옵션들의 리스트를 미리 .. HTML의 태그들(6) ● 태그 태그 사이의 내용을 가운데로 정렬시킨다 ○ IFrame ● 태그 인라인 프레임(Inline Frame)을 정의할 때 사용한다 태그 사이에는 이 태그를 지원하지 않는 브라우저를 위한 텍스트를 포함한다. 인라인 프레임은 현재 html 문서에 다른 문서를 포함시킬 때 사용하는데 현재 html 페이지 내에 내장 윈도우를 만들고 다른 html 페이지를 출력할 수 있다 iframe 태그의 형식 이전 1 2 3 4 5 다음
