본문 바로가기

html+CSS+JS

[초보자용 Java Script] 반복문 - while, for
html+CSS+JS/Java Script 2019. 9. 4. [초보자용 Java Script] 반복문 - while, for 제어문 프로그램의 흐름을 제어함 (조건문, 선택문, 반복문) 반복문 - while문 var 변수 = 초기값 ; while ( 변수가 들어간 조건 ) { 자바스크립트 코드(실행문) ; 변수 증감식 ; } ; var : 변수 설정 while : 변하는 변수 값이 조건에 대입했을 때 참일 경우 계속 반복해서 표기. 변수 증감식 : 변수가 증감하는 규칙 설정 while문을 통해 구구단의 5단 표기 var i = 1 ; 변수 i의 값을 1로 설정 while(i
[초보자용 Java Script] 선택문 - switch
html+CSS+JS/Java Script 2019. 8. 30. [초보자용 Java Script] 선택문 - switch 제어문 프로그램의 흐름을 제어함 (조건문, 선택문, 반복문) 선택문 - switch문 var 변수 = prompt("지정값1, 지정값2 중에서 선택하시오."); switch(변수) {case "지정값1": 표기될 값; break; case "지정값1": 표기될 값;}; var : 변수 설정 prompt : 알림창에 문장과 함께 사용자에게서 값을 받음 switch : 변수 값에 따라 표기할 것을 정해줌 case : 변수마다 나타날 값을 표기함 break : 모든 값이 다 표기되는 사태를 막아줌 네이버, 다음, 네이트, 구글의 변수에 따라 사이트가 뜨도록 만듦. var site = prompt("네이버, 다음, 네이트, 구글 중에서~?",""); prompt를 통해 '네이버, 다음, 네이트, 구글 중에서~?..
[초보자용 Java Script] 제어문 - if, else
html+CSS+JS/Java Script 2019. 8. 24. [초보자용 Java Script] 제어문 - if, else 제어문 프로그램의 흐름을 제어 (조건문, 선택문, 반복문) 조건문 - if문 if(조건식) {자바스크립트 코드;}; 조건이 참일 경우, 자바스크립트 코드를 실행. ※ =을 한번만 쓰면 대입연산자(변수)로 인식이 되기에 '같다'는 조건을 걸고 싶은 경우 ==을 사용해줘야 한다. - 첫번째 if문만 참이기에 첫번째 if문의 코드만 실행 var num = 10; : 변수 num에 숫자 10을 대입 if ( num500 ) {document.write ('hellow') ; } ; : 변수 num이 숫자 500보다 크면 world를 화면에 표기 (거짓이라 실행x) - if문이 참이기에 '습관~'문장이 떴다. 아래는 if문이 아니기에 상관없이 화면에 나온다. var walkAmount = 10000; : 변수 w..
[초보자용 Java Script] 논리 연산자
html+CSS+JS/Java Script 2019. 8. 21. [초보자용 Java Script] 논리 연산자 논리 연산자 변수는 데이터를 대입할 뿐아니라 참, 거짓을 표현할 수 있다. 이 때, 엑셀에서처럼 or, and, not을 사용할 수 있는게 논리 연산자다. 논리연산자 변수의 연산값들이 전부가 참인지, 일부가 참인지에 따라 값을 달리해주는 연산자. || && !(내용) or 연산자 and 연산자 not 연산자 논리연산자 사용해보기 (아래 그림 일부 해석) - 2번째 문단 1째줄 result = b>a || bc; : result는 b>a(참), bc(참) 중 하나라도 맞으면 참 document.write(result); : result값을 표시하는 것이기에 참으로 표시 - 2번째 문단 2째줄 result = b>a && bc; : result는 b>a(참), bc(참) 전부가 맞으면 참 document.w..
[초보자용 Java Script] 변수 선언 - 문자 / 숫자 연산
html+CSS+JS/Java Script 2019. 8. 16. [초보자용 Java Script] 변수 선언 - 문자 / 숫자 연산 변수란? 특정 단어, 숫자에 다른 값을 대입시키는 것. 간단하게 어린 시절 수학시간을 떠올려보자. a=10 b=5 a+b=15 여기서 a와 b가 변수이고 10과 5가 변수 값이다. 변수는 계속해서 다른 값을 줄 수 있다. 변수에 들어갈 수 있는 데이터 1) 원시타입 : 문자형 데이터(글자 등), 숫자형 데이터(상수 등), 논리형 데이터(true,false), (응용) undefined(초기화 되지 않은 값, 허용되지 않은 값), null(아직 모르는 값, 허용된 값), symbol 2) 객체 변수 사용시 주의사항 변수 선언 : var / let 변수명 1번째 글자 : $ / _ / 영문자 변수명 2번째 글자 : $ / _ / 영문자 / 숫자 예약어(document, window 등 java script에..
[초보자용 Java Script] document.write 기본(주석/메모, 문자표기)
html+CSS+JS/Java Script 2019. 8. 14. [초보자용 Java Script] document.write 기본(주석/메모, 문자표기) document.write() java script의 스크립트 내용을 화면에 표시하기 위한 선언. 내용과 연산자들을 표기하기 위해 사용된다. 주석 사용 한 줄만 사용하는 메모 : // 내용 두 줄 이상 차지하는 메모 : /* 내용 */ (스타일 내부 메모와 같음) 세미콜론 작성 코드 명령을 구분하기 위한 입력어. 코드 한 줄을 작성한 후에는 무조건 세미콜론(;) 작성 필요. 화면에 문자 표기하기 document.write('Hellow World'); document.write = 화면에 표시하기 위한 선언 / () = 화면에 표시될 내용 / '' = 문자를 표기하기 위한 장치 내용을 쓸 때, 괄호 내부에 따옴표를 쓴 후, 사이에 문자를 적음. (작은 따옴표, 큰 따옴표 상관x) 홑따옴표 내에는 홑따옴표..
html+CSS+JS/html+CSS 2019. 6. 28. [CSS] 애니메이션 무한반복 (animation, from, to, duration) 애니메이션 부여 과정 1) 애니메이션 속성 부여 (개별 부여) 선택자: {스타일 내용; animation-name: 애니메이션 이름 부여; /* 원하는 선택자에 애니메이션 이름 부여 */ animation-duration: 숫자(단위:ms/s); /* 애니메이션 지속되는 시간 */ animation-iteration-count:값; /* 애니메이션 반복여부. 숫자, infinite(무한반복) 등 */ } 선택자:visited {스타일 내용} 적용 스타일값 - font-weight: 글자 두께 / font-shadow: 글자 그림자 (상하,좌우,번짐정도,색상) 3. 커서가 올라가있을 때 (Tab키를 누르면 선택이 달라지는 때) 선택자:focus {스타일 내용} 적용 스타일값 - font-weight: 글자..
html+CSS+JS/html+CSS 2019. 6. 28. [CSS] inline, block, inline-block 차이점 block요소 안에 내용이 아무리 작더라도 온전히 상자 형태로 자리를 차지하는 요소. (padding, margin 값 포함) 때문에 넓이, 높이를 설정할 수 있다. 물론 넓이를 설정해도 별도의 설정없이는 자신 옆에 아무도 오게 할 수 없다. 글자와 다른 상자로 취급되기에 text-align으로 정렬을 할 수가 없다. margin:0 auto를 통해 상하의 여백은 0, 양 옆의 여백은 자동으로 조절하여 가운데 정렬 효과를 볼 수 있다. float:left 혹은 float:right 로 왼쪽/오른쪽 정렬 효과를 볼 수 있다. float float는 block요소를 왼쪽, 오른쪽에 붙이겠다는 속성. 때문에 float를 한 번만 써도 아래의 block요소들이 영향을 받기 때문에 float를 넣은 요소 부모 요..

티스토리툴바