본문 바로가기

Web Programming/HTML CSS JAVASCRIPT

[CSS] 캐스케이딩
2018. 6. 19. 캐스케이딩 캐스케이드는 폭포라는 의미가 있다. 처음 html이 등장 했을 때는 CSS가 없었다. 웹의 사용자들은 곧 디자인을 요구하기 시작하고 웹의 고안자들은 html을 꾸며주는 언어의 필요성에 공감하였고, 그렇게 해서 등장한 것이 CSS이다. CSS는 Cascading Style Sheet의 약자이다. CSS의 첫번째 글자로 등장 할 만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있다.Cascading을 사전에서 찾아보면 폭포라는 의미가 있다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 다자인이 결합 될 수 있다는 점에 착안하고 있다고 할 수 있다. 웹브라우저는 기본적으로 html을 해석하는데 html에는 기본적으로 디자인이 되어있다. (h1..
[CSS] 가상 클래스 선택자
2018. 6. 18. 가상 클래스 선택자 ● link : 방문한 적이 없는 링크● visited : 방문한 적이 있는 링크 보안상 이유로 속성 사용이 제한적임● hover : 마우스를 롤오버 했을 때● active : 마우스를 클릭 했을 때 1234567891011121314151617181920 a:hover{ color:yellow; } a:active{ color: green; } 방문함 방문 안함Colored by Color Scriptercs ※ hover와 active가 동시에 적용 될 때(동급 일 때)css는 뒷쪽에 있는 선언을 먼저 선택한다.
[CSS] 부모 자식 선택자
2018. 5. 9. 부모 자식 선택자 1234567891011121314151617181920212223 ul li{ color:red; } HTML CSS JavaScript HTML CSS JavaScript cs ul 밑에 있는 li들이 선택 된다. ul li{ color:red; } 1234567891011121314151617181920212223242526272829303132 ul li{ color:red; } ol li{ border:1px solid red; } HTML CSS JavaScript HTML CSS selector declaration JavaScript cs ol 밑의 li들이 모두 바뀌게 된다. 하지만 직계 자손 태그들에게만 효과를 주고 싶다면 ol>li{ border:1px solid r..
[CSS] 선택자
2018. 5. 9. 선택자 선택자와 선언 ● Selector : 주어● Declaration : 선언 ● property : 속성● value : 속성 값● value-Property Separator : 속성과 속성을 구분● Declaration Separator : 선언과 선언을 구분하는 구분자 선택자의 종류 1. 태그 선택자 123456789101112131415161718 li{ color:red; text-decoration:underline; } HTML CSS JavaScript cs ● 효과를 여러개 지정 할 때는 세미콜론(;)이 있어야 한다. li{ color:red; text-decoration:underline; } 2. 아이디 선택자 1234567891011121314151617 #select{ fon..
[JavaScript] 달력 만들기
2018. 4. 15. 달력 만들기 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 td { width: 60px; height: 60px; text-align: center; font-size: 20px; font-family: 바탕; border:2px dotted #AC58FA; border-radius:8px;} Calender var today = new Date(); // 오늘 날짜//지신의 컴퓨터를 기준으로//today 에 Date..
[JavaScript] 계산기
2018. 4. 15. Calculator var flag = false; function input(num) { if (flag == false) { cal.text.value=""; flag = true; } cal.text.value += num; } function posit() { answer(); cal.text.value = (cal.text.value)*-1; } function answer() { var str = cal.text.value; var strArray = str.split('^'); var findValue = "^"; cal.text.value = eval(cal.text.value); if (str.indexOf(findValue) != -1) { //만약 내 출력 값에 ^가 들어간다면 cal..
[JavaScript] 이미지 자동 변경
2018. 4. 15. 이미지 자동 변경 1234567891011121314151617181920212223 방문할 때마다 변하는 이미지 var imgArray = new Array(); imgArray[0] = "sakura.jpg"; imgArray[1] = "sakura2.jpg"; imgArray[2] = "sakura3.jpg"; function showImage() { var imgNum = Math.round(Math.random()*2); var objImg = document.getElementById("introImg"); objImg.src = imgArray[imgNum]; setTimeout("showImage()", 3000); } 7~9 : 파일명.확장자15 : 밀리세컨드로 지정
[JavaScript] 대화상자와 함수
2018. 4. 8. JavaScript 대화상자와 함수 대화상자와 함수 경고창window.alert(경고 메세지); 확인창var result = window.confirm(확인 메세지); 입력창var result = window.prompt();var result = wondow.prompt(질문 메세지, 기본값); 사용자 정의 함수자바 스크립트가 제공하는 함수 이외에 사용자가 임의의 함수를 정의하고 사용 function 함수명(매개변수들){ (매개 변수의 개수가 넘지 않으면 자동적으로 앞쪽부터 채워져서 실행이 된다)실행할 내용return 반환 값;} 함수의 호출은 스크립트 내부나 각 html 태그의 이벤트 핸들러를 지정하는 곳에서 사용 할 수 있다. 자바와 비교 자바 자바스크립트public void bbb(int x, i..

티스토리툴바