[기타] 초심자를 위한 인벤 스크립트 설명서 - 태그

0. 인벤 스크립트란?

 

인벤토리에서, 혹은 글 작성할 때 우측 상단에 있는 [HTML] 버튼을 눌러 HTML 편집 모드로 진입 하게 되면

div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; background-image: url('https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png'); margin-top: 16px; margin-left: 100px; color: #0000FF; border-radius: 6px; border: 1px solid #2EFE9A; overflow:auto; font-size: 11px; padding: 0;" data-inven-action="last-attack-5,last-attack-10,last-attack-all,search-profile"

이런 어지러운 영단어들이 우릴 반겨줍니다. 이게 바로 인벤 스크립트인데요,

이 복잡한 단어들은 인장 혹은 게시글을 구성하는 뼈대가 되며,

충분히 이해하고 사용할 수 있다면 원하는 것들을 마음껏 꾸밀 수도 있습니다.

인벤 스크립트 게시판에는 정말 좋은 팁글과 답변글들이 많습니다.

심지어 정말 예쁘게 만들어진 인장 소스 코드를 친절한 설명과 함께 제공해주시는 분들도 계시구요.

그런 소스들을 복사-붙여넣기하고 약간의 수정만으로 예쁜 인장을 사용할 수도 있습니다.

그런데 이런 복붙 인장 틀을 이용해서 수정하다보면, 정말 알 수 없는 이유로 문제가 생기기도 하고

문제를 해결하려고 아무리 들여다보고 찾아봐도

인벤 스크립트, 혹은 프로그래밍에 대한 기초적인 지식이 없다면 해결하기가 정말 힘들겁니다.

그런 초심자분들의 이해를 돕기 위해, 인벤 스크립트의 기초적인 구조부터 차근차근 알려드리려고 합니다.

이제 이해할 수 없었던 영단어들을 조금이라도 이해할 수 있도록 도와드릴테니 천천히 따라오시면 됩니다!

---

---

1. 인벤 스크립트의 구조 : 태그에 대한 이해

---

---

먼저, 인벤 스크립트가 어떻게 구성되는지 알아볼까요?

인벤 스크립트는 '태그'들의 반복이라고 할 수 있습니다.

html 편집 모드를 열어 보면 <br> <img> <div> </div> <span> </span> 등등 부등호가 가득하죠?

부등호로 감싸진 모든 것들이 바로 '태그'입니다.

---

태그는 여는 태그와 닫는 태그로 구성되며, 

여는 태그는 <태그명> 의 형태이고 닫는 태그는 </태그명> 의 형태를 지닙니다.

그리고 <태그명> 내용 </태그명> 이런 구성에서,

여는 태그와 닫는 태그 사이의 '내용' 부분에는 하나의 '공간'을 형성하게 되지요.

내용 

---

그리고 이 공간을 겹쳐서 형성할 수도 있습니다.

<태그1> <태그2> 내용 </태그2> </태그1>

이런 모습의 코드를 예시로 본다면, 일단 '태그2'가 '내용'을 감싸서

<태그2> 내용 </태그2> 이렇게 하나의 공간을 형성하고 있습니다.

그리고 그 바깥에서는, 태그1이 <태그1> 태그2의 공간 </태그1> 이렇게 태그2의 공간을 통째로 감싸버렸죠.

내용 

이 때, 태그1은 태그2의 '상위 태그'가 됩니다. 그리고 태그2는 태그1의 '하위 태그'입니다.

상위 태그가 하위 태그를 감싸는(포함하는) 형태입니다.

---

그리고 <태그1> 내용1 <태그2> 내용2 </태그2> </태그1> 이런 식의 구조가 있다면,

일단 태그2는 '내용2'를 포함하는 공간을 형성합니다.

그리고 태그1은 '내용1'과 태그2의 공간을 모두 포함하는 큰 공간을 갖게 되죠.

내용1 내용2 

여기서 중요한 점이 있습니다. 각 태그마다 색상, 모양, 배경 등등.. '속성'을 결정할 수 있는데, 

일단 배경 색상으로 예를 들겠습니다.

---

태그1에 검은색 배경을 지정한다면 어느 공간에 검은색으로 칠해질까요?

태그1이 형성한 공간인, 내용1과 태그2의 공간 전체에 검은색이 칠해집니다.

내용1 내용2 

그렇다면 태그1에는 검은색, 태그2에는 노란색 배경 색상을 지정한다면, 어떻게 될까요?

우선 태그1의 공간 전체 (내용1 + 태그2의 공간) 에 검은색이 칠해집니다.

그리고 그 위로, 태그2의 공간인 내용2 부분에는 노란색이 칠해집니다.

결국 내용1에는 검은색, 내용2에는 노란색이 칠해지게 됩니다.

내용1 내용2 

---

포함 관계를 갖는 태그의 구조에서는, 하위 태그의 속성을 결정하는데 우선권은 하위 태그에 있는 셈이지요.

어찌보면 간단하게 느껴질 수 있는 부분이지만, 중요한 부분 중 하나이기도 합니다.

왜나하면, '상속'이라는 특성 때문입니다.

상속이란? ( 클릭하면 열립니다 )

속성은 상속되는 속성과 상속되지 않는 속성이 있으며,

상속되는 속성의 경우에는 그 속성이 본인 태그를 포함하여 하위 태그 전체에 적용됩니다.

상속되지 않는 속성의 경우에는 그 속성이 본인 태그에만 적용됩니다.

상속되는 속성의 예로 color(글자 색상)을,

상속되지 않는 속성의 예로 border-color(테두리 색상)을 예시로 들어보겠습니다.

<태그1> 내용1 <태그2> 내용2 </태그2> </태그1>

내용1내용2 

(1) 상속되는 예시 : color (글자 색상)

1) 태그1에만 color를 red로 설정한다면, 내용1과 내용2 모두 빨간색의 글자 색상을 갖는다.

내용1내용2 

2) 태그2에만 color를 blue로 설정한다면, 내용1는 기본 글자 색상인 검정색을, 내용2는 파란색의 글자 색상을 갖는다.

내용1내용2 

3) 태그1에는 color를 red, 태그2에는 blue로 설정한다면, 내용1은 빨간색을, 내용2는 파란색의 글자 색상을 갖는다.

내용1내용2 

(2) 상속되지 않는 예시 : border-color (테두리 색상)

1) 태그1에만 border-color를 red로 설정한다면,

내용1만 빨간색을, 내용2는 기본 테두리 색상인 검은색 테두리 색상을 갖는다.

내용1내용2 

2) 태그2에만 border-color를 blue로 설정한다면,

내용1은 기본 테두리 색상인 검은색을, 내용2는 파란색 테두리 색상을 갖는다.

내용1내용2 

3) 태그1에는 border-color를 red, 태그2에는 blue로 설정한다면

내용1은 빨간색을, 내용2는 파란색의 테두리 색상을 갖는다.

내용1내용2 

결론적으로,

(1) 상속되지 않는 속성은 본인의 태그에만 적용된다.

(2) 상속되는 속성은 본인을 포함하여 하위태그 전체에 적용된다.

조금 바꿔서 설명해볼까요?

(1) 속성은 본인의 태그에 대해 우선 적용된다.

(2) 상속되는 속성일 경우, 하위 태그에도 적용되지만 하위 태그에 대해 우선 순위는 낮다.

태그의 포함관계와 상속되는 속성에 대해 이해한다면

<div>

<font color="red">내용1</font>

<font color="red">내용2</font>

<font color="red">내용3</font>

</div>

이런식으로 사용하던, 반복되는 코드에 사용된 속성이 상속되는 것이라고 할 때,

<div style="color:red;">

내용1

내용2

내용3

</div>

이렇게 경제적이고 깔끔하게 표현할 수 있답니다!

( 클릭하면 닫힙니다 )

 

---

---

** 중요!! - 나중에 열린 태그는, 먼저 닫혀야 한다!! **

---

---

 

<태그1> 내용1 <태그2> 내용2 </태그2> </태그1> 

이 구조를 다시 한번 살펴보겠습니다.

태그 1이 열리고, 그 다음에 태그 2가 열렸죠?

그러면 나중에 열린 태그 2가 먼저 닫혀서 태그2의 '공간'을 완성하고

먼저 열렸던 태그 1이 나중에 닫혀서 태그1의 '공간'을 완성하는 형태로, 순서를 꼭 지켜야 합니다. 

---

'박스'에 비유하자면, 큰 박스 안에 작은 박스를 담았습니다.

그리고 뚜껑을 닫아야 하는데, 당연히 작은 박스의 뚜껑부터 닫고 큰 박스의 뚜껑을 닫아야 합니다.

큰 박스의 뚜껑을 닫고 작은 박스의 뚜껑을 그 위에 올리면 작은 뚜껑은 아마 바람에 날아가 버릴겁니다.

---

---

---

 

** 매우 중요!! - 열린 태그는 반드시 닫혀야 한다!! **

---

---

 

'박스'에 다시 한번 비유해 보겠습니다.

먼저 가장 큰 박스를 맨 밑에 열어놓고, 그 안에 파란 구슬을 좀 담아두었습니다.

그리고 큰 박스 중앙에 작은 박스를 놓고, 작은 박스 안에 노란 구슬을 담은 뒤 뚜껑을 닫았습니다.

이제 친구에게 박스를 트럭에 실어 보내고 두근거리는 마음으로 기다립니다.

 그런데, 큰 박스의 뚜껑을 닫지 않은 것이 기억났습니다. 저 박스에는 과연 무슨 일이 일어날까요?

파란 구슬이 마구 튀어 오를 수도 있고, 비가 내리면 아예 물에 젖어버릴 수도 있겠지요.

작은 박스의 뚜껑이 열려버릴 지도 모릅니다. 정말 어떤 일이 일어날지 모르는 겁니다!

---

태그도 마찬가지입니다. 인장을 예쁘게 만들어서 저장했는데, 

결과물을 보니 예쁜 인장은 어디로 가고 괴생명체가 우릴 반길지도 모릅니다. 

이럴 때 가장 먼저 확인해야 될 것은

1. 태그가 올바르게 열고 닫혀있는지

2. 오탈자(오타 및 내용 빠뜨림)

이 두가지입니다. 

그리고 정확하게 확인하기 위해서는, 태그에 대한 이해가 가장 먼저 필요하겠지요.

 

---

---

2. 열고 닫지 않는 태그, '독립 태그'

---

---

1절에서는 열리는 태그, 닫히는 태그, 그리고 포함관계를 형성하는 상위-하위 태그에 대해 알아보았습니다.

그런데 태그에는 열리고 닫히는 쌍으로 이루어지지 않고, 홀로 독립적으로 존재하는 태그가 있습니다.

이를 '독립 태그'라고 합니다.

대표적인 독립 태그에는 <br>, <img> 등이 있습니다. 웹 페이지에서 스쳐 지나가듯 많이 본 이름들이죠?

---

일단 독립태그의 형태는 <독립태그>, 혹은 <독립태그/> 입니다. </독립태그> 는 절대 아닙니다.

열고 닫는 태그와 구분하기 위해 독립태그는 <독립태그/>의 형태로만 존재한다면 구분이 훨씬 편하겠지만,

<독립태그> 와 <독립태그/> 모두 웹 표준으로 인정받고 있습니다.

( 저같은 경우에는 통일하여 <독립태그>의 형태로만 사용합니다.

프로그램 코드를 작성할 때는 이렇게 사소한 부분에서 일관된 습관을 유지하는게 편리합니다. )

---

그리고 독립태그는 태그 홀로 존재하여, 포함관계를 형성하지 않고 자체적인 기능을 수행한답니다.

(상위 태그는 가질 수 있지만, 하위 태그는 가질 수 없다는 의미입니다.

예를 들어,

<div> <img src="이미지 주소"> </div>

이 구조에서 img 태그는 div 태그의 하위 태그가 되었지만 img 태그가 하위 태그를 가질 수는 없습니다.)

---

---

---

3. 태그에는 어떤 것들이 있을까?  태그의 종류와 기능

---

---

인벤 스크립트에서 자주 쓰이는 태그들의 이름과, 그 기능에 대해 알아보겠습니다.

---

3-(1) 열고 닫는 태그

형태 : <태그명> </태그명>  (ex: <div> </div>)

---

div : 하나의 공간을 형성하는 기초적인 태그입니다.

     div 태그가 닫히면 한 줄을 강제로 개행시키는 특성을 갖고 있습니다.

예를 들어,

<div>내용1</div> <div>내용2</div> <div>내용3</div>

이렇게 작성할 경우

내용1

내용2

내용3

 

이렇게 표현됩니다.

---

span : div와 마찬가지로 하나의 공간을 형성하는 기초적인 태그입니다. 

       가장 큰 차이점은 span 태그는 강제 개행을 하지 않는다는 점이지요.

예를 들어, 

<span>내용1</span> <span>내용2</span> <span>내용3</span>

이렇게 작성할 경우

내용1내용2내용3

 

이렇게 표현됩니다.

---

a : 내부 공간에 하이퍼링크를 형성하는 태그입니다. href 속성으로 웹페이지 주소를 연결할 수 있고,

링크를 연결하지 않더라도, 기본적으로 내부 공간에 커서를 갖다 댈 경우

커서를 pointer(손가락 모양)로 변형시키는 특성을 갖습니다.

(링크를 사용하지 않을 경우 href="#"를 넣어줍니다.)

예를 들어, <a> 내용 </a> 에서 내용이 글씨일 경우,

블록이나 이미지일 경우 등등 그 어떤 형태를 지니더라도 내용 부분 전체에 하이퍼링크를 형성합니다.

(대신 글씨에는 강제로 파란 글씨 색상과 밑줄을 입힙니다.)

---

예시 1 (링크를 걸지 않음)

<a href="#"><img src="https://upload2.inven.co.kr/upload/2017/12/11/bbs/i13855259260.png" width="100"></a>

 

---

예시 2 ( http://imart.inven.co.kr/attendance/ 페이지에 하이퍼링크 연결)

<a href="http://imart.inven.co.kr/attendance/">

<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16082516927.png" width="150"></a>

 

---

예시 3 ( 글씨 : 색상이 파랗게 변하고 밑줄이 쳐집니다. )

<a href="#"> 글씨글씨 </a>

글씨글씨 

---

(** 우선, div와 span, a 이렇게 세 가지 태그만 이해해도 괜찮습니다.

정말로 저같은 경우에는 인벤 스크립트를 작성할 때 여닫는 태그를 이 세 가지 외에 거의 사용하지 않습니다.

이 세 가지 태그의 속성과 내부 속성을 이용해 다른 태그들을 대부분 표현할 수 있거든요.

그리고 아까 설명드렸던, 저의 '습관'중 하나입니다.)

---

table : <table> </table> 사이에 테이블(표)을 생성합니다.

tr : <table> </table> 내부에서 사용하며, <tr> </tr> 사이에 행을 생성합니다.

td : <tr> </tr> 내부에서 사용하며, <td> </td> 사이에 열을 생성합니다.

테이블 사용 예시:

<table border="1px" width="200px">

 <tr>

   <td width="50%">1행 1열</td> <td width="50%">1행 2열</td>

 </tr>

 <tr>

   <td width="50%">2행 1열</td> <td width="50%">2행 2열</td>

 </tr>

 <tr>

   <td width="50%">3행 1열</td> <td width="50%">3행 2열</td>

 </tr>

</table>

1행 1열	1행 2열
2행 1열	2행 2열
3행 1열	3행 2열

 

---

p : <p> </p> 사이에 한 문단을 표현합니다. div처럼 닫히는 태그 뒤에는 한 줄 개행됩니다.

예시

<p>첫 번째 문단</p><p>두 번째 문단</p>

결과

첫 번째 문단

두 번째 문단

 

---

center : <center> </center> 사이에 있는 모든 내용을 가운데 정렬 시키는 태그입니다.

         간편하면서도 유용하게 사용할 수 있습니다.

예시

<p>첫 번째 문단</p><p><center>두 번째 문단</center></p>

결과

첫 번째 문단

두 번째 문단

 

---

font : 글자 색상, 글꼴, 크기 등 글자와 관련된 속성을 지정할 수 있습니다.

예시

<font color="green">글자 색상 : 초록</font><br>

<font face="궁서">글꼴 : 궁서</font><br>

<font size="5">글자 크기 : 5</font><br>

<font color="red" face="돋움" size="4">빨강 돋움 4</font>

결과

글자 색상 : 초록
글꼴 : 궁서
글자 크기 : 5
빨강 돋움 4

 

---

b : <b> </b> 사이에 있는 글씨를 굵게 표시

예시

<b>굵은 글씨</b>

결과

굵은 글씨

---

i : <i> </i> 사이에 있는 글씨를 이탤릭체로 (기울여) 표시

예시

<i>기울인 글씨</i>

결과

기울인 글씨

---

u : <u> </u> 사이에 있는 글씨에 밑줄을 표시

예시

<u>밑줄 표시</u>

결과

밑줄 표시

---

strike : <strike> </strike> 사이에 있는 글씨에 취소선을 표시

예시

<strike>취소선 표시</strike>

결과

취소선 표시

---

+ 개인적으로, 한 줄 한 줄마다 font, b, i, u 등으로 도배된 소스 코드는 별로 좋아하지 않습니다.

지저분하고, 불필요하게 소스 코드가 길어지고, 비효율적이거든요.

<font color="blue"><b><i>내용1</i></b><br></font>

<font color="blue"><b><i>내용2</i></b><br></font>

<font color="blue"><b><i>내용3</i></b><br></font>

<font color="blue"><b><i>내용4</i></b><br></font>

조금.. 지저분하죠?

공통된 하위 태그가 반복될 경우 상위 태그 하나로 묶어 정리하는 습관을 들이는게 좋습니다.

<font color="blue"><b><i>

내용1<br>

내용2<br>

내용3<br>

내용4<br>

</i></b></font>

훨씬 깔끔하지 않나요?

(** 열리는 순서와 닫히는 순서를 유심히 살펴보세요 **

font, b, i 순서로 열렸고, 역순으로 i, b, font 순서로 닫혔죠?

최상위 태그는 font,

font의 하위 태그는 b와 i,

b의 하위태그는 i 입니다.

그리고 br은 하위태그를 형성하지 않습니다.)

---

3-(2) 독립 태그

형태 : <독립태그명> 혹은 <독립태그명/>  (ex: <br> 혹은 <br/>)

---

<br> : 한 줄을 개행시킵니다. 엔터를 한번 누른 것과 같은 효과입니다.

(** HTML 편집 모드에서 엔터를 아무리 눌러봐야 엔터 한 번에 한 줄 개행시키는 효과를 갖지 않습니다.

오히려 원치 않는 결과를 얻게 될겁니다. 꼭 <br>을 사용하도록 합시다!

+띄어쓰기도 마찬가지입니다. HTML 편집 모드에서 아무리 저 멀리 띄어쓰기 해봐야 한 칸만 적용됩니다.

2칸 이상의 공백이 필요한 경우, &nbsp; 를 사용하시길 바랍니다. 

 &nbsp; 한 개에 띄어쓰기 한 칸이 표현됩니다. (&와 ;를 빠뜨리시면 안됩니다.)

++ 개인적인 생각으로는, br 태그나 공백 문자를 많이 사용하여 요소들의 배치를 맞추는 것은 정말 추천하지 않습니다.

앞으로 padding과 margin, align 등 여백과 정렬을 알게 된다면

반드시 최대한 활용하여 간결하고 효율적인 소스 코드를 작성하시길 바랍니다.)

---

<img> : 이미지 주소를 이용하여 이미지를 표현하는 태그입니다.

<img src="이미지 주소">

이렇게 사용하며

예시는 이렇습니다.

<img src="https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16063864967.jpg">

 

(** 흔히 쓰는 독립 태그들은 br, img 이렇게 보통 두 가지입니다.

 일단 이것만 알고 계셔도 무방합니다.

그 외에 가로선을 삽입하는 <hr> 태그 등이 있지만 이정도만 설명하겠습니다.)

-> 사실, 이 바로 밑에 있는 긴 가로선이 바로 <hr> 태그입니다.

<hr color="blue"> 태그를 연달아 두 개 사용하였습니다.

---

---