디자인을 넣어서 CSS를 적용하다 보면 예쁜 그라데이션 컬러를 적용해야할 때가 있다. 일반적으로 div와 같은 요소에는 간단히 background의 linear-gradient 속성을 이용해 적용할 수 있다..gradient-box { width: 300px; height: 300px; background: rgb(238,174,202); background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); } 그라데이션 컬러 코드는 CSS Gradient 사이트에서 편하게 만들어올 수 있다. Text에 Gradient를 적용하려면..
See the Pen Untitled by 모카 (@akauwwdc-the-encoder) on CodePen. button과 JS를 이용해 버튼을 클릭하면 원하는 내용이 나오도록 하는 기능을 구현하는 코드이다 ! onclick시 showContent 함수가 실행되는데, A버튼 B버튼은 같은 기능을 하지만 각각 눌렀을 때 보여줄 요소가 다르기 때문에 함수의 매개 변수를 이용해 이를 구분해준다. 숨기고 보여줄 요소인 div를 우선 display:none;으로 숨긴 뒤 버튼을 눌렀을 때 받은 매개변수가 A라면(A button onclick) A 내용을 display:block; 받은 매개변수가 B라면(B button onclick) B 내용을 display:block;로 작동시켜서 보이도록 해준다.
버튼이 있는 페이지를 만들던 중, 해당 페이지로 이동했을 때 특정 버튼에 focus가 되어있는 상태를 기본 값으로 설정하고 싶었다. 찾아본 결과 아주 간단한 방법으로 설정할 수 있었다. 지역별 매장 스파 매장 안내 해당 button태그 안에 autofocus를 적어주는 것이었다 🌟 css에도 적을 수 있는 것 같았는데, 그렇게 하면 :focus 스타일과 함께 작성하니 오류가 발생해서 html의 button태그 안에 바로 적어주었더니 문제 없이 적용이 되었다. 적용 완료😊
form에 onsubmit을 이용해 조건에 따라 submit을 멈추는 방법을 알게 되어서 신났던 것도 잠시, 하나를 배우면 또 다른 문제가 찾아오는 법인가 보다 😀 중복 체크 중복체크 버튼은 onclick시 중복 체크라는 알림만 뜨도록 설정했는데 submit까지 실행해버리는 문제가 발생했다. 문제의 이유, button type="submit" 찾아본 결과 문제의 이유는 보이지 않는 button의 기본 type이 submit이기 때문이었다 ! 이번 문제처럼 form 안에 button을 사용했을 때 버튼을 클릭하면 전송되어 새로고침되는 이유가 여기에 있었다. button type 기능 submit(기본값) 폼의 데이터를 제출한다. button 지정한 기능을 수행하는 버튼 역할을 한다. reset 폼의 작성 ..
button 사용과 onclick 사용의 문제점 form의 내용을 submit할 때 조건에 맞지 않으면 전송을 멈추고 페이지에 머물러야할 때가 있다. 예를 들면 회원 가입 페이지에서 아이디를 공백으로 넘길 때 전송을 멈추고 아이디 값을 입력하게끔 해야하는데, input type="submit" 대신 button 태그에 onclick=function()을 넣어서 해결하려고 해보았으나 이렇게 button 또는 onclick으로 사용하면 키패드, 모바일 환경에서 제대로 작동하지 않아 지양해야 한다고 한다. 또 제대로 멈추지 않아 alert로 오류 알림은 작동했지만 return false;는 작동하지 않은 채로 그대로 페이지가 전송돼버렸다. 해결 방법은 전송 버튼에는 input type="submit"을 사용하..
간단한 회원가입 폼을 간단하게 꾸미려고 body에 폰트를 적용했는데 input 칸의 placeholder로 넣은 문구에는 적용이 되지 않았다. 더불어 button과 select의 문구들까지 ! 그래서 input에 placeholder로 적힌 글자에 스타일을 적용하는 법을 찾아보았다 😀 input - placeholder 스타일 적용 방법 @font-face { font-family: 'SUITE-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } body { font-f..
로그인 폼, 회원 가입 폼 등 input 칸을 이용했을 때 값을 입력하지 않고 전송하면 값을 넣어달라는 alert창이 필요할 때가 있다. onclick하면 alert을 띄우는 function을 호출하고, function 안에서 조건문을 이용해 null값일 시 alert을 출력하면 된다😊 // 클릭 시 function A() 발생 placeholder에 아이디를 입력해달라는 문구를 적어서 null값이 나오지 않을 수 있지 않을까 했는데 value 값을 비교해 판단하기 때문에 다행히 상관이 없었다 o.ob script 안에서 function A()를 만들어 주었다. 각 input 태그의 id를 가져와 변수에 저장해주었고 (이때 function A()의 밖에서 저장하게 되면 전송한 값이 저장되지 않고 계속해서..
태그가 아닌 태그로 만들어진 버튼을 눌렀을 때 페이지 이동시키기 🎉 글쓰기 onclick에 location.href를 이용하면 된다 :D
