HTML／CSS87 [HTML/CSS] Webrtc 1:1 영상통화를 위한 화면 세팅하기 안녕하세요 이번에는Webrtc 1:1 영상통화를 위한 html/css 를 통해 화면을 세팅 해보겠습니다. webrtc 1:1 영상통화를 위해 이전 글도 참고해주세요 https://stickode.tistory.com/715 index.html 나: Users List : No users connected Call 상대방 : index.css #call { display: inline-flex; background: linear-gradient(214.84deg, rgb(15, 9, 68) 20.52%, rgb(9, 4, 50) 89.43%); transition: background 1s; cursor: pointer; padding: 5px 10px; border-radius: 5px; margin-t.. 2023. 2. 24. [ 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. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
