본문 바로가기
반응형

All137

[javaScript] 함수2 return 문은 함수에서 결과값을 반환할 때 사용되며, return문이 실행되면 코드가 강제로 종료됩니다. function test(arrData){ var sum=0; for(var i=0; i< arrData.length; i++){ sum += Number(prompt(arrData[i] + "점수는?", "0")); } var avg = sum / arrData.length; return avg; } var arrSubject=["국어","수학"]; var result = test(arrSubject); document.write("평균 점수는" + result + "점입니다."); arrData.length가 국어,수학 총 2이기 때문에 arrData.length(2)만큼 반복문을 실행합니다... 2020. 1. 11.
[CSS] animation 효과 (@keyframes) animation은 속성을 시간에 따라 변화를 줄 수 있도록 하는 효과이며, @keyframes와 함께 사용합니다. animation 속성 animation-name : 애니메이션 효과에 이름을 설정해야 @keyframes에 설정한 명령이 실행됩니다. animation-duration : 애니메이션 효과가 몇초동안 실행될지, 시작해서 끝날때까지 시간을 설정합니다. animation-delay : 애니메이션 효과가 몇초 지난 후 실행될지 설정합니다. animation-timingfunction : 애니메이션이 적용되는 속도를 설정합니다. animation-direaction : 애니메이션 진행방향을 설정합니다. animation-iteration-count : 애니메이션 반복 횟수를 설정합니다. anima.. 2020. 1. 8.
[CSS] transition 애니메이션과 같이 사용되는 transition 속성 전환 transition은 애니메이션 효과를 적용할 때 애니메이션 효과가 일정 시간에 걸쳐서 다양한 방법으로 진행 되도록 하는것 입니다. 기본 형식은 아래와 같습니다. transition : property duration timingfunction delay; transition 속성 transition-property : 원하는 애니메이션 시킬 속성을 입력합니다. (color, background-color, border-radius, position....) transition-duration : 애니메이션 효과가 몇초동안 실행될지, 시작해서 끝날때까지 시간을 밀리초(ms), 초(s)단위로 설정합니다. transition-timingfunction : 애니메이션이 적용되는 속도를 지정합니다.(linear.. 2020. 1. 7.
[CSS] transform속성 (translate,ratate,scale,skew) transform은 요소를 회전(rotate), 확대 축소(scale), 이동(translate), 찌그러뜨리기(skew)할 수 있습니다. 원래박스 transform:translate transform:rotate transform:scale transform:skew h1{width:350px; padding:5px 10px; margin-bottom:30px; border:3px solid #A0D9E2; background:#004680;} .tra{ transform:translate(20px,30px);} /*좌우, 위아래*/ /*박스를 오른쪽으로 20px, 아래로 30px이동*/ .rot{transform:rotate(30deg);} /*시계방향 기준으로 30도 회전시킴*/ .sca{trans.. 2020. 1. 6.
[CSS] word-break / word-wrap 속성 (box-sizing) word-break와 word-wrap의 속성 둘다 띄어쓰기 없이 길게 입력했을때 width값을 설정해도 바깥으로 튀어 나오게 되는데 이때 width값에 맞게 적당히 잘라 다음 줄로 내려오도록 하는 속성입니다. word-break - 아시아 언어를 제어합니다. normal - 기본값으로 자동으로 적당히 줄바꿈합니다. break-all - width값보다 글씨가 넘칠때 강제로 줄바꿈합니다 (단어가 중간에 끊기면서 줄바꿈이 일어남) keep-all - 줄바꿈을 할때 한단어에서는 줄바꿈이 일어나지 않고 단어와 단어사이(띄어쓰기한부분)에서 줄바꿈이 일어납니다. word-wrap - 비아시아 언어를 제어합니다. normal, break-word 공통 css에 추가 해놓으면 상속되는 속성이기 때문에 편리하게 사용할.. 2020. 1. 5.
[CSS] box-shadow / text-shadow 속성 box-shadow (선택영역에 그림자 효과를 주는 속성입니다.) 기본형 -> box-shadow: inset x축 y축 blur spread color inset - inset을 써주면 선택영역 안쪽으로 그림자가 생성됩니다. x축 - 가로로 밀리는 폭입니다 (음수값은 왼쪽으로 그림자가 생성됩니다) y축 - 세로로 밀리는 폭입니다(음수값은 위쪽으로 그림자가 생성됩니다) blur - 그림자가 퍼지는 정도입니다. spread - 그림자가 생기는 정도입니다(음수 값은 작아집니다.) color - 그림자 색을 선택할 수 있습니다. box-shadow:3px 3px; box-shadow:3px 3px 4px; box-shadow:3px 3px 4px 4px; box-shadow:3px 3px 4px 4px rgb.. 2020. 1. 4.
[CSS] border 효과 테두리 선을 설정하는 속성입니다. 선의 굵기, 모양, 색상 등을 조절할 수 있습니다. 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 안녕하세요 on sunday의 tistory입니다 p{width:550px; padding:5px;} .p1{border:3px solid #ac9648;} .p2{border:3px dashed #4c384a;} .p3{border:3px dotted #e25f70;} .p.. 2020. 1. 2.
[CSS] background 속성 background-repeat (배경이미지를 어떻게 반복시킬지 정한다) repeat - 가로세로로 반복 repext-x / y - x축 또는 y축으로 반복 no-repeat - 반복하지 않음 div{ background:url("../img/page_btn_pc.png") 80% center repeat-x; width:500px; height:150px; border:1px solid red; } repext-x 했을 때 결과값입니다. div{ background:url("../img/page_btn_pc.png") 80% center repeat-y; width:500px; height:150px; border:1px solid red; } repext-y 했을 때 결과값입니다. background.. 2020. 1. 1.
[css] CSS 기본 속성 Font 속성 body {font-size: 12px; font-family:'Nanum Gothic', sans-serif;} h1{font:15px "굴림",Gulim;} font-weight : 글씨를 두껍게 한다(bold, normal) font-style : 기울이거나, 바로세운다(italic, normal) text-align (블록 요소에만 사용가능합니다) 속성 값 -> left(왼쪽 정렬), right(오른쪽 정렬), center(가운데정렬), justify(중앙정렬) 왼쪽 정렬 text-align:left 오른쪽 정렬 text-align:right 가운데 정렬 text-align:center 양쪽 정렬 text-align:justify div{float:left; width:300px; .. 2019. 12. 31.
반응형

티스토리툴바