본문 바로가기

개발언어/JS14

[CSS] <h1> ~ <h6> 기본값 코드 ✨ ~ 태그는 HTML 문서에서 제목(heading)을 정의할 때 사용합니다. 이 텍스트는 h1 요소를 사용한 제목입니다. 이 텍스트는 h2 요소를 사용한 제목입니다. 이 텍스트는 h3 요소를 사용한 제목입니다. 이 텍스트는 h4 요소를 사용한 제목입니다. 이 텍스트는 h5 요소를 사용한 제목입니다. 이 텍스트는 h6 요소를 사용한 제목입니다. 이 텍스트는 p 요소를 사용한 단락입니다. h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-.. 2022. 6. 30.

[자바스크립트] onclick, onchange, onmouse, onkeyup 이벤트 함수 안녕하세요 yunamom 입니다 :D 이번시간에는 JavaScript 에서 키보드, 마우스 이벤트 함수에 대하여 포스팅 하겠습니다.😊 onclick : 클릭했을때 onclick onclick function on1(){ var values = document.getElementById('o1').value; document.getElementById('o1').value = (values.length < 1)?"yunamom":""; } onmouseover : 마우스를 올렸을 때 / onmouseout : 마우스를 밖으로 옮겼을 때 onmouseover/onmouseout onmouseover/onmouseout function on2(){ document.getElementById('o2').valu.. 2022. 5. 10.

[JS] replace, replaceAll 사용방법 안녕하세요 yunamom 입니다 :D 이번시간에는 자바스크립트에서 문자를 치환하는 replace()함수에 대하여 포스팅하겠습니다.😊 ✨replace(), replaceAll() 함수 자바스크립트에서 문자열의 특정한 문자 또는 문자열을 치환하는 함수 입니다. 여기서 replaceAll() 함수는 사실상 없다고 생각하시는게 좋습니다. 2021년 스펙을 기준으로 replaceAll() 함수가 추가 되었기 때문에 최신 개발환경이 아니라면 사용할수가 없습니다. replace() 함수는 조건 대상이 되는 첫 번째 문자 하나만 변경되어서 반환이 됩니다. *여기서 중요한 점 replace() 함수는 새로운 값을 만들어 반환한다는 점입니다.(기존의 문자는 그대로 존재하고 사용됨) replaceAll() 과 같은 기능을 .. 2022. 5. 3.

[CSS] 이미지에 적용한 마우스 hover 효과들 (예시포함) ✨CSS Image Hover Effects No Effect 1. Zoom In #1 Hover /* Zoom In #1 */ .hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .hover01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); } 2. Zoom Out #1 Hover /* Zoom Out #1 */ .hover02 figure img { -webkit-transition: .5s ease-in-out; tran.. 2022. 4. 17.

[CSS] 투명도 설정 하는법 - opacity / rgba 1. opacity 속성 div{ background-color : rgb(255,255,255); opacity : 0.5; } 2. rgba 속성 div{ background-color : rgb(255,255,255,0.5); } div 태그의 투명도를 0 ~ 1의 값으로 설정할 수 있다. 0에 가까울수록 투명해진다. 0.1 0.2 0.4 0.6 0.8 1 2022. 4. 10.

[CSS] background-repeat (배경 이미지 반복 여부) ✨background-repeat : 배경 이미지의 반복 여부, 반복 방향 작성법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat(기본값) 가로 방향, 세로 방향으로 반복합니다. repeat-x 가로 방향으로 반복합니다. repeat-y 세로 방향으로 반복합니다. no-repeat 반복하지 않습니다. initial 기본값으로 설정합니다. inherit 부모 요소의 속성값을 상속받습니다. 2022. 4. 9.

이전 1 2 3 다음

티스토리툴바

코드