HTML／CSS95 [ HTML/CSS ] 회원가입 화면 만들기 안녕하세요! 오늘은 회원가입 화면을 만들어보려고 합니다! 결과입니다! 전체 코드입니다! Remember-Feedback 로그인 약관 동의 전체 동의 (필수) 개인회원 약관에 동의 상세 보기 (필수) 개인정보 수집 및 이용에 동의 상세 보기 (선택) 마케팅 정보 수신 동의 - 이메일 상세 보기 (선택) 마케팅 정보 수신 동의 - SMS/MMS 상세 보기 회원정보를 입력해주세요 휴대폰/이메일 메세지 비밀번호 메세지 비밀번호 확인 메세지 닉네임 메세지 2022. 12. 26. [HTML/CSS] 웹 사이트에서 모바일 화면 레이아웃 보여주기 웹사이트에서 앱을 홍보할때, 모바일 화면 형태로 보여줘야 하는 경우가 있습니다. 해당 경우에 사용할 수 있는 모바일 화면 레이아웃을 HTML, CSS와 Javascript 로 구현해봤습니다. Home Work Blog About Us const contents = document.querySelectorAll(".content"); const listItems = document.querySelectorAll("nav ul li"); listItems.forEach((item, idx) => { item.addEventListener("click", () => { hideAllContents(); hideAllItems(); item.classList.add("active"); contents[idx]... 2022. 12. 24. [HTML/CSS] 웹 로딩 화면 만들어보기 간혹 용량이 크거나, 데이터를 가져오는 시간이 오래 걸릴 때, 로딩창을 띄워야하는 경우가 있습니다. 오늘은 HTML과 CSS만을 이용하여 Loading 페이지를 만들어보도록 하겠습니다. * { box-sizing: border-box; } body { background-color: #2c3e50; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .kinetic { position: relative; height: 80px; width: 80px; } .kinetic::after, .kinetic::before { content: ''; position: abso.. 2022. 12. 9. [HTML/CSS] Drag&Drop 구현해보기 웹에서 종종 Drag & Drop을 구현해야 할 경우가 있습니다. HTML 과 CSS, JavaScript 로 구현해보겠습니다 const fill = document.querySelector(".fill"); const empties = document.querySelectorAll(".empty"); fill.addEventListener("dragstart", dragStart); fill.addEventListener("dragend", dragEnd); for (const empty of empties) { empty.addEventListener("dragover", dragOver); empty.addEventListener("dragenter", dragEnter); empty.addEven.. 2022. 11. 24. [ HTML / CSS ] 스크롤바 커스텀하기 안녕하세요. 오늘은 div의 스크롤을 커스텀 해보겠습니다. div에 "overflow-y:scroll" 옵션을 주면 세로 스크롤바가 생성됩니다. 기본 모양은 이런 형태인데요 위아래 화살표를 없애고 스크롤 바 뒤 옅은 회색 배경도 없애보겠습니다. html 내용1 내용2 내용3 내용4 내용5 내용6 내용7 scrollbar.css .scroll_box { width: 300px; height: 150px; background-color: #ffffff99; overflow-y: scroll; } .inner_content { height: 25px; } .scroll_box::-webkit-scrollbar { width: 6px; } .scroll_box::-webkit-scrollbar-track { b.. 2022. 11. 21. [ HTML / CSS ] 마우스 커서 커스텀하기 안녕하세요, 오늘은 CSS cursor 속성을 사용해서 마우스 커서를 원하는 이미지로 바꿔보겠습니다. CSS cursor 속성은 다음과 같이 적용할 수 있습니다. cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5, auto; 커스텀 마우스 설정을 하려면 cursor 속성 값으로 한개 또는 여러 개의 값들을 사용할 수 있습니다. 여러 개의 값들을 사용할 경우 쉼표로 분리해야 하며, 첫번째 이미지 파일 로딩에 실패했을 경우 그 다음 것이 적용됩니다. 그리고 url()의 괄호 안에는 변경하고자 하는 커서 이미지 파일의 경로를 입력합니다. 위에서 'auto' 라고 입력된 값은 필수로 입력해야 하는 키워드 값으로, 모든.. 2022. 11. 17. [HTML/CSS] 버튼 애니메이션 만들어보기 오늘은 클릭하면 파장이 이는 버튼을 HTML과 CSS, Javascript 로 구현해보겠습니다. Click Me const buttons = document.querySelectorAll(".ripple"); buttons.forEach((button) => { button.addEventListener("click", function (e) { const x = e.clientX; const y = e.clientY; const buttonTop = e.target.offsetTop; const buttonLeft = e.target.offsetLeft; const xInside = x - buttonLeft; const yInside = y - buttonTop; const circle = docum.. 2022. 11. 9. [HTML / CSS] textarea 커스텀하기 안녕하세요 오늘은 textarea를 커스텀 해보겠습니다. 기본 textarea는 이런 형태인데요 여기서 크기 조절 기능과 테두리 선을 없애고, 밑 선만 있는 형태로 바꿔보겠습니다. html textarea.css #custom_textarea { width: 300px; height: 30px; font-size: 18px; background-color: #8b8b8b1c; resize: none; color: black; border: none; border-bottom: 2px solid #0000007e; outline: none; } 결과물 너비와 높이는 필요에 맞게 조절하시면 됩니다. 2022. 11. 6. [ HTML / CSS ] ::after, ::before 사용해보기 안녕하세요 오늘은 css 의 가상요소(pseudo-element)인 ::after 과 ::before 에 대해 알아보겠습니다. CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(pseudo-element)라고 합니다. 그리고 ::after, ::before 는 내용의 앞과 뒤에 컨텐츠를 추가할 때 사용하면 유용한 가상요소입니다. 이 컨텐츠는 content 라는 속성에서 정의할 수 있습니다. 바로 예제로 넘어가겠습니다... 2022. 11. 2. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음
