편집토론문서 역사

연습장:Kimchan/노트

< 연습장:Kimchan
Kimchan (토론 | 기여)님의 2023년 3월 7일 (화) 11:19 판
분류:
김찬
관련 문서
[ 펼치기 · 접기 ]
활동 (제이위키) · 사상 · 게임 · 자캐 · 여담 · 군복무 · 파일 (아이펠루스)
소속 단체 에른스트의 아무튼 공방 · 오펜시브 프로젝트 팀
창작 작품 세계관 프로젝트 [보기] (아이펠루스 · 우리는 죽음 속에 살고 있다 · 뒤편 · 아파란시아 · 프로젝트 옴니버스 · 프로젝트 사쿠라 · 초상세계 · 프로젝트 무협) · 슬래시 앤 서바이브 · 글로리 어게인 · 저승국 등
기여 작품 무도학당 · 칠성고등학교 · 퇴귀야담 · 벌레굴 등
주요 자캐 아릴렌 · 세이넬 아르젠베르크 · 사도원 · 서은우 등
관련 문서 연습장 · CSS · Lua · 분류 · 프로필
이 사용자와 관련한 세계관은 여기를, 생성한 틀은 여기를 참고하십시오.
KimChan
김찬 연습장
연습장
메모 낙서 노트 연구 팁 공부 모듈
틀 CSS Lua

위키독에서 직접 작성했던 HTML 문법 문서 내용 백업
제이위키에서는 필요 없거나 작동하지 않는 내용은 제외함

개요

이하의 내용은 제이위키 문서 편집에 유용하게 쓰일 수 있는 다양한 HTML 태그 및 속성에 관해 서술합니다.

모든 코드는 태그로 적용하며 태그는 소수를 제외하고 여는 태그와 닫는 태그로 이루어집니다.[1] 여는 태그와 닫는 태그는 반드시 함께 사용되어야 합니다.

표의 출력칸 셀은 비교를 위해 볼드체+18pt로 작성된 것을 함께 기재합니다. 코드칸 셀에 작성된 코드에는 글자 크기가 포함되지 않으므로 주의하십시오.

HTML에서 요소들 사이의 간격 구분
margin
border
padding
content
padding
border
margin

이 뒤로 나올 코드들에는 margin, border, padding이라는 개념들이 자주 등장합니다. 이에 대해 정확히 알고 넘어가면 좋습니다. 표에는 서로의 위아래로만 구분이 되어 있지만 위아래뿐 아니라 상하좌우 모든 방향을 둘러쌉니다.

  • content는 대부분의 요소들이 차지하는 공간입니다. 텍스트, 이미지, 링크 등 사실상 margin과 border, padding을 제외한 모든 것들이 content에 포함된다고 볼 수 있습니다.
  • padding은 border로 둘러싸여진 하나의 오브젝트(object) 내부의 공간을 말합니다.
  • border는 요소의 테두리를 구성합니다. border가 하나의 오브젝트(object)에서 가장 바깥 부분을 담당합니다.
  • margin은 HTML 문서에서 가장 바깥쪽 여백, 즉 오브젝트(object)에 포함되지 않는 나머지 모든 공간을 말합니다.

그림자 효과

그림자 효과 예시

사용하는 HTML 속성

  • text-shadow - span, div 등 텍스트에 쓰이는 태그의 하위 속성으로 쓰입니다.
  • box-shadow - div, table 등 기본 display 값이 block인 요소들에 쓰입니다.
<span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색];">작성할 내용</span>

텍스트 그림자를 가로세로 2px 움직여 그림자가 진 것과 같은 효과를 냅니다. 그림자 색은 글자 색보다 명도가 살짝 높은 색으로 설정하면 자연스럽습니다.

입력 출력
<span style="text-shadow: 2px 2px 0px gray; color: black;">그림자가 있는 글자</span> 그림자가 있는 글자
그림자가 있는 글자

가로움직임과 세로움직임에 0이나 음수를 넣어 그림자의 방향을 조절할 수도 있습니다.

입력 출력
<span style="text-shadow: -2px -2px 0px gray; color: black;">왼쪽 위 그림자</span> 왼쪽 위 그림자
왼쪽 위 그림자
입력 출력
<span style="text-shadow: 2px 0px 0px gray; color: black;">오른쪽 그림자</span> 오른쪽 그림자
오른쪽 그림자

그림자 효과는 여러 개 중첩할 수 있으며, [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색]이 한 그룹입니다. 그림자 효과를 하나 더 추가하고 싶다면 맨끝 그림자색 뒤에 쉼표(,)를 달고 띄어쓰기하여 그룹을 추가 작성하면 됩니다. 마지막 효과의 맨끝 그림자색 뒤에는 세미콜론(;)을 달아야 합니다.

여러 개의 그림자 효과를 이용하여 텍스트에 글리치 효과를 줄 수도 있습니다.

입력 출력
<span style="text-shadow: 2px 0px 0px #ff0000, 0px 2px 0px #0000ff, -2px 0px 0px #ffff00;">글리치 텍스트</span> 글리치 텍스트
글리치 텍스트

text-shadow 속성을 입력하면 속성 이름 그대로 텍스트에만 그림자가 생기지만, box-shadow 속성을 입력하면 div나 span 등 요소 전체에 그림자가 생깁니다. text-shadow와는 별개이므로 함께 사용할 수도 있습니다.

입력 출력
<span style="border: 1px solid black; color: black; text-shadow: 2px 2px gray;">글씨 그림자</span> 글씨 그림자
<div style="display: inline-block; border: 1px solid black; color: black; box-shadow: 2px 2px gray;">블록 그림자</div>
블록 그림자

네온 효과

이 효과는 틀:네온 글씨로 쉽게 사용할 수 있습니다.

네온 효과 예시 

<span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색]; color: #[글자 색];">작성할 내용</span>

위의 text shadow 코드를 활용한 효과입니다. 가로세로를 움직이지 않은 채로 그림자를 번지게 하면 네온사인과 같은 효과를 냅니다.

일반적으로 가로움직임=0, 세로움직임=0, 번짐정도=6으로 설정하면 네온 효과를 낼 수 있습니다. 배경 색과 그림자 색이 같으면 티가 나지 않습니다.

입력 출력
<span style="text-shadow: 0px 0px 6px #ff0000; color: #000000;">네온이 반짝반짝</span> 네온이 반짝반짝
네온이 반짝반짝

외곽선 효과

이 효과는 틀:글씨 테두리로 쉽게 사용할 수 있습니다.

외곽선 효과 예시 

<span style="text-shadow: [외곽선 두께]px 0px #[외곽선 색], 0px [외곽선 두께]px #[외곽선 색], -[외곽선 두께]px 0px #[외곽선 색], 0px -[외곽선 두께]px #[외곽선 색], [외곽선 두께]px [외곽선 두께]px #[외곽선 색], [외곽선 두께]px -[외곽선 두께]px #[외곽선 색], -[외곽선 두께]px -[외곽선 두께]px #[외곽선 색], -[외곽선 두께]px [외곽선 두께]px #[외곽선 색]; color:#[글자 색]">작성할 내용</span>

마찬가지로 text shadow 코드를 활용한 효과입니다. 텍스트의 모든 방향으로 그림자의 두께를 두껍게 해 외곽선처럼 보이게 하는 효과를 냅니다.

코드에 외곽선을 8번이나 작성하게 되는데, 앞에서부터 순서대로 상, 하, 좌, 우, 좌상, 우상, 좌하, 우하의 순서입니다. 8개 외곽선을 같은 색으로 전부 입력해야 일반적인 외곽선 효과가 나타납니다.

입력 출력
<span style="text-shadow: 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000, 1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, -1px 1px #ff0000; color: #ffffff;">굉장히 중요해 보이는 착각</span> 굉장히 중요해 보이는 착각
굉장히 중요해 보이는 착각

블러 효과

이 효과는 틀:블러로 쉽게 사용할 수 있습니다.

[ 주의 ]
블러 틀은 text-shadow가 아닌 blur라는 클래스를 사용합니다. 이 클래스는 마우스를 올리기만 해도 그 내용을 볼 수 있지만, 텍스트 레이아웃이 기존과 매우 달라지게 됩니다.

블러 효과 예시 

<span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px [글자 색]; color: transparent;">내용</span>

네온 효과를 만들 때처럼 텍스트의 그림자를 제자리에서 번지게 한 뒤, 원래 글자의 색을 투명하게 하면 번진 그림자만 남아 마치 블러 처리를 한 것과 같은 효과를 줄 수 있습니다. 따라서 코드도 네온 효과에 텍스트를 투명하게 하는 코드 하나만 추가되었을 뿐입니다.

이것이 그 예시입니다. (← 드래그 해보세요.) 글자 색과 글자 배경 색을 같게 하는 것처럼 그냥 보면 그것이 무슨 내용인지 못 알아보게 하는 용도로 쓰입니다. PC에서는 마우스로 드래그, 모바일에서는 꾹 눌러 선택하면 그제야 내용을 볼 수 있습니다. 주요한 스포일러가 포함된 내용에 적용하면 좋습니다.

문단명에도 적용해 문단 자체를 감출 수도 있지만 어차피 목차에서는 효과 없이 그대로 보이므로 목차를 보이지 않게끔 설정하지 않으면 별 의미는 없습니다.

텍스트의 크기가 크거나 두꺼울수록 번짐 정도를 많이 주어야 합니다. 당장 아래 예시만 해도 일반 텍스트와 18pt+볼드체 텍스트에 같은 효과를 적용하였더니 후자의 텍스트는 크고 두꺼워 글자를 읽을 수 있는 정도가 되었습니다.

입력 출력
<span style="text-shadow: 0px 0px 6px #000000; color: transparent">블러일까요? 모자이크일까요?</span> 블러일까요? 모자이크일까요?
블러일까요? 모자이크일까요?

루비 문자

이 태그는 틀:ruby로 쉽게 사용할 수 있습니다.

僕(ぼく)と君(きみ)は同(おな)じ夢(ゆむ)を見(み)ていた。

사용하는 HTML 태그

  • ruby - 루비 문자가 시작될 위치를 지정합니다. rt 태그 안에 적힌 문자가 이 태그 안에 적힌 문자에 루비 문자로 작성됩니다.
  • rt - 루비 문자를 지정합니다. 이 태그 안에 적힌 문자가 ruby 태그 안에 적힌 문자에 루비 문자로 작성됩니다.
<ruby>작성할 내용<rt>루비 문자로 작성할 내용</rt></ruby>

주로 후리가나 표기[2]에 사용됩니다.

입력 출력
<ruby>루비 문자 예시입니다<rt>이것이 루비 문자입니다</rt></ruby> 루비 문자 예시입니다이것이 루비 문자입니다
루비 문자 예시입니다이것이 루비 문자입니다

위 루비 문자 예시로 작성한 후리가나(振(ふ)り仮名(がな))처럼 한 단어에 루비 문자를 구분하여 작성하고 싶을 땐 루비 문자 코드를 그만큼 여러 번 입력하면 됩니다.

입력 출력
<ruby>僕<rt>ぼく</rt></ruby>と<ruby>君<rt>きみ</rt></ruby>は<ruby>同<rt>おな</rt></ruby>じ<ruby>夢<rt>ゆむ</rt></ruby>を<ruby>見<rt>み</rt></ruby>ていた。 僕ぼくと君きみは同おなじ夢ゆむを見みていた。
僕ぼくと君きみは同おなじ夢ゆむを見みていた。

하이라이트

이 태그는 틀:mark로 쉽게 사용할 수 있습니다.[3]

하이라이트 예시

사용하는 HTML 태그

  • mark
<mark>내용</mark>

형광펜으로 칠한 것과 같은 강조 효과를 줍니다. 글자의 배경 색을 바꾸는 것과는 다릅니다. 글자의 배경 색을 바꾸는 코드는 입니다. 물론 겉보기에는 차이가 없으므로 배경 색으로 응용하시는 것도 좋습니다.

입력 출력
형<mark>관</mark>펜으로 오타를 칠<mark>헤</mark>보세요. 형관펜으로 오타를 칠헤보세요.
형관펜으로 오타를 칠헤보세요.

테두리

테두리 예시

사용하는 HTML 속성

  • border
<span style="border: [테두리 두께]px [테두리 모양] [테두리 색];">내용</span>
<span style="border-width: [테두리 두께]px; border-color: [테두리 색]; border-style: [테두리 모양];">내용</span>

위의 두 코드는 출력값이 같습니다.

텍스트 또는 표에 테두리를 추가합니다. border는 태그가 아닌 속성이라서 태그 안에 사용되어야 합니다. 텍스트에 사용될 때는 주로 span 태그[4]에, 표에 사용될 때는 {|[5]나 ! 또는 |[6]에 쓰입니다.

테두리 두께는 px 단위로 설정하며 최소는 1입니다. px 단위 외에 thin, medium, thick을 입력할 수도 있습니다. 각각 1px, 3px, 5px로 적용됩니다.

테두리 모양은 solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden의 10가지가 있습니다. 테두리의 두께가 1px 이하이거나 테두리의 색이 검은색일 시 solid, dotted, dashed, none, hidden의 5가지만이 정상 적용됩니다. 나머지 5가지는 2px 이상의 두께이거나 검은색이 아닐 때만 정상 작동합니다.

solid
dotted
dashed
double
groove

ridge
inset
outset
none
hidden
[ 각 모양별 설명 펼치기 · 접기 ]
  • solid는 가장 일반적인 테두리입니다. 실선으로 표시됩니다.
  • dotted는 점선으로 표시됩니다.
  • dashed는 조금 긴 점선으로 표시됩니다.
  • double은 두 줄의 실선으로 표시됩니다.
  • groove는 3차원의 입체적인 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
  • ridge는 3차원의 능선 효과가 있는 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
  • inset은 3차원의 내지로 끼운 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
  • outset은 3차원의 외지로 끼운 선으로 표시되며, 테두리 색 값에 영향을 받습니다.
  • none은 테두리를 없앱니다.
  • hidden은 테두리가 존재는 하나 표시되지 않습니다.

테두리 색은 헥스코드 #6자리 또는 HTMl 색상 이름을 입력합니다.

border 속성 안에 두께, 모양, 색을 한번에 지정할 수 있습니다. 이렇게 입력할 경우 상하좌우 모든 방향에 한번에 적용됩니다.

입력 출력
<span style="border: 1px solid #000000;">테두리입니다.</span> 테두리입니다.
<span style="border-width: 1px; border-color: #000000; border-style: solid;">테두리입니다.</span>

위, 아래, 오른쪽, 왼쪽 4방향 각각 따로 다른 테두리를 적용할 수도 있습니다. 이 경우 border가 아니라 border-width, border-color, border-style의 3가지 속성을 전부 사용해야 합니다. 기본적인 입력 방식은 border로 사용할 때와 같으나, 한 속성 내부에 몇 개의 값을 입력하느냐에 따라 출력이 조금씩 달라집니다.

border-width 속성을 예로 들면 border-width: 1px; 이렇게 값을 하나만 입력하면 상하좌우 모든 방향에 1px의 테두리가 적용되는 것이고, border-width: 1px 2px;처럼 두 개의 값을 입력하면 위, 아래에 1px과 양옆에 2px, border-width: 1px 2px 3px;처럼 세 개의 값을 입력하면 위에 1px과 양옆에 2px, 아래에 3px, border-width: 1px 2px 3px 4px;처럼 네 개의 값을 입력하면 위에 1px, 오른쪽에 2px, 아래에 3px, 왼쪽에 4px이 적용됩니다.

1개의 값 모든 방향
2개의 값 왼쪽부터 순서대로 위아래, 양옆
3개의 값 왼쪽부터 순서대로 위, 양옆, 아래
4개의 값 왼쪽부터 순서대로 위, 오른쪽, 아래, 왼쪽(시계 방향)
입력 출력
<div style="display: inline-block; border-width: 2px; border-color: #000000; border-style: solid dotted;">위아래는 실선이지만<br />양옆은 점선입니다.</div>
위아래는 실선이지만
양옆은 점선입니다.

위 문법에 추가로 border-radius 속성을 입력하면 테두리의 모서리를 둥글게 처리할 수 있습니다. px 단위로 입력하면 10px 정도가 상한선이지만, % 단위로 입력하면 너비와 높이 비율에 따라 타원과 원까지 둥글게 만들 수 있습니다.

입력 출력
<span style="border: 1px solid #000000; border-radius: 10px;">둥글둥글</span> 둥글둥글

모든 border 속성은 테이블(표)에도 똑같이 적용할 수 있습니다. 그러나 border-radius 속성만은 그냥 입력하면 적용이 안 되는데, 이는 제이위키 테이블의 border-collapse 속성의 기본값이 collapse로 되어 있기 때문입니다. border-radius를 적용하기 위해 border-collapse를 separate로 함께 적용해 주면 정상적으로 기능합니다. 그러나 이렇게 해도 직사각형의 테두리 실루엣이 남게 되어 지저분합니다. 따라서 테이블에 border-radius를 지정할 땐 border를 투명하게 하고 대신 배경 색으로 둥긂을 표시하는 것이 낫습니다.

입력 출력
{|class="wikitable" style="border: 1px solid #000000; border-collapse: separate; border-radius: 10px;"
|-
|테이블도 둥글둥글
|}
테이블도 둥글둥글

padding 속성을 이용하면 테두리의 크기를 조절할 수 있습니다.

입력 출력
<span style="border: 1px solid #000000; border-radius: 10px; padding: 5px;">더 크게 둥글둥글</span> 더 크게 둥글둥글

그라데이션 배경

이 문서의 내용 중 전체 또는 일부는 나무위키:문법 도움말/심화 문서의 2.4번 문단에서 가져왔습니다.
그라데이션 예시

사용하는 HTML 속성

  • background-image[7] - 배경 색이나 이미지를 지정합니다. span, div 등 텍스트 관련 태그나 {| 등 테이블의 하위 속성으로 쓰입니다.
    • linear-gradient - 배경 색을 선형 그라데이션으로 지정합니다.
    • radial-gradient - 배경 색을 원형 그라데이션으로 지정합니다.
    • -webkit-background-clip - 배경 색이 어느 범위의 콘텐츠까지 적용될지를 지정합니다.
span style="background-image: linear-gradient([방향], #[시작색], #[끝색]);">내용</span>
span style="background-image: radial-gradient([모양] at [위치]% [높이]%, [원 안쪽 색], [원 중간 색], [원 바깥쪽 색]);"

두 번째 문법은 원 모양 그라데이션입니다.

  • 모양 : circle 또는 elipse입니다. 기본값은 elipse입니다.
  • 위치 : 0%일 시 원의 중심이 최좌측, 100%일 시 최우측
  • 높이 : 0%일 시 원의 중심이 최상단, 100%일 시 최하단

배경에 그라데이션을 넣는 기능입니다.

그라데이션의 방향을 조절하고 싶다면 [방향] 자리에 아래 코드를 입력하세요.

  • to right : 왼쪽에서 오른쪽
  • to left : 오른쪽에서 왼쪽
  • to bottom : 위쪽에서 아래쪽
  • to top : 아래쪽에서 위쪽
  • to top right 또는 to right top : 북동쪽 대각선
  • to bottom right 또는 to right bottom : 동남쪽 대각선
  • to bottom left 또는 to left bottom : 남서쪽 대각선
  • to top left 또는 to left top : 북서쪽 대각선

방향을 더 세세하게 조절하고 싶다면 [to 방향] 대신 [각도deg]를 입력할 수 있습니다. 입력한 숫자만큼 각도를 조절할 수 있으며 각도는 위쪽 방향 0도부터 시계 방향으로 돌아갑니다. 아래는 예시입니다.

  • 0deg : 북쪽
  • 45deg : 북동쪽
  • 90deg : 동쪽
  • 135deg : 동남쪽
  • 180deg : 남쪽
  • 225deg : 남서쪽
  • 270deg : 서쪽
  • 315deg : 북서쪽

헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다.

입력 출력
style="background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4);"
안녕하세요
여러분

헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다.

입력 출력
style="background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%);"
안녕하세요
여러분

오른쪽 색상의 지정 위치가 왼쪽 색상보다 작거나 같을 경우, 그라데이션 효과가 사라지고 왼쪽 색상에 지정한 위치에서 색이 나누어집니다.

입력 출력
  • style="background-image: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%);"
  • style="background-image: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%);"
  • style="background-image: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%);"
  • style="background-image: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%);"
30%
58%
70%
70%

서로 다른 방향의 그라데이션을 한 표안에 원할시 linear-gradient([방향], #[헥스 코드 1], #[헥스 코드 2])를 중첩으로 사용해 만들 수 있습니다.

입력 출력
style="background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f);"
중첩된
그라데이션

반복되는 그라데이션을 원할시 linear-gradient앞에 repeating-을 붙여 구현할 수 있습니다.

입력 출력
style="background-image: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%);"
반복 그라데이션

rgba(R, G, B, 투명도) 등 투명도를 지정하면 그라데이션끼리 중첩도 가능합니다.

입력 출력
[ 문법 펼치기 · 접기 ]
style="background-color: hsl(34, 53%, 82%); background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.875), rgba(255, 255, 255, 0.875)), repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px );"
투명도 그라데이션

원 모양의 그라데이션을 원할시 다음과 같이 입력해 출력할 수 있습니다. linear-gradient와 혼용할 수도 있습니다. 원 색을 하나만 입력할 시 단색의 원이 나옵니다.

입력 출력
style="background-image: radial-gradient(circle at 50% 50%, #000000 20%, transparent 20%), linear-gradient(to top, #808080, #808080);"
위치 50%
높이 50%
크기 20%
style="background-image: radial-gradient(circle at 50% 0%, #000000 20%, transparent 20%), linear-gradient(to top, #000000, #808080);"
위치 50%
높이 0%
크기 20%

background-clip은 background 태그로 정해진 배경 색이나 이미지를 콘텐츠의 어느 범위까지 적용할지를 지정해 주는 속성입니다. 여기에 background-clip을 text로 지정해 주고 텍스트 색을 투명으로 지정해 주면 배경이 아닌 텍스트에만 그라데이션을 적용할 수 있습니다.

제이위키에서는 -webkit-background-clip으로 입력해야 합니다. 텍스트 색은 color: transparent;로 입력하면 투명해집니다.

틀:font-gradient로 쉽게 사용할 수도 있습니다.

입력 출력
<span style="background-image: linear-gradient(135deg, red, orange, yellow, green, blue, violet); -webkit-background-clip: text; color: transparent;">무지개색 총공격이다!</span> 무지개색 총공격이다!
무지개색 총공격이다!

테이블 관련

각각의 행에 서로 다른 개수의 셀을 넣으려 한다면 서로 다른 셀 개수의 최소공배수만큼의 열을 추가한 뒤 적절히 셀을 합쳐야 합니다.

예를 들어 윗줄은 3칸, 아랫줄은 4칸의 테이블을 만들려 한다면 총 열의 개수는 12개입니다. 그리고 윗줄은 4칸마다, 아랫줄은 3칸마다 셀 합치기를 해주면 원하는 대로 나옵니다.

3 삼 셋
4 사 넷 四

그러나 단순히 이렇게 할 경우, 셀 합치기를 하지 않은 12개 칸 전부가 있는 줄이 없다면 각 셀의 너비를 아무리 조절해 봐도 편집 완료 후 문서를 볼 때 테이블이 아래와 같이 나타날 겁니다. 셀의 너비가 일정하지 않은 모습을 볼 수 있습니다.

3 삼 셋
4 사 넷 四

이럴 때 해당 테이블 태그에 style 속성으로 table-layout: fixed를 지정해 주면 셀 합치기를 하지 않은 줄이 없어도 각 줄의 셀들의 너비가 셀 개수만큼 적절히 배분됩니다.

3 삼 셋
4 사 넷 四

글꼴

이 속성은 틀:폰트로 쉽게 사용할 수 있습니다.

이것은
다양한
글꼴들의
예시
입니다.

사용하는 HTML 속성

  • font-family
<span style="font-family: [글꼴];">내용</span>

글꼴을 바꾸는 속성입니다. 문서의 가독성을 해칠 수 있으므로 권장드리지 않습니다.

글꼴은 기본적으로 5가지가 제공됩니다.

  • Sans-serif는 세리프 장식이 없는 폰트입니다.
  • Serif는 세리프 장식이 있는 글꼴입니다.
  • Monospace는 프로그램 코드 예제를 보여줄 때 주로 사용되는 글꼴입니다.
  • Cursive는 손으로 쓴 듯한 글꼴입니다. 한글은 궁서체로 출력됩니다.
  • Fantasy는 화려한 양식의 글꼴입니다. 한글은 지원하지 않습니다.

모바일 환경에서는 완벽하게 작동하지 않습니다. Serif만이 정상 작동하며 Monospace는 특유의 자간만, Cursive는 영어만 작동하고 글꼴도 다르며, Fantasy도 글꼴이 다릅니다. Cursive와 Fantasy는 일부 웹브라우저에서는 아예 작동하지 않기도 합니다.

입력 출력
<span style="font-family: sans-serif;">이 문장은 Sans-serif 글꼴로 작성되었습니다.</span> 이 문장은 Sans-serif 글꼴로 작성되었습니다.
이 문장은 Sans-serif 글꼴로 작성되었습니다.
<span style="font-family: serif;">이 문장은 Serif 글꼴로 작성되었습니다.</span> 이 문장은 Serif 글꼴로 작성되었습니다.
이 문장은 Serif 글꼴로 작성되었습니다.
<span style="font-family: monospace;">이 문장은 Monospace 글꼴로 작성되었습니다.</span> 이 문장은 Monospace 글꼴로 작성되었습니다.
이 문장은 Monospace 글꼴로 작성되었습니다.
<span style="font-family: cursive;">이 문장은 Cursive 글꼴로 작성되었습니다.</span> 이 문장은 Cursive 글꼴로 작성되었습니다.
이 문장은 Cursive 글꼴로 작성되었습니다.
<span style="font-family: fantasy;">이 문장은 Fantasy 글꼴로 작성되었습니다.</span> 이 문장은 Fantasy 글꼴로 작성되었습니다.
이 문장은 Fantasy 글꼴로 작성되었습니다.

각주

  1. ↑ <[태그] [속성]="[요소]: [값];">[태그가 적용된 내용]</[태그]>의 형태. 내용의 앞에 온 슬래시가 붙지 않은 태그가 여는 태그, 내용의 뒤에 온 슬래시가 붙은 태그가 닫는 태그입니다. 즉, 슬래시로 태그의 여닫음을 구분합니다.
  2. ↑ 일본어 등에서 한자 위에 히라가나를 통해 작은 글씨로 발음을 추가 표기하는 것.
  3. ↑ 단, 틀:mark는 아래 설명할 <mark> 태그가 아니라 텍스트 배경 색 효과를 사용하였습니다.
  4. ↑ div 태그에 쓰이기도 합니다. div와 span의 차이점이라면 span은 줄바꿈이 적용되지 않으며 텍스트에만 적용되고, div는 줄바꿈이 적용되며 텍스트가 아닌 한 줄 전체에 적용됩니다.
  5. ↑ 표 전체에 테두리를 적용할 때.
  6. ↑ 셀 하나에만 테두리를 적용할 때.
  7. ↑ 그냥 background 속성으로 입력해도 상관 없습니다.
이 문서의 내용 중 전체 또는 일부는 연습장:Kimchan 문서의 331280판에서 가져왔습니다. 문서 역사 보러가기