HTML／CSS91 [HTML/CSS] bootstrap 레이아웃 중앙에 배치하기 안녕하세요. 오늘은 bootstrap을 이용하여 CSS대신 레이아웃을 중앙에 쉽게 배치하겠습니다. 사용법은 간단합니다. - bootstrap 적용 전, 적용 후 - bootstrap 셋팅 태그에 위 코드를 추가해주면 바로 적용이 됩니다. 감싸고싶은 태그에 class속성 값으로 container를 입력해줍니다. 그러면 끝났습니다. - 전체 코드 DOCTYPE html> 세이노의 가르침 P. 29 당신 생각대로라면 이른바 재테크 전문가라는 사람들이 모두 부자이어야 하는데 그들의 평균 재산은 다른 직장인들과 크게 다르지 않다. 물론 나에게서 실전 투자 기법을 배우면 돈을 더 벌 수도 있을 것이다. 그러나 나는 당신이 스스로의 삶에 대한 태도부터 바로 세우지 않는 한 절대 부자가 될 수 없다고 하면서당신을 한심.. 2023. 6. 1. [HTML/CSS] ] css만으로 움직이는 배너 만들기 안녕하세요. 오늘은 CSS만으로 움직이는 배너를 만들어보겠습니다. 움직이는 배너 구현에 사용할 주요 사용 개념은 @-규칙의 @keyframe 인데, @keyframe에 앞서 @-규칙에 대해 간략히 알아봅시다. @-규칙(At-rule) : 1. @-규칙은 식별자(identifier)가 뒤따르는 at 기호('@' (U+0040 COMMERCIAL AT))로 시작하는 CSS 문이며 다음 세미콜론(';' (U+003B SEMICOLON)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다. - 출처: mozilla 2. CSS 에 행동 방식을 지시하는 CSS 문 입니다. at 기호 ' @ ' ( U+0040 COMMERCIAL AT )로 시작하고 그 뒤에 식별자가 오고 다음 세미콜론 ' ; ' .. 2023. 5. 30. [HTML/CSS] CSS만으로 마우스 hover시 효과 내기 안녕하세요. 오늘은 js없이 css만으로 마우스를 그림이나 글씨 등에 올려놓았을 때 시각적 효과가 나타나보도록 해보겠습니다. 구현을 위해 사용할 개념은 css의 가상 클래스와 가상요소입니다. 가상 클래스는 실제로 존재하는 요소(Element)에 가상의 클래스를 부여하여 특수한 상황을 정의하고 css로 제어할 때 쓰이는 개념입니다. 가상 클래스 앞에는 ':' 를 붙여 표시합니다. 이에 반에 가상요소는 말 그대로 지정된 요소(Element) 앞에 가상의 요소를 생성하여 css 스타일을 적용시키게 됩니다. 가상클래스와 구별하기 위해 '::'를 붙여 표시합니다. css의 가상 클래스 중 일부입니다. :active - 마우스나 키보드 등의 입력에 의해 활성화된 요소를 선택합니다. 이 클래스는 링크를 클릭하거나 버.. 2023. 5. 14. [HTML/CSS] Webrtc N:M 실시간으로 영상 전송하기 안녕하세요 이번 시간에는 Webrtc N:M 실시간으로 영상 전송을 구현해보겠습니다. 이 글을 보기 전에 해당 링크를 참고해주세요. ( https://stickode.tistory.com/715) 구현을 위한 코드에만 초점을 맞춰서 설명하겠습니다. server.js const express = require('express'); const path = require('path'); const app = express(); const http = require('http').createServer(app); const io = require('socket.io')(http); app.use(express.static(path.join(__dirname, '../public'))); let connected.. 2023. 3. 21. [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. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
