웹프로그래밍 137

자주 사용하는 함수

안내문이나 경고문을 띄우는 alert() 함수 alert함수는 메시지와 OK버튼마을 가진 다이얼로그 박스를 보여주는 함수입니다. 사용방법alert(출력할 문자열) 경고문 함수 확인과 취소를 선택하는 함수 confirm 함수는 메시지와 OK/Cancel 버튼을 포함한 다이얼로그 박스를 보여주는 함수입니다.확인(OK)을 누르면 true를 반환하고 취소(Cancel)을 누르면 false를 반환합니다. 사용방법confirm(출력할 문자열) 확인을 눌렀을 때 취소를 눌렀을 때 확인을 클릭하심 취소를 클릭하심 경고문 함수 대화상자를 띄어주는 prompt() 함수 prompt 함수는 메시지와 입력 필드를 가진 다이얼로그 박스를 보여주는 함수입니다. 사용방법 prompt(문자열,초기값) 1을 입력했을 때 2를 입력했을..

웹프로그래밍 2017.05.30

CSS DOM(Document Object Model) 개념잡기

DOM 개념잡기 문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. 동적으로 문서의 내용, 구조, 스타일에 접근하고 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다. DOM구조는 대략적으로 아래와 비슷하다. 참조 사이트 위키백과사이트1W3C DOM사이트관련카페

Webkit이란?

웹킷(Webkit) 위키백과는 웹킷(webkit)을 웹브라우저 엔진이라고 정의하고 있습니다. "웹컨텐트" 또는 "웹렌더링", "엔진", "오픈소스"로 이루어져 있으며, 웹킷은 웹브라우저 이외에 캘린더, 위젯과 같은 애플리케이션에서도 활발히 사용하고 있다. 구조와 원리http://rtcc.hanyang.ac.kr/sitedata/2015_2_ISP/howbrowserswork_20150915.pdf Vsync 활용http://www.slideshare.net/deview/133-vsync발표자료발표자료2발표자료3

CSS - Position의 이해

position의 이해 포지션은 태그의 스타일을 지정하여 태그의 위치를 조절할 수 있습니다.정적(기본), 상대적, 화면 기준, 위치지정 CSS는 4가지의 위치 설정 방법이 존재한다.정적(static) 위치 설정 : 정상적인 흐름에 따른 배치이다.상대(relative) 위치 설정 : 정상적인 위치가 기준점이된다.절대(absolute) 위치 설정 : 컨테이너의 원점이 기준이된다.고정(fixed) 위치 설정 : 위도우의 원점이 기준이 된다. static HTML 정적인 배치 된 요소는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성의 영향을받지 않습니다. 위치가 정적 인 요소. 어떤 특별한 방법으로도 배치되지 않았습니다. 페이지의 정상적인 흐름에 따라 항상 배치됩니다. 이 요소의 위치는 static입니다.다음은 사용 된..

CSS - display, visivility 보이기, 숨기기, 인라인, 블럭

디스플레이 속성으로 인라인과 블록을 설정할 수있습니다.display : inline; display의 속성block : 블록inline : 인라인none : 없는 것으로 간주hidden :화면에서 감춰짐 inline과 block의 차이 HTML블록요소는 블록요소이거나 인라인 요소 중의 하나에 속한다. 일반적인 문서의 흐름에서 HTML 요소는 블록 요소냐 인라인 요소냐에 따라서 다음과 같이 화면에 표시된다. 블록요소(block)화면의 한 줄을 전부 차지한다. 즉, block은 무조건 한줄은 점유하고 다음줄로 가버림. ex) 가위, 풀, 종이, 색연필 결과)가위 풀종이색연필 인라인요소(inline)한 줄에 차래대로 배치된다. ex) 가위, 풀, 종이, 색연필 결과)가위, 풀, 종이, 색연필 inline의 대..

티스토리 블로그에 애드센스 광고 달기

이번 포스팅에서는 티스토리 블로그에 광고를 다는 방법을 정리해 보았습니다. 데스크탑의 웹브라우저티스토리 블로그 본문의 상단, 하단.티스토리 블로그 본문의 오른쪽 사이드바 모바일 웹브라우저티스토리 블로그 본문의 상단, 하단 사이드바에 구글광고 게시하기 우측 상단의 메뉴에서 관리를 클릭! 플러그인 -> '플러그인 설정' 에서 배너출력 클릭! -> 확인 클릭! 확인을 누르고~ 'HTML 배너출력'을 드래그한 다음 편집을 누른 뒤 HTML 코드를 넣고 확인을 눌러주면 됩니다. 사이드바게시 끝! 포스트 상 하단에 구글광고 게시하기 우측 상단의 메뉴에서 관리를 클릭! 플러그인 -> '플러그인 설정' 에서 'Google AdSense(데스크탑 웹용)'과 'Google AdSense(모바일용)'를 찾습니다. 우선 'G..

Tistory 치환자 삽입하기

치환자 삽입하기 이번 포스팅은 치환자에 대해서 다뤄보도록 하겠습니다. 치환자에 관한 설명은 아래의 링크에서 잘 설명이 되어있습니다.http://www.tistory.com/guide/skin/step3#1-1 하지만 어떻게 적용하는지에 대해서는 설명이 부족한듯하여 글을 적어봅니다. 가장 기본적인 치환자는 아래와 같습니다. : 블로그 주소 : '관리자 > 환경설정 > 기본설정'에서 입력된 블로그 제목 아래 그림은 이전 글에서 끄적거린 예제에 치환자를 삽입한 결과입니다. 본문내용입니다. 사이드바입니다. 바닥공간입니다. 위 그림은 치환자를 사용하면서 저의 블로그이름이 들어가고 하이퍼링크가 걸린것을 확인할 수 있습니다. 이런식으로 티스토리의 치환자를 활용하여 쉽게 블로그를 제작하실 수 있습니다.