채팅텍스트만 따로 span으로 감싸서 클래스 넣어주실 수 있나요?
2015.11.19 05:10
기존에 있는 걸로 만들어본 화면입니다.
여기서 클래스를 조금 더 세부적으로 만들어주실 수 있는지 해서요.
아래 클래스 추가 부탁드려도 될까요?
1. li 안에 작성자 네임도 클래스명을 붙여주세요.
2. li 안에 채팅 텍스트도 span으로 감싸주시고 클래스를 붙여주세요.
3. li 안에 내용들을 모두 div.chat_wrap 등의 클래스명으로 묶어주세요.
4. li가 내 대화일 경우만 클래스가 붙어있던데 상대방 대화일 때도 클래스를 넣어주세요..
5. 사용자닉네임과 시간을 같은 box로 묶고, 시간은 종전대로 채팅 텍스트 하단에도 추가로 하나 넣어주세요.
예를 들면 이런 구조입니다..
.uha_wrap > .chat_wrap > .name_box > .name
.uha_wrap > .chat_wrap > .name_box > .time
.uha_wrap > .chat_wrap > .text
.uha_wrap > .chat_wrap > .time
내글과 다른 사람의 글은
.uha_wrap > .chat_wrap.is_me
.uha_wrap > .chat_wrap.is_others
뭐 이런 식으로 구분한다던지;;
이상입니다^^;
6. 로그인했을 경우 사용자프로필 이미지도 가져올 수 있나요?
만들어보고 싶은 화면은..
http://medialoot.com/item/chat-window-app-ui/
이나 카톡화면이나
https://www.google.co.kr/search?q=chatting+psd&biw=1472&bih=787&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMIzbX-w_6ayQIVCaOUCh1ORw7O#imgrc=Vx4ilEY24ifQmM%3A
주로 이런 화면들을 만들어보고 싶습니다.
댓글 5
-
우하하
2015.11.20 00:02
-
우하하
2015.11.20 05:34
/* 자기 자신 */
#uha_chat_msgs > li.is_me
/* 타인 */
#uha_chat_msgs > li.is_notme/* 이름들 */
#uha_chat_msgs > li > .name/* 대화내용 */
#uha_chat_msgs > li > .text위와 같이 일부 수정하였습니다. 다 반영하지 못한 이유는 호환성 때문인데요, 이미 기존 CSS 뼈대를 고쳐서 쓰는 분들이 계신데 원본 구조를 바꾸어버리면 화면이 왕창 깨지게 될 것입니다.
이런 식으로 커스터마이징하는 데는 한계가 있으므로, 템플릿을 불러들여서 원하는 모양을 자유자재로 표현할 수 있는 새로운 방법이 있는지 강구해보도록 하겠습니다.
-
우하하
2015.11.20 05:38
그리고 사용자 프로필 이미지를 불러오는 것은 가능합니다만 회원님의 서버 쪽에서 약간의 작업이 필요합니다.
우리 서버에서 가지고 있는 정보는 이름밖에 없기 때문에,
예) uha.kr/profile/getImage?id=우하하
이런 식으로 외부 URL을 연결해주는 것이 유일한 방법입니다.
프로필 사진을 띄울 수 있는 공간이 있는 테마를 만들고 나서 이 기능도 지원하도록 하겠습니다.
-
우하하
2015.11.20 10:59
여러가지로 생각해봤는데, 몇 가지 테마를 아예 포함시켜서 사람들이 변수 값으로 고를 수 있게 하는 방법이 제일 좋아보입니다. 이온디님께서 스킨을 만들어서 HTML과 CSS 파일을 올려주시면 스킨 선택 기능을 만들도록 하겠습니다. 단, HTML을 수정할 수 있는 것은 #uha_chat_msgs 안의 내용만입니다. (CSS는 전부 가능) 그 밖의 것까지 수정하려면 너무 번거로워서요ㅠ
-
이온디
2015.11.20 11:26
감사합니다. ^^;
의견 감사합니다. 검토해보고 글 올리겠습니다~