AD

채팅/봇 채팅창 가운데 정렬 코딩 공유(+그 외 알아두면 좋은 사이트)

갱알ㅱ
2022-11-30 21:10:17 3213 6 0

방송TIP 게시판은 처음 이용해보네요!

제가 공유할 내용은

채팅창 가운데 정렬 CSS와 방송 화면 디자인 무료 공유해주는 사이트 입니다!


- 채팅창 가운데 정렬-

제가 예전부터 채팅창 가운데 정렬하는 코딩을 찾고 있었는데 트게더를 아무리 뒤적여도 나오질않아 얕은 코딩 지식으로 제가 직접 '트윕'에 있는 CSS를 건들여서 한 가운데 정렬 코드입니다!

아래 제가 적어둔 CSS를 입력시 바로 아래의 사진과 같이 나옵니다!

* 필자의 방송 채팅 세팅(트윕)

글자 폰트 : KCC운영체

글자 색상 : #ffffff (흰색)

폰트 크기 : 75px

채팅창 사이즈는 자유! 본인 배경 이미지 혹은 채팅 사이트에 맞게 맞춰 적용하시면 됩니다

아래 이미지 속 폰트는 줄여둔 상태로 75px로 키우면 트윕 채팅창 미리보기에선 커 보일 수 있습니다!

사실 글자 크기는 방송프로그램으로 채팅창 크기 조절 할 수 있으니 편하신대로 쓰시면 될 것 같습니다!

67bcca3b77fa022889d1ef406703d27f.png

* {

  box-sizing: border-box;

}

html, body {

  height: 100%;

  overflow: hidden;

}

body {

  text-shadow: 0 0 9px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .6);

  background: $background_color;

  line-height: 1.5em;

  color: $text_color;

}

.reverse {

  direction: rtl;

}

#log>div {

  animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease $message_hide_delays forwards;

}

.colon {

  display: none;

}

#log {

  display: table;

  position: absolute;

  bottom: 0;

  left: 0;

  padding: 0 10px 10px;

  width: 100%;

  table-layout: fixed;

}

#log>div {

  display: table-row;

}

#log>div.deleted {

  visibility: hidden;

}

#log .emote_wrap {

  position: relative;

}

#log .emote_wrap img.emoticon {

  height: $font_sizepx;

  vertical-align: middle;

  margin: -5px 0;

}

#log .message,#log .meta {

  vertical-align: top;

  display: table-cell;

  padding-bottom: 0.2em;

}

.reverse #log .meta {

  text-align: center;

}

.reverse #log .message {

  direction: ltr !important;

  text-align: center;

}

#log .meta {

  width: 0%;

  text-align: center;

  padding: 0 0.2em;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

}

#log .message {

  text-align: center;

  word-wrap: break-word;

  width: 65%;

}

.badge {

  display: inline-block;

  margin-right: 0.2em;

  position: relative;

  height: 0.2em;

  vertical-align: middle;

  top: -0.1em;

}

.name{

  display : none;

}

.name {

  margin-left: 0.2em;

}

.reverse .name {

  margin-left: 0;

  margin-right: 0.2em;

}

#log {

  font: 600 $font_sizepx '$font_face';

  line-height: 1.5;

}



※ 주의!!

야매 코딩(제대로 한건지 모르겠어서.. 어찌저찌 된거같은 느낌)이라 코딩에 관해 질문 주셔도 대답해드릴 수 없습니다 ;ㅅ; << 이 부분 때문에 TIP게시판을 쓸지 고민했습니다..

제가 쓰고있는 코딩 그대로 복사 붙여넣기 했으니 그대로 쓰셔도 무관할거에요! 다른 동료 스머께도 공유해드렸는데 지장 없으셨습니다!


그 외에도 가운데 정렬에 관심이 있으신데 커미션 맡기기에는 부담스러우신 분들은

(부담스럽지 않으신 분들은 아트머그에 채팅창 디자인해주시는 분이 계시더라구요!)

캐니 이용해보셔도 괜찮을 것 같습니다! 예전에 가운데 정렬 하겠다고 이것저것 찾아봤는데

파티클 공유도 돼있고 채팅창 설정도 가능한 사이트더라구요!

단, 저만 그런건진 모르겠는데 글꼴 적용이 안됐습니다..😥 고딕체?..밖에 안됐던 것 같아서 저는 사용하지 않고 있습니다!

(파티클은 괜찮은 것 같아요! 로그인해야 서비스 이용이 가능하니 한번 구경해보셔도 괜찮을 것 같아요!)



- 방송 화면 디자인 무료 공유 사이트 -

채팅박스 디자인  /  방송 화면 디자인

필자는 버츄얼을 사용하기 때문에 마땅한 배경화면을 찾다가 이런 영상을 발견해서 아직까지도 유용하게 쓰고있습니다!

저처럼 디자인 갈피 못잡으시는 분들한테는 많이 유용할듯 합니다! 크롬 구글 번역기를 이용해서 보시면 편리합니다!

여기에도 마음에 드시는게 없으시면 '아트머그'에 3D/2D 배경화면 디자인 해주시는 분들이 계시니 그분들께 커미션을 맡기셔도 좋습니다!



방송초기에 채팅창 가운데 정렬에 눈이 멀어서 공유된건 없나 트게더 Q&A와 TIP 게시판을 돌아다녀봤지만 큰 성과는 없었던 지난날을 생각하면서 혹시 저와같이 가운데 정렬을 찾으러 돌아다니시는 분들이 계실까해서 별거는 아니지만 제가 코딩해서 만든 가운데 정렬 CSS라도 괜찮으시다면 마음껏 이용해주시고 주변에 같은 고민하시는 분들께도 많은 공유해주시길 바랍니다!

0ecc4002-38b1-4d39-ac35-48e5ca58d1f2


댓글 0개  
이전 댓글 더 보기
AD
방송하기프로그램채팅/봇업데이트
5
프로그램
간단한 타이머 프로그램
인디벨
02-01
3
01-30
1
01-29
6
01-21
2
01-12
3
프로그램
OBS 스튜디오 29.0 업데이트 [4]
상어밥__
01-09
5
방송하기
OBS 28의 사운드 관리에 대한 글 [1]
로젠케이
12-24
1
프로그램
Nginx RTMP 툴 [1]
베리머취래빗
12-18
4
12-07
9
프로그램
리그 오브 레전드 오버레이 [3]
포도네
12-04
7
프로그램
트위치 클립 다운로드 받기 [7]
로젠케이
12-02
5
11-18
7
11-12
인기글 글 쓰기