본문 바로가기

전체

 (219)
[JavaScript] JavaScript 명령 소스 제공 / onclick 이벤트 / 함수 호출 모든 웹문서에 공통적으로 제공해야하는 JavaScript 명령을 소스로 제공해 줄 수 있다. 01_hello.js alert("JavaScript Source File에 작성된 자바스크립트 명령"); script 태그를 이용해 JavaScript Source File을 불러와 HTML 문서에 포함시킬 수 있다. →사이트를 구성하는 모든 웹문서에 동일한 기능(함수)을 제공하기 위해 사용한다. button 태그의 type 속성값을 [button]으로 설정하면 버튼만 출력되어, 이벤트가 발생되지 않는다. 버튼을 눌러보세요. html 태그의 onXXX 속성은 이벤트 리스너 속성으로, 이벤트 처리 명령을 설정값으로 설정할 수 있다. 이때, 이벤트 처리 명령을 JavaScript를 통해 만든다. 버튼을 눌러보세요...
[JavaScript] 자바스크립트란? / window.alert() / console.log() 자바스크립트(JavaScript) 자바스크립트는 웹페이지에서 발생된 이벤트를 처리하기 위한 기능을 제공하는 스크립트 프로그래밍 언어이다. 여기서 스크립트 프로그래밍 언어란 컴파일을 하지 않아도 동적으로 실행될 수 있는 프로그램 언어를 뜻한다. 자바스크립트는 클라이언트에서 해석되어 실행되며, 자바스크립트를 이용해 동적인 페이지를 만들 수 있다. 자바스크립트 표준 규약은 ES15(ECMAScript15)까지 구현되었으나 일반적으로 ES6(ECMAScript6)을 이용하여 작성한다. 태그로 종료된 곳까지를 스크립트 영역이라고 한다. 자바스크립트의 주석문은 자바와 동일하다. //주석처리 /* 주석처리 */ 자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리된다. 따라서 명령 마지막에 ; 생략이 ..
[CSS] 애니메이션 관련 스타일 속성 / 반응형 웹디자인 애니메이션 관련 스타일 속성 animation은 animation-* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes로 구성되어 있다. @keyframes : 애니메이션의 이름과 상태에 따른 스타일 변화를 정의하기 위한 시스템 속성 → 상태(백분율 또는 키워드 - from, to)에 따른 CSS 스타일을 정의하여 애니메이션 효과를 제공할 수 있다. → 반드시 시작상태(from)와 종료상태(to)를 포함하여 2개 이상의 상태를 작성해주어야 한다. /* 시작상태 */ from { top: 0; left: 10px; background: url("images/f1.png") no-repeat center; } /* 종료상태 */ to { top: 0; left: 600px; backgroun..
[CSS] 트렌지션 효과(Transition Effect) 트렌지션 효과(Transition Effect) : 시간 경과에 따른 박스모델의 스타일 변경 기능 제공 transition-property : 트렌지션 효과를 제공할 스타일을 속성값으로 설정 transition-duration : 트렌지션 효과의 제공 시간(효과가 나타나는데 걸리는 시간)을 속성값으로 설정 transition-timing-function : 트렌지션 효과의 제공 속도를 속성값으로 설정 → 속성값 ease(기본값) : 느리게 시작하여 점점 빨라졌다 느려지면서 종료 linear : 시작부터 종료까지 일정하게 ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 서서히 ease-out : 빠르게 시작해서 점점 느려짐 ease-in-out : 느리게 시작하여 빨라지다가 느려지면서..
[CSS] 테이블 관련 스타일 속성 / 박스모델 변형 관련 스타일 속성 테이블 관련 스타일 속성 테이블에 있는 외곽선이 중첩될 경우, 병합시키기 위해서 border-collapse 속성을 사용한다. html 테이블 관련 스타일 속성 번호이름주소 1000홍길동서울시 강남구 역삼동 79-11 역삼타워 2000임꺽정부산시 사하구 3000전우치광주시 광산구 4000일지매수원시 팔달구 5000장길산인천시 월미구 css 이처럼 테이블에 있는 외곽선이 중첩될 경우, 외곽선을 병합시키기 위해 border-collapse 속성을 사용한다. border-collapse : 박스모델의 외곽선 중첩 관련 스타일 속성 → 속성값 : seperate(중첩된 외곽선 구분 - 기본값), collapse(중첩된 외곽선 병합) 셀(Cell)의 폭은 태그내용에 의해 자동으로 설정되는데, 이처럼 태그내용에 따..
[CSS] 박스모델(BoxModel) 관련 속성 박스모델(BoxModel) : 문장 또는 이미지를 출력하기 위해 태그를 사용하여 생성한 사각형 모양의 영역 margin : 박스모델과 박스모델 간격 관련 스타일 속성 테두리와 이웃하는 요소 사이의 간격이다. 마진은 눈에 보이지 않는다. → margin-top, margin-right, margin-bottom, margin-left 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) border :내용와 패딩 주변을 감싸는 테두리 border-style : 박스모델 외곽선의 모양 관련 스타일 속성 → border-style-top,border-style-right, border-style-bottom, border-style-left 속성값 : nono(기본), solid(실선), dotte..
[CSS] 배경 관련 스타일 속성 배경 관련 스타일 속성 background-color : 배경색 관련 스타일 속성 - 색 관련 속성값 배경 관련 스타일 속성 배경색을 설정해 보세요. 번호이름주소 1000홍길동서울시 강남구 2000임꺽정부산시 사하구 3000전우치수원시 팔달구 4000일지매부천시 원미구 5000장길산인천시 남동구 background-image 배경 이미지 관련 스타일 속성 속성값 : url 함수를 사용하여 이미지 파일의 URL 주소 설정 → 배경 이미지가 박스모델의 폭 또는 높이보다 작은 경우 가로 방향(X) 또는 새로 방향(Y)으로 이미지가 반복 출력된다. background-repeat 배경 이미지의 반복관 관련된 스타일 속성 속성값 : repeat(기본), repeat-x, repeat-y, no-repeat 배경 ..
[CSS] 글자, 공백, 문장 관련 스타일 속성 글꼴 관련 스타일 속성 font-family : 글꼴 관련 스타일 속성 - 글꼴을 속성값으로 설정한다. → 글꼴은 나열이 가능하며, 순차적으로 적용된다. font-family 속성이 생략되거나 속성값으로 설정된 글꼴이 없는 경우에는 클라이언트 플랫폼(OS)의 기본 글꼴을 사용한다. 때문에 클라이언트마다 다른 글꼴이 사용되어 출력된다는 문제점이 발생한다. CSS 글꼴 관련 스타일 속성 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 브라우저에 출력될 아주 중요한 내용입니다. 웹폰트(WebFont) 웹서버에 저장된 글꼴파일을 클라이언트에게 제공하여 사용하는 기능 웹폰트는 방문자의 로컬 ..

티스토리툴바