전체 글 썸네일형 리스트형 [CSS] pseudo-class hover(호버), focus(포커스), active(액티브) 우리가 버튼을 만들어 봤다고 하자 그렇게 버튼을 만들고 CSS로 버튼을 디자인 하면 예쁜 버튼을 만들 수 있다 하지만 버튼을 클릭해도 클릭하는 별 효과가 없다는 것! 그럴 때 쓸 수 있는 것이 css의 hover, focus, active 알아보자 이렇게 예쁘게 만들어 놓은 버튼(button)이 있다 HTML 구매하기 CSS .btn { padding: 15px; font-size: 20px; border: none; border-radius: 10px; background-color: coral; color: white; cursor: pointer; } 이것을 마우스를 가져다 놓거나 클릭 했을 때 나올 수 있는 효과를 줘보자 hover : 커서를 가져다 놓을 때 active : 클릭 했을 때 focu.. 더보기 [CSS] link로 관리하기 수월하게 하기 html문서에 css를 작성하다 보면 코드도 길어지고 영 못 생겨지기 마련 그럴 때 css파일과 html을 따로 관리하면 훨씬 편하고 보기도 좋다 head태그 안에 넣어주고 ...안에 경로만 지정해주면 끝 예를 들면 styles폴더 안 project.css 파일을 불러와라 이런 뜻 !! 꼭!! html 파일과 css파일이 같은 경로에 있어야 한다 더보기 [javascript] Rest parameters (added in ES6) Rest parameters란 함수안에 for문을 돌려 함수에있는 파라미터값을 순서대로 찍어주는것을 말한다 중요한것은 이때 배열로 찍어준다는 것! function printAll(...args) { for (let i = 0; i < args.length; i++) { console.log(args[i]); } printAll('hoon','eun','sunny') 더보기 [javascript] 파라미터(parameter) function multiply(a, b = 1) { // a와b는 1이다 return a * b; } console.log(multiply(5, 2)); // a와 b에 5와 2를 집어 넣은것이다 // expected output: 10 // 곱하기니까 값은 10 console.log(multiply(5)); // expected output: 5 보통 매개변수라고도 하고 인자라고 불리는 거 같다 위에 코드를 보면 function multiply(a, b = 1) 여기서 (a , b) 부분이 피라미터가 되는 것이다 return이란 함수 안에 있는 명령을 중지하고 "return값을 반환해라" 하는 의미인데 자세한건 return을 작성할 때 알아보겠다 그렇게 return( a*b ) 즉 multiply(a.. 더보기 [HTML] image(이미지)에 link(링크) 넣기 html에 가장 기본이 되는 링크 태그를 부모자식 태그의 개념으로 이미지에 넣을 수 있다 코드 구글사이트로 넘어가지는 것을 확인 할 수 있다 끝 더보기 [CSS] a tag(태그) style(스타일) 효과 없애기 html에서 태그를 쓰다보면 밑줄과 클릭했을때 나오는 보라색이 매우 거슬린다 이럴때 사용하면 좋은 효과를 없애줄 수 있는 방법이다. 코드 a { text-decoration: none; // a태그의 밑줄을 없애준다 color: white; 또는 black; //a태그의 색상을 지정해 보라색이 되는것을 없애준다 } ex 이렇게 하면 클릭을 해도 깔끔해진 a태그를 만나 볼 수 있다. 끝 출처 - 코딩애플 더보기 [CSS] 배경(backgroundimage)에 검은색 틴트 주기 웹 사이트를 만들다 보면 화면의 전체가 이미지를 덮고 있고 그 안에 텍스트를 넣고 싶을 때가 많이 있다 하지만 그렇게 하면 배경의 이미지가 너무 쨍해? 텍스트가 잘 안 보일 경우가 있기 때문에 배경 이미지에 검은색 블라인드 처리를 하여 텍스트가 강조되게 할 수 있는 방법을 알아보자 블라인드(틴트)를 주기 전 텍스트가 배경 이미지의 밝음 때문에 잘 보이지 않는다. 코드 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../background1.jpg); css에 linear-gradient를 줘보자! 블라인드(틴트) 후 이렇게 텍스트는 잘 보이고 뒤에 배경 이미지는 어두워 진 것을 확인 할 수 있다 끝 출처 - 코.. 더보기 이전 1 ··· 10 11 12 13 다음
