고급 문법 편집하기 (부분)

== <nowiki><div>나 <span></nowiki> 관련 ==
구글링해서 알아서 배워라. 어차피 이거 쓸 줄 몰라도 99.99999999....%의 문서 편집하는데는 아무 지장 없다.

그리고 올드비들도 절반정도만 쓰지만, 기초적으로는
<pre><div style="적용할 스타일 속성"></div></pre>

또는

<pre><span style="적용할 스타일 속성"></span></pre>

으로 사용이 가능하다. 그리고 서로 다른 스타일 속성들은 세미콜론(;)으로 구분한다.

그리고 저 둘의 차이점을 설명하면, 둘 다 HTML이긴 한데, {{Tag|div}}는 블록 속성(display:block)을 적용한 것 처럼 블럭을 쌓듯 아래로 차곡 차곡 쌓인다. {{Tag|span}}은 인라인 속성(display:inline)을 적용한 것 처럼 옆으로 다닥다닥 붙는다. 그리고 {{Tag|span}}은 영역이 거기 안에 들어가는 내용의 크기만큼만 적용된다. 그래서 width, height같은 크기 조절 속성과 transform 속성 같은 게 안 먹힌다. 사실 이 부분의 내용은 위키 문법 보다는 웹 프로그래밍에 가까워서...

추가적으로 저 두개를 합한 것을 쓰고 싶다면, {{Tag|span}}에 스타일 속성에 display:inline-block를 적어 주면 된다. 이거는 기존 {{Tag|span}}처럼 가로로 붙는데, width나 height를 적용 가능하다. 아래 예제 2를 참고하자.

=== 예제 ===
1

코드

<pre>
<div style="background:honeydew;">조무위키</div>
<div style="background:honeydew;">조무위키</div>
<div style="background:honeydew;">조무위키</div>
<span style="background:lavender;">조무위키</span>
<span style="background:lavender;">조무위키</span>
<span style="background:lavender;">조무위키</span>
</pre>

결과 

<div style="background:honeydew;">조무위키</div>
<div style="background:honeydew;">조무위키</div>
<div style="background:honeydew;">조무위키</div>
<span style="background:lavender;">조무위키</span>
<span style="background:lavender;">조무위키</span>
<span style="background:lavender;">조무위키</span>

2

코드

<pre>
<div style="width:300px; background:yellow;">div</div>
<span style="display:inline-block; width:300px; background:cyan;">div + span</span>
<span style="display:inline-block; width:300px; background:snow;">div + span</span>
<span style="width:300px; background:honeydew;">span</span>
</pre>

결과

<div style="width:300px; background:yellow;">div</div>
<span style="display:inline-block; width:300px; background:cyan;">div + span</span>
<span style="display:inline-block; width:300px; background:snow;">div + span</span>
<span style="width:300px; background:honeydew;">span</span>

위의 예제 2를 더 설명하면 모두 다 width:300px (가로 크기 300픽셀) 속성이 적용되어 있는데, {{Tag|span}}에서는 적용이 안 되고, 나머지에서는 적용이 되는 것과 {{Tag|span}}에 inline-block의 속성을 붙인것이 가로로 붙는 성격을 설명하는 거다.