소낙눈님
트게더를 위한 CSS : 빠른 도움말 & 자주 묻는 질문
종합적인 도움말을 확인하고 자주 묻는 질문에 대응하는 특정 문서로 이동할 수 있습니다.
건의 및 수정 요청은 댓글 · 질문 카테고리 · 디스코드를 통해 가능합니다.
최종 업데이트 - 221212
도움말의 도움말 |
#숫자 = 분류
@숫자 = 연계 분류
■ = 질문¹
1. 작은 #숫자 분류에 존재하는 질문은 유사한 의미를 가진 '보조 질문'입니다.
□ = 일반 답변¹
○ = 외부 링크(문서) 답변¹
1. 같은 #숫자 분류에 존재하는 답변은 복수 답변입니다
-- : 항목형 답변
①② : 순서형 답변
-①-②-③ : 하위 순서형 답변
도움말 시작 소낙눈 트게더에 대한 설명 |
#1
■ 해당 게시판(소낙눈 트게더)에 올라오는 가이드 및 도움말은 트게더의 공식 도움말인가요?
□ 아니요. 해당 게시판은 트위치 및 트게더에서 운영하지 않습니다.
#2
■ 소낙눈 트게더에 빠르게 진입하려면 어떻게 해야 하나요?
□ 브라우저 주소창에 naknoon.cc를 입력하면 소낙눈 트게더로 이동합니다.
□ 트게더 디자인 정보 모음 버튼 옆에 있는 별 모양의 버튼을 눌러 트게더 즐겨찾기에 추가합니다.
CSS 시작하기 입문자를 위한 CSS 언어 소개 |
#1
■ CSS는 무엇인가요?
□ CSS는 웹 페이지를 디자인하는 언어입니다. 이 언어를 통해 트게더 게시판을 꾸밀 수 있습니다.
#2
■ CSS는 트게더 디자인에만 사용되는 언어인가요?
□ CSS는 웹 프로그래밍의 필수 언어이자 가장 인기 있는 언어 중 하나입니다.
#3
■ CSS를 통해 무엇을 할 수 있나요?
■ CSS를 통해 꾸밀 수 있는 부분은 무엇인가요?
□ 게시판 페이지에 보이는 여러 요소들을 디자인(색상 · 테두리 · 그림자 · 크기 · 위치 조정 등)할 수 있습니다.
□ CSS는 '디자인'을 담당하는 언어로 이론상 직접적인 상호작용(버튼 클릭 시 요소 생성 · 링크 걸기 등)에 관여할 수는 없습니다.
#4
■ CSS는 배우기 어렵나요?
□ 트게더 디자인만을 목적으로 한다면 크게 어렵지 않습니다.
트게더와 CSS CSS 디자인 권한 · 디자인 적용 방법 · 디자인 규칙 |
#1
■ 트게더는 어떻게 꾸밀 수 있나요?
□ 전술한 CSS 언어를 통해 디자인할 수 있습니다. 여러 커뮤니티 중 트게더만의 특징이자 강점¹으로 보셔도 무방합니다.
1. CSS를 수정을 통해 없던 요소를 생성해내거나 사이트 구조를 바꾸는 등 매우 높은 디자인적 자유도를 가집니다.
#2
■ CSS를 통해 트게더 게시판을 꾸밀 수 있는 권한을 가진 사람은 누구인가요?
□ 해당 게시판의 관리자들입니다. 즉 스트리머 본인과 스트리머가 임명한 부관리자¹가 Custom CSS 설정 페이지에 진입할 수 있습니다.
1. 부관리자는 트위치의 매니저(진은검)과는 별개입니다.
#3 @2
■ 트게더 게시판에 관리자 권한이 없다면 해당 트게더(게시판)를 꾸밀 수 없나요?
□ 네. CSS를 적용할 수 없으므로 해당 트게더 게시판에 진입하는 모든 유저¹에게 해당 디자인을 보이게 할 수는 없습니다.
1. 나에게만 해당 디자인이 적용되기를 원하는 경우 개발자 도구를 사용하거나 브라우저 익스텐션을 사용해야 합니다.
#4
■ 어떻게 트게더 게시판에 디자인을 적용할 수 있나요?
■ 만들어진 CSS 코드를 어디에 넣어야 하나요?
① 트게더 게시판 하단 → 설정 버튼 → Custom CSS 탭에 진입합니다.
② PC 환경의 코드는 데스크톱 뷰 CSS에, 모바일 환경의 CSS 코드는 모바일 뷰 CSS에 작성합니다.
③ 하단의 '설정하기' 버튼을 누릅니다.
#5
■ 트게더를 꾸밀 때 지켜야 하는 사항이 있나요?
○ 트게더의 커스텀 CSS 가이드라인을 준수해야 합니다.
트게더 CSS 디자인 시작하기 CSS 디자인을 위한 유용한 링크 · 직접 트게더 디자인하기 |
#1
■ CSS 디자인에 필요한 사이트나 정보를 알려주세요. (링크 모음)
○ CSS 베이스 만들기 : CSS 생성기 by 황천의쩌리맨 · CSS 공유 템플릿
○ CSS 정보 - CSS 기본 : MDN Web Docs · TCP School
○ CSS 정보 - 트게더 중점 : 방송천재 CSS 모음 · 소낙눈 트게더 · 지니가는사람 트게더
○ CSS 도움 : CSS 디자인 커뮤니티 · 소낙눈 디스코드 서버 · 지니가는사람 디스코드 서버
#2
■ CSS에 대해 모르지만 트게더를 꾸미고 싶습니다. 어떻게 해야 하나요?
□ 직접 디자인할 예정입니다.
-① 상단의 'CSS 베이스 만들기' 링크 모음을 통해 전체적인 디자인을 합니다.
-② 수정할 부분이 있다면 상단의 'CSS 정보' 링크 모음 + 구글링 등을 통해 만들어진 CSS 코드를 수정합니다.
-③ 코드 작성 중 도움이 필요하다면 상단의 'CSS 도움' 링크 모음 등을 통해 질문합니다.
□ 직접 디자인하지 않을 예정입니다.
-① 유/무료 CSS 커미션¹을 신청²하셔야 합니다.
1. 저는 별도로 커미션을 운영하고 있지 않습니다. 트게더의 구인구직 게시판이나 아트머그와 같은 플랫폼 등을 통해 디자이너와 직접 접촉하세요.
2. CSS는 보편적인 언어이므로 트게더 디자인 경험이 없는 일반적인 웹 디자이너를 찾으셔도 이론상 상관은 없습니다.
CFT 시리즈 트게더를 위한 CSS 가이드 문서 |
#1
■ CFT란 무엇인가요?
□ 트게더를 위한 CSS 시리즈는 광활한 CSS 정보들 사이에서 트게더를 디자인하기 위한 CSS를 중점으로 다루는 문서입니다.
○ 트게더를 위한 CSS : 톺아보기 문서를 참조하세요.
#2
■ CFT 문서가 정상적으로 표시되지 않습니다.
■ 이 트게더 페이지가 정상적으로 동작하지 않습니다.
□ Windows/macOS 환경에서 최신 버전의 Chrome · Firefox · Safari 브라우저를 사용해 접속해주세요.
트게더 요소 디자인 자주 묻는 디자인 |
#1
■ 특정 디자인(테두리 넣기 · 모서리 둥글게 등...)을 구현하고 싶습니다.
○ CFT : 키워드 정리 문서를 참조하세요.
#2
■ 트게더의 폰트를 변경하고 싶습니다.
○ CIFT : 폰트 선택 시 고려해야 하는 요소 → CXFT : 폰트 적용의 기초
#3
■ 다크 모드(요소)는 어떻게 디자인할 수 있나요?
■ 다크 모드에서 디자인이 이상해집니다.
#4
■ 위로가기 버튼을 클릭했을 때 부드럽게 스크롤되려면 어떻게 해야 하나요?
CSS 문법 사소해서 잘 알려주지 않는 CSS 문법 |
#1
■ 따옴표를 사용할 때 큰따옴표와 작은따옴표 중 무엇을 사용해야 하나요?
□ 둘 다 사용해도 됩니다.
#2
■ 자식 결합자 > 양 옆에는 공백을 포함해야 하나요?
□ 상관 없습니다.
#3
■ 이미지를 불러오려면 어떻게 해야 하나요?
□ 디스코드 이용하기
-① 원하는 이미지를 디스코드에 전송합니다.
-② 해당 이미지를 우클릭하여 이미지 링크를 복사합니다.
-③ 해당 링크를 url(···) 형태로 CSS 구문에 붙여 넣습니다.
□ 웹서버 이용하기
-① 아마 이미 잘 알고 계실 겁니다.
#4
■ Font Awesome 아이콘을 사용하려면 어떻게 해야 하나요?
○ content 값 : Font Awesome 4.7을 통해 유니코드를 확인한 뒤¹ 값에 '\유니코드' 형태로 삽입²합니다.
○ 본문 : Font Awesome 4.7을 통해 유니코드를 확인한 뒤¹ 현 버전에 진입 후 검색하여 해당 아이콘을 복사하여 삽입²합니다.
1. 4.7과 현 버전을 구분하는 이유는 CTFT : Font Awesome을 참조하세요.
2 반드시 사용을 원하는 요소의 font-family에 'fontawesome'이 포함되어 있어야 합니다.
#5
■ 가상 클래스와 가상 요소의 차이는 무엇인가요?
□ 추가 선택자 키워드¹로 가상 클래스는 '상태'를 나타내며 쌍점 한 개를, 가상 요소는 '부분'를 나타내며 쌍점 두 개를 사용합니다.
1. 자세한 정보는 CIFT : 개발자 도구와 페이지 검사의 cf. 가상 클래스와 가상 요소 참고 블럭과 MDN의 의사 요소와 의사 클래스를 참조하세요.
CSS 문제 해결 어? 금지 |
#1
■ 트게더 앱에서 CSS가 적용되지 않습니다.
■ 트게더 앱은 어떻게 꾸밀 수 있나요?
□ 정상입니다. 트게더 앱에서는 CSS가 적용되지 않으며 일부 요소만을 non-CSS로 커스텀할 수 있습니다.
○ CIFT : 트게더 애플리케이션 커스텀을 참조하세요.
#2
■ 게시판 소개 · 스케줄 · 클립 · 설정 페이지에서 CSS가 적용되지 않습니다.
□ 정상입니다. 해당 페이지에서는 CSS가 적용되지 않습니다.
#3
■ Custom CSS 설정 과정에서 오류가 뜹니다.
■ 특정 요소의 디자인을 넣었는데도 적용되지 않습니다.
□ 다음 순으로 코드를 검사해 보고, 해결되지 않았다면 상단의 'CSS 도움' 링크 모음을 통해 지원을 받습니다.
-① 선택자만 존재하거나 선언만 존재하는 부분(=불완전한 구문)의 존재 확인
-② 괄호 및 주석의 열림/닫힘이 정상적인지(=불완전한 구문) 확인
-③ 세미콜론이 빠졌는지 확인
-④ 중복된 구문이 있는지 확인
-⑤ 명시도 검사
#4
■ 게시판 내 스트리머 프로필 사진이 정상적으로 표시되지 않습니다.
□ 트위치에서 프로필 이미지를 변경한 경우 트게더에서 로그아웃한 후 다시 로그인해주세요.
CSS가 아닌 것 CSS의 영역이 아닌데 CSS로 착각하는 것들 |
#1
■ 게시판 내 카테고리의 색상(라이트 모드 기준)을 변경하려고 합니다.
① 트게더 게시판 하단 → 설정 버튼 → 카테고리 설정 탭에 진입합니다.
② 각 카테고리 라인의 컬러 코드를 변경하여 카테고리의 색상을 변경합니다.
③ 하단의 '설정하기' 버튼을 클릭합니다.
#2
■ 비추천 버튼을 없애고 싶습니다.
■ 비추천 버튼을 나타나게 하고 싶습니다.
① 트게더 게시판 하단 → 설정 버튼 → 권한 설정 탭에 진입합니다.
② '비추천 허용' 체크박스를 체크하거나 체크 해제합니다.
③ 하단의 '설정하기' 버튼을 클릭합니다. '부관리자 설정' 바로 위에 있습니다.
#3
■ 트게더 로고를 클릭했을 때 트게더 메인 페이지가 아니라 게시판 메인 페이지로 이동하고 싶습니다.
■ 상단 검색 버튼 옆에 트게더 메인 페이지로 이동하는 홈 버튼을 추가하거나 삭제하고 싶습니다.
① 트게더 게시판 하단 → 설정 버튼 → Custom CSS 탭에 진입합니다.
② '로고 클릭 시 경로'를 변경합니다
- '트게더 메인으로...'로 설정하면 트게더 로고를 클릭했을 때 트게더 메인 페이지로 이동합니다.
- '현재 게시판 최신 목록으로...'로 설정하면 상단 검색 버튼 옆의 홈 버튼을 클릭했을 때 트게더 메인 페이지로 이동합니다.
③ 하단의 '설정하기' 버튼을 클릭합니다.
CSS 작업 환경 장인이 아닌 일반인은 도구를 많이 가립니다 |
#1
■ 어떤 환경에서든 CSS를 이어받아 작업하고 싶습니다.
■ CSS 작업 히스토리를 확인하고 싶습니다.
○ CSS 디자인 커뮤니티의 Github 튜토리얼을 통해 GitHub를 사용해 보세요.
#2
■ 자동 완성 / 괄호 구분 등 CSS 수정 작업을 보다 편리하게 하고 싶습니다.
□ 텍스트 에디터를 사용해보세요. VSCode를 추천합니다.
CSS 업그레이드 디테일한 디자인 · CSS 뛰어넘기 |
#1
■ 폰트가 OpenType을 지원합니다.
○ CTFT : OpenType 시작하기를 참조해 OpenType을 적용해보세요.
#2
■ 상호작용할 수 있는 요소를 추가하고 싶습니다.
□ XSS¹를 통해 html 평문과 JS를 비롯한 스크립트를 추가할 수 있습니다.
1. 트게더 가이드라인을 위반합니다. 악용 시 트게더 측의 대응이 이루어질 수 있습니다.
트게더이벤트
댓글 0개 ▼