5번째 줄: | 5번째 줄: | ||
=='''개별속성'''== | =='''개별속성'''== | ||
===속성 설정하기=== | ===속성 설정하기=== | ||
Style에 사용되는 속성은 모두 | Style에 사용되는 속성은 모두 [https://ko.wikipedia.org/wiki/HTML HTML]과 [https://ko.wikipedia.org/wiki/CSS CSS]에서 파생된 것입니다. 따라서 각종 검색엔진을 통해 HTML, CSS 속성 위주로 탐색할 수 있습니다. 아래의 속성 유형도 검색을 통해 다양한 기능을 추가로 살펴볼 수 있습니다. 나아가 인터넷을 통해 원하는 설정의 속성을 찾을 수 있을 것입니다. | ||
{| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;" | {| class="wikitable" style="background:white;width:100%;text-align:center;font-size:85%;" |
2021년 8월 7일 (토) 10:46 판
제이위키의 규정 |
기본방침 (문서 관리 방침 · 토론 관리 방침 · 이용자 관리 방침 · 운영 관리 방침) · 편집지침 · 커뮤니티 가이드라인 · 동음이의 리다이렉트 요청 |
제이위키의 도움말 |
FAQ · 도움말 (사이트 소개 · 저작권 · 운영진 · 단축키 · 편집 · 문법 (표 · HTML · CSS) · 틀 · 분류 · 등급 (등급 목록) · 동음이의) · 유저가이드 (기초문법 · 고급문법 · 정치 창작 팁 · 전쟁 창작 팁 · 판타지 창작 팁 · 언어 창작 팁 · 종교 창작 팁) · 권리침해 · 다른 위키와의 차이점 |
제이위키의 운영 |
운영진 (관리자 · 중재자) · 관리자 선거 (2018 · 2019 · 2021) · 투명성 보고서 · 재정 보고서 |
제이위키의 인정단체 |
인정단체 · 에른스트의 아무튼 공방 (아무거나 월간공방) · 그리다 · 감성위키 · 와르샤와웍스 · 연필이 닿는 곳 · 철통팀 · 오펜시브 프로젝트 팀 |
제이위키의 앙케이트 |
이 창작이 대단하다! (2021 세계관 · 2021 창작자 · 2020 세계관 · 2020 창작자 · 2020 편의성) · 연말시리즈 (2022 · 2023) |
제이위키 유저가이드 JWIKI USER GUIDE | ||
[ 기초 문법 ]
[ 고급 문법 ]
[ 주제별 팁 ]
| ||
본 템플릿(틀)은 의 유저가이드에 관한 것으로, '에른스트의 아무튼 공방'의 일부임을 밝힙니다. '주제별 팁'을 신청하시려면 토론으로 남겨주세요. 신청자는 그 주제에 대한 팁을 마음껏 작성하실 수 있습니다. |
개별속성
속성 설정하기
Style에 사용되는 속성은 모두 HTML과 CSS에서 파생된 것입니다. 따라서 각종 검색엔진을 통해 HTML, CSS 속성 위주로 탐색할 수 있습니다. 아래의 속성 유형도 검색을 통해 다양한 기능을 추가로 살펴볼 수 있습니다. 나아가 인터넷을 통해 원하는 설정의 속성을 찾을 수 있을 것입니다.
속성 명칭 | 입력한 내용 | 화면에 표시되는 내용 | 텍스트 설명 |
---|---|---|---|
color | <span style="color:orange;"> 오렌지 </span> | 오렌지 | 글자색을 설정합니다. |
style="…… color:[색상]; ……" | |||
background-color | <span style="background-color:orange;"> 오렌지 </span> | 오렌지 | 배경색을 설정합니다. |
style="…… background-color:[색상]; ……" | |||
↓ background-image | |||
linear-gradient | <span style="background-image:linear-gradient(to right, #000, yellow, #fff);"> 그라데이션 </span>
|
선형 그라데이션 | 선형 그라데이션을 설정합니다. |
style="…… background-image:linear-gradient([방향 or 각도], [색상1] [색상1 위치], [색상2] [색상2 위치], ……); ……" | |||
linear-gradient [방향] | <span style="background-image:linear-gradient(to top, #000, #fff);"> 그라데이션 방향 </span>
|
그라데이션 방향 | 그라데이션 방향을 지정합니다.[1] |
linear-gradient [각도] | <span style="background-image:linear-gradient(45deg, #000, #fff);"> 그라데이션 각도 </span>
|
그라데이션 각도 | 그라데이션 각도를 지정합니다. |
linear-gradient [위치] | <span style="background-image:linear-gradient(to right, gray 50%, gold 80%);"> 그라데이션 위치 </span>
|
그라데이션 위치 | 색상 위치를 지정합니다. |
repeating-linear-gradient | <span style="background-image:repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%);"> 반복 그라데이션 </span>
|
반복 그라데이션 | 그라데이션을 반복합니다. |
속성 명칭 | 입력한 내용 | 화면에 표시되는 내용 | 텍스트 설명 |
---|---|---|---|
font-size | <span style="font-size:15pt;"> 15pt </span> | 15pt | 글자크기을 설정합니다. |
style="…… font-size:[크기]; ……" | |||
width | {| style="width:80px;" | ~ | 표와 칸의 폭을 설정합니다. | |
style="…… width:[크기]; ……" | |||
width | {| style="height:3em;" | ~ | 표와 칸의 높이를 설정합니다. | |
style="…… height:[크기]; ……" |
속성 명칭 | 입력한 내용 | 화면에 표시되는 내용 | 텍스트 설명 |
---|---|---|---|
border | <span style="border: 1px solid orange;"> orange </span> | orange | 글자나 표의 테두리를 설정합니다. |
<span style="border: 1px dashed orange;"> dashed </span> | dashed | ||
style="…… border:[두케] [모양][2] [색상]; ……" | |||
border-radius | <span style="border: 1px solid orange; border-radius:20%;"> 둥근상자 </span> |
둥근상자 | 모서리의 둥글게 설정합니다. |
style="…… border-radius:[크기]; ……" |
속성 명칭 | 입력한 내용 | 화면에 표시되는 내용 | 텍스트 설명 |
---|---|---|---|
opacity | <span style="opacity:0.5"> 50% </span> | 50% | 투명도를 설정합니다. |
style="…… opacity:[크기]; ……" 투명도 값은 0(투명) ~ 1(완전 불투명) 사이 값으로 결정됩니다. |
속성 명칭 | 입력한 내용 | 화면에 표시되는 내용 | 텍스트 설명 |
---|---|---|---|
padding | (추가 바람) | (추가 바람) | 칸 내부의 여백를 설정합니다.[3][4] |
style="…… padding:[크기]; ……" 투명도 값은 0(투명) ~ 1(완전 불투명) 사이 값으로 결정됩니다. | |||
margin | (추가 바람) | (추가 바람) | 칸 외부의 여백를 설정합니다.[5][6] |
style="…… margin:[크기]; ……" 투명도 값은 0(투명) ~ 1(완전 불투명) 사이 값으로 결정됩니다. | |||
letter-spacing | <span style="letter-spacing:5pt"> 5pt </span> | 5pt | 자간을 설정합니다. |
style="…… letter-spacing:[크기]; ……" 투명도 값은 0(투명) ~ 1(완전 불투명) 사이 값으로 결정됩니다. | |||
line-height | <span style="line-height:250%"> 250<br/>% </span> | 250 % |
행간을 설정합니다. |
style="…… line-height:[크기]; ……" 투명도 값은 0(투명) ~ 1(완전 불투명) 사이 값으로 결정됩니다. |
속성 명칭 | 입력한 내용 | 화면에 표시되는 내용 | 텍스트 설명 |
---|---|---|---|
overflow | (추가 바람) | (추가 바람) | 스크롤바를 설정합니다. |
style="…… overflow:[속성]; ……" 속성 값) hidden: 숨김 / auto: 지정된 width, height 값을 넘길 때 생성 / scroll: 항상 보임 |
div와 span
특수명령어
expr 함수
if 함수
switch 함수
고급틀 제작
변수의 이해
변수틀의 기초
각주
- ↑ 기본값은 to right, 이며 to left, to top, to bottom 등이 가능합니다.
- ↑ none:없음 / solid:실선 / dashed: 점선 / dotted: 짧은 점선 / double: 더블라인
- ↑ 칸 테두리와 내용 사이의 여백
- ↑ padding-right, padding-top, padding-bottom, padding-left로 방향 별로 다른 값을 설정할 수 있다.
- ↑ 칸 테두리와 표 외부의 객체 사이의 여백
- ↑ margin-right, margin-top, margin-bottom, margin-left로 방향 별로 다른 값을 설정할 수 있다.