본문 바로가기

728x90

개발언어/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.

[CSS] 컬러 차트 리스트 The table below lists all of the 80 colors in the color picker along with their names and Hex codes. Row# Color Name Hex code 1 black #000000 1 dark gray 4 #434343 1 dark gray 3 #666666 1 dark gray 2 #999999 1 dark gray 1 #b7b7b7 1 gray #cccccc 1 light gray 1 #d9d9d9 1 light gray 2 #efefef 1 light gray 3 #f3f3f3 1 white #ffffff 2 red berry #980000 2 red #ff0000 2 orange #ff9900 2 yellow #ffff00 .. 2022. 4. 8.

[CSS] background-size (배경이미지 크기) ✨배경이미지 크기 조절하기 background-size 속성 설명 auto 원래 배경 이미지 크기만큼 표시(기본 값) contain 지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 cover 지정한 요소를 다 덮도록 배경이미지를 확대/축소 크기 값 너비 값과 높이 값을 지정 백분율 지정한 요소를 기준으로 백분율 값을 지정 auto contain cover 100px 100px 70% 70% 2022. 4. 8.

[JS] 자바스크립트 backtick(`) 억음부호 란? 자바스크립트 String 값에 따옴표를 사용합니다. var str = "yunamom"; var str = 'yunamom'; var str = `yunamom`; JavaScript에서 템플릿 리터럴에 활용되는 문자(억음부호) 가 있다. 이 문자(억음부호) 를 백틱(backtick)이라고 하는데 언뜻 잘못보면 작은 따옴표와 혼동하기 쉽다. 영문명칭으로는 Backquote, backtick, grave accent 등 다양한 이름이 붙어있다. 자바스크립트에서는 백틱(`)을 사용하여 문자열을 표현하는 것을 '템플릿 리터럴'이라고 한다. 백틱을 사용하는 장점은 여러가지가 있지만 가장 큰 장점은 다음과 같다. 1. (\n) 등을 사용하지 않고도 줄바꿈을 쉽게 할 수 있다. 2. 문자열 내부에 표현식을 포함 할.. 2022. 4. 8.

이전 1 2 다음

728x90

티스토리툴바