본문 바로가기

HTML／CSS85

[HTML/CSS] bootstrap selectbox 안녕하세요. 부트스트랩을 이용하여 selectbox를 쉽게 만들어 보겠습니다. * 결과 * 준비 https://stickode.tistory.com/821 참고해서 부트스트랩을 사용할 수 있게 해주세요 * 코드 A B C D E F select 태그의 class = "form-select"값을 주었습니다. 셀렉박스의 윗 공간에 여백을 주기 위해 mt-4 속성값을 주었습니다. mt는 margin top에 해당됩니다. * 전체 코드 DOCTYPE html> A B C D E F * 기타 속성 글자 크기, 비활성화도 설정가능하니 공식사이트를 참고하여 적용하시길 바랍니다. https://getbootstrap.com/docs/5.3/forms/select/#default Select Customize the n.. 2023. 7. 12.
[HTML/CSS] table contenteditable 속성 사용하기 안녕하세요! Table로 수정 등의 input이 가능하게 하는 기능들을 구현 시에 이전에는 td안에 input 요소를 넣어, input 내에서 사용자가 글씨를 입력할 수 있도록 했었는데요. 오늘은 'contenteditable' 속성을 사용해서 바로 요소 내부에서 글자를 적고 수정할 수 있도록 해보겠습니다. disabled,required등의 속성 알지만, contenteditable은 대체 뭘까요? -The contenteditable global attribute is an enumerated attribute* indicating if the element should be editable by the user. If so, the browser modifies its widget to allow .. 2023. 6. 24.
[HTML/CSS] bootstrap Grid, border 안녕하세요. 오늘은 bootstrap을 이용하여 편리하게 공간을 분배해보겠습니다. - 완성 - bootstrap 셋팅 bootstrap을 쓸 수 있도록 추가해줍니다. - grid (class 속성) col-8 col-3 col-1 class 속성값으로 row, col을 사용합니다. row한 줄을 12칸으로 나눠 8칸, 3칸, 1칸을 차지한다는 뜻입니다. - border (class 속성) col-8 col-3 col-1 눈에 보이지 않으므로 테두리를 설정해봅니다. border-success는 저 이름의 색상이 정해져있습니다. 아래 border-danger도 마찬가집니다. 아래 테두리만할지, 전체테두리인지 등을 설정해줍니다. 자세한 값은 공식홈페이지를 참고해주세요 - Color and background .. 2023. 6. 12.
[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.

티스토리툴바