Frontend

console.dir(event.target); 이 코드를 사용하면 event.target의 속성을 알 수 있다. console.log로 하면 안나온다!! console.log(event.target.parentElement.innerText) target은 클릭된 HTML element요소를 가리킨다. 그리고 모든 HTML element요소 하나 이상의 property가 있다. parentElement 는 클릭된 element의 부모이다. event.target -> button event.target.parentElement -> li event.target.parentElement.innerText -> 내가 쓴 list text들이 console.log 창에 뜬다. - JSON.stringify ..

- Math.random() Math는 많은 function들을 가지고 있는데 그중에서 random()은 0 ~ 1 사이의 랜덤한 숫자를 제공한다. Math.random() * 10 하면 0에서 10사이의 숫자들을 얻을 수 있다. - Math.round() round()를 쓰면 1.5 -> 2 / 1.4 -> 1 / 1.3 -> 1를 돌려준다. 즉 반올림을 해서 돌려준다. - Math.ceil() 숫자를 천장까지 높여주는 것 / 1.01 , 1.5, 1.3 -> 전부다 2가 된다. 1.0만이 1이 된다. - Math.floor() 숫자를 마루까지 낮춰주는 것 / 1.9999, 1.4, 1.01 -> 전부다 1이 된다. 2.0만이 2가 된다. - Math.floor(Math.random() * 10) 이렇..

📌css - input 태그 안에 이미지 넣기 이런 식으로 input 태그 안에 img를 넣고 싶을 떈?? #login_box li:nth-child(1)>input{ background: url(../src/all_image/login_icon.png) no-repeat 5px center; background-size: 27px; padding-left: 40px; } css 에서 background속성에 url()적용하면 된다. img와 text사이에 여백을 주고 싶으면 padding - left에 값주기 input 안에 img를 넣은 것이기 때문에 padding값으로 여백을 줘야한다!! 그 외에 이미지 크기 background-size: 30px; 이미지 잘리지 않는 선에서 제일 크게 - cont..

포토샵등 이미지 편집 도구를 이용하지 않고 css를 사용해서 이미지에 시각효과를 추가할 수 있다. filter란? filter속성은 요소에 대한 시각효과를 나타낸다. filter 함수 blur(px) 이미지에 흐림효과를 적용한다. 값이 클수록 흐림 효과 ↑ brightness(%) 이미지에 밝기를 조정한다. 100%가 기본값, 100%보다 크면 밝기를 제공하고 0%보면 완전히 검게 처리한다. contrast(%) 흐림효과 이미지의 대비를 조정한다. 100%가 기본값, 100%보다 크면 더 많은 대비를 제공한다. drop-shadow(x, y, blur(색상)) 이미지의 그림자 효과를 지정한다. grayscale(%) 이미지를 회색조로 변환한다. 0%가 기본값, 100%는 이미지를 완전히 회색 처리한다. ..

내부 링크 href 속성을 이용해서 내가 이동하고 싶은 속성의 id 값을 적기 one으로 이동 클릭시 id="one"값으로 이동! 목차가 필요한 콘텐츠 사이트에서 a태그를 이용한 내부 링크가 굉장히 유용하게 사용된다. ! 외부 링크 구글로 이동 버튼을 클릭하면 구글 사이트로 이동한다. target="_blank" 를 추가하면 외부링크가 새로운 탭에서 열린다!! 속성은 태그를 의미나 기능적으로 보조해주는 역할이다. 태그 href, target 속성 참고자료 유투버 수코딩님 영상을 참고하였습니다. https://youtu.be/-C6xj4dtGTM

:nth-child(N)= 부모안에 모든 요소 중 N번째 요소 /* 3, 6, 9, 12 번째(3의배수) 배경변경 */ li:nth-child(3n){ background: red; } /* 10번째 부터 이후 모든 리스트 컬러변경 */ li:nth-child(n+10) { color: blue; } /* 1번째 부터 5번째 까지 배경변경 */ li:nth-child(-n+5) { background: green; } /* 15번째 부터 20번째 까지 배경변경 */ li:nth-child(n+15):nth-child(-n+20) { background: hotpink; } /* 끝에서 부터 3번째 */ li:nth-last-child(3) { background: gold; } /* 홀수 */ li:nt..

📌css-box shadow box-shadow를 만들면 요소를 감싸는 그림자를 만들 수 있다. 그림자 만들어진 것을 확인할 수 있다. 그렇다면 box 안쪽에 그림자를 주려면 어떻게 해야할까? box-shadow 속성 맨 앞에 inset을 붙여주면 된다. 그렇다면 그림자 여러개를 겹쳐서 사용하는 것은 어떻게 할까? , 로 계속해서 그림자를 추가하면 된다. 안쪽그림자와 바깥쪽 그림자를 잘 활용하면 멋진 동그라미를 만들어볼 수 있다. box-shadow를 활용해 animation을 적용시킨 모습이다. 정말 이쁘다 ㅠㅠ https://html-css-js.com/css/generator/box-shadow/ Box Shadow CSS Generator Set the properties of your box s..

html( Hyper Text Markup Language) html은 웹 브라우저 창에 웹 문서의 내용을 보여 주는 데 필요한 약속이라고 할 수 있다. html은 웹 브라우저의 여러 내용 중에서 제목과 본문,이미지, 표와 같은 웹 요소를 알려 주는 역할을 합니다. 웹 개발을 하면서 웹 브라우저에 보여 주고 싶은 내용이 있다면 html에 맞는 표기법을 사용해야 한다. css css는 html로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용한다. 규격이 정해진 pc나 , 모바일 화면에 여러 내용을 보여 줘야 하므로 css를 이용해서 웹 요소를 적절하게 배치하고 필요한 곳을 강조할 수 있다. 특히 pc, 태블릿 pc, 모바일 등 다양한 디바이스에 따라 화면이 자동으로 바뀌는..