(내용을 "{{namucat|김찬/연습장}} {{김찬}} {{김찬 연습장}} == 각주 == {{각주}} {{문서 가져옴|연습장:Kimchan|331280}}"(으)로 바꿈) 태그: 대체됨 |
편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
{{namucat|김찬/연습장}} | {{namucat|김찬/연습장}} | ||
{{공사 중인 문서}} | |||
{{김찬}} | {{김찬}} | ||
{{김찬 연습장}} | {{김찬 연습장}} | ||
[[위키독]]에서 직접 작성했던 [http://ko.kimchan.wikidok.net/wp-d/6167f1e20d7785f2221a7774/View HTML 문법] 문서 내용 백업 | |||
{{목차}} | |||
== 개요 == | |||
이하의 내용은 제이위키 문서 편집에 유용하게 쓰일 수 있는 다양한 HTML 태그 및 속성에 관해 서술합니다. | |||
모든 코드는 태그로 적용하며 태그는 소수를 제외하고 여는 태그와 닫는 태그로 이루어집니다.<ref>{{fs|10|{{ffms|<nowiki><[태그] [속성]="[요소]: [값];">[태그가 적용된 내용]</[태그]></nowiki>}}의 형태. 내용의 앞에 온 슬래시가 붙지 않은 태그가 여는 태그, 내용의 뒤에 온 슬래시가 붙은 태그가 닫는 태그입니다. 즉, 슬래시로 태그의 여닫음을 구분합니다.}}</ref> 여는 태그와 닫는 태그는 반드시 함께 사용되어야 합니다. | |||
표의 출력칸 셀은 비교를 위해 볼드체+18pt로 작성된 것을 함께 기재합니다. 코드칸 셀에 작성된 코드에는 글자 크기가 포함되지 않으므로 주의하십시오. | |||
<div style="display: inline-block; width: 270px; text-align: center; margin: 10px 0px;"><span style="color: black;"><strong>HTML에서 요소들 사이의 간격 구분</strong></span> | |||
<div style="border-width: 2px 20px; border-style: solid; border-color: black; background-color: black; padding: 5px; color: white;"><strong>margin</strong> | |||
<div style="border-width: 2px 20px; border-style: solid; border-color: red; background-color: red; padding: 5px; color: white;"><strong>border</strong> | |||
<div style="border-width: 2px 20px; border-style: solid; border-color: orange; background-color: orange; padding: 5px; color: white;"><strong>padding</strong> | |||
<div style="border-width: 2px 20px; border-style: solid; border-color: blue; background-color: blue; padding: 5px; color: white;"><strong>content</strong></div> | |||
<strong>padding</strong></div> | |||
<strong>border</strong></div> | |||
<strong>margin</strong></div> | |||
</div> | |||
이 뒤로 나올 코드들에는 margin, border, padding이라는 개념들이 자주 등장합니다. 이에 대해 정확히 알고 넘어가면 좋습니다. 표에는 서로의 위아래로만 구분이 되어 있지만 위아래뿐 아니라 상하좌우 모든 방향을 둘러쌉니다. | |||
* {{c|blue|'''content'''}}는 대부분의 요소들이 차지하는 공간입니다. 텍스트, 이미지, 링크 등 사실상 margin과 border, padding을 제외한 모든 것들이 content에 포함된다고 볼 수 있습니다. | |||
* {{c|orange|'''padding'''}}은 border로 둘러싸여진 하나의 오브젝트(object) 내부의 공간을 말합니다. | |||
* {{c|red|'''border'''}}는 요소의 테두리를 구성합니다. border가 하나의 오브젝트(object)에서 가장 바깥 부분을 담당합니다. | |||
* {{c|black|'''margin'''}}은 HTML 문서에서 가장 바깥쪽 여백, 즉 오브젝트(object)에 포함되지 않는 나머지 모든 공간을 말합니다. | |||
== 그림자 효과 == | |||
<span style="text-shadow: 2px 2px gray;">그림자 효과 예시</span> | |||
사용하는 HTML 속성 | |||
* '''text-shadow''' - span, div 등 텍스트에 쓰이는 태그의 하위 속성으로 쓰입니다. | |||
* '''box-shadow''' - div, table 등 기본 display 값이 block인 요소들에 쓰입니다. | |||
<pre><span style="text-shadow: [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색];">작성할 내용</span></pre> | |||
텍스트 그림자를 가로세로 2px 움직여 그림자가 진 것과 같은 효과를 냅니다. 그림자 색은 글자 색보다 명도가 살짝 높은 색으로 설정하면 자연스럽습니다. | |||
{|class="wikitable" style="width: 100%; table-layout: fixed;" | |||
|- | |||
!{{nobold|입력}}||{{nobold|출력}} | |||
|- | |||
|rowspan="2"|<nowiki><span style="text-shadow: 2px 2px 0px gray;">그림자가 있는 글자</span></nowiki> | |||
|<span style="text-shadow: 2px 2px 0px gray;">그림자가 있는 글자</span> | |||
|- | |||
|<span style="text-shadow: 2px 2px 0px gray; font-size: 18pt;">'''그림자가 있는 글자'''</span> | |||
|} | |||
---- | |||
가로움직임과 세로움직임에 0이나 음수를 넣어 그림자의 방향을 조절할 수도 있습니다. | |||
{|class="wikitable" style="width: 100%; table-layout: fixed;" | |||
|- | |||
!{{nobold|입력}}||{{nobold|출력}} | |||
|- | |||
|rowspan="2"|<nowiki><span style="text-shadow: -2px -2px 0px gray;">왼쪽 위 그림자</span></nowiki> | |||
|<span style="text-shadow: -2px -2px 0px gray;">왼쪽 위 그림자</span> | |||
|- | |||
|<span style="text-shadow: -2px -2px 0px gray; font-size: 18pt;">'''왼쪽 위 그림자'''</span> | |||
|} | |||
{|class="wikitable" style="width: 100%; table-layout: fixed;" | |||
|- | |||
!{{nobold|입력}}||{{nobold|출력}} | |||
|- | |||
|rowspan="2"|<nowiki><span style="text-shadow: 2px 0px 0px gray;">오른쪽 그림자</span></nowiki> | |||
|<span style="text-shadow: 2px 0px 0px gray;">오른쪽 그림자</span> | |||
|- | |||
|<span style="text-shadow: 2px 0px 0px gray; font-size: 18pt;">'''오른쪽 그림자'''</span> | |||
|} | |||
---- | |||
그림자 효과는 여러 개 중첩할 수 있으며, [가로 움직임]px [세로 움직임]px [번짐 정도]px #[그림자 색]이 한 그룹입니다. 그림자 효과를 하나 더 추가하고 싶다면 맨끝 그림자색 뒤에 쉼표(,)를 달고 띄어쓰기하여 그룹을 추가 작성하면 됩니다. 마지막 효과의 맨끝 그림자색 뒤에는 세미콜론(;)을 달아야 합니다. | |||
여러 개의 그림자 효과를 이용하여 텍스트에 글리치 효과를 줄 수도 있습니다. | |||
{|class="wikitable" style="width: 100%; table-layout: fixed;" | |||
|- | |||
!{{nobold|입력}}||{{nobold|출력}} | |||
|- | |||
|rowspan="2"|<nowiki><span style="text-shadow: 2px 0px 0px #ff0000, 0px 2px 0px #0000ff, -2px 0px 0px #ffff00;">글리치 텍스트</span></nowiki> | |||
|<span style="text-shadow: 2px 0px 0px #ff0000, 0px 2px 0px #0000ff, -2px 0px 0px #ffff00;">글리치 텍스트</span> | |||
|- | |||
|<span style="text-shadow: 2px 0px 0px #ff0000, 0px 2px 0px #0000ff, -2px 0px 0px #ffff00; font-size: 18pt;">'''글리치 텍스트'''</span> | |||
|} | |||
---- | |||
text-shadow 속성을 입력하면 속성 이름 그대로 텍스트에만 그림자가 생기지만, box-shadow 속성을 입력하면 div나 span 등 요소 전체에 그림자가 생깁니다. text-shadow와는 별개이므로 함께 사용할 수도 있습니다. | |||
== 각주 == | == 각주 == | ||
{{각주}} | {{각주}} | ||
{{문서 가져옴|연습장:Kimchan|331280}} | {{문서 가져옴|연습장:Kimchan|331280}} |
2022년 12월 1일 (목) 22:35 판
이 문서는 아직 완성되지 않은 상태로, 본문에 다소 난잡하거나 생략된 부분이 포함되어 있을 수 있습니다.
[ 펼치기 · 접기 ]
|
김찬 연습장 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
연습장 | ||||||||||||||||||||
메모 | 낙서 | 노트 | 연구 | 팁 | 공부 | 모듈 | ||||||||||||||
틀 | CSS | Lua |
위키독에서 직접 작성했던 HTML 문법 문서 내용 백업
개요
이하의 내용은 제이위키 문서 편집에 유용하게 쓰일 수 있는 다양한 HTML 태그 및 속성에 관해 서술합니다.
모든 코드는 태그로 적용하며 태그는 소수를 제외하고 여는 태그와 닫는 태그로 이루어집니다.[1] 여는 태그와 닫는 태그는 반드시 함께 사용되어야 합니다.
표의 출력칸 셀은 비교를 위해 볼드체+18pt로 작성된 것을 함께 기재합니다. 코드칸 셀에 작성된 코드에는 글자 크기가 포함되지 않으므로 주의하십시오.
이 뒤로 나올 코드들에는 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;">그림자가 있는 글자</span> | 그림자가 있는 글자 |
그림자가 있는 글자 |
가로움직임과 세로움직임에 0이나 음수를 넣어 그림자의 방향을 조절할 수도 있습니다.
입력 | 출력 |
---|---|
<span style="text-shadow: -2px -2px 0px gray;">왼쪽 위 그림자</span> | 왼쪽 위 그림자 |
왼쪽 위 그림자 |
입력 | 출력 |
---|---|
<span style="text-shadow: 2px 0px 0px gray;">오른쪽 그림자</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와는 별개이므로 함께 사용할 수도 있습니다.
각주
- ↑ <[태그] [속성]="[요소]: [값];">[태그가 적용된 내용]</[태그]>의 형태. 내용의 앞에 온 슬래시가 붙지 않은 태그가 여는 태그, 내용의 뒤에 온 슬래시가 붙은 태그가 닫는 태그입니다. 즉, 슬래시로 태그의 여닫음을 구분합니다.