0. 서론

다들 인장에 마격기 정도는 하나씩 달고 다닐 것이다. 물론 마격기 하나 달랑 달아두는 것도 좋다. 근데 멋진 인장을 보면 와! (샌즈!) 소리가 절로 나오지 않는가? 본인만의 멋진 인장은 남들과의 차별점이 되기도 한다. 하지만 마격기를 달아봤다면 알겠지만 마격기 코드 속 수많은 <>를 보면 인장 꾸밀 용기가 생기질 않는다. 이 강의는 그런 메붕쿤들을 위해서 준비했다. 이제 겁먹지 말고 나만의 인장을 꾸며보자!

* 필자도 HTML과 CSS를 마스터하지는 못했으므로 고수가 보기에 답답한 부분이 있을 수도 있다. 그거 legacy고 요즘은 다른거 쓴다, 그거보다 더 효율적인 방법이 있다, 용어를 왜 다르게 쓰냐 등등..

1. HTML (HyperText Markup Language)

우리 메붕쿤은 인장 편집 창을 본 적이 있는가?



이것이 인장을 편집하는 창이다. 여기서 줄글만 간단하게 적을 거라면 그냥 여기서 바로 편집해도 된다. 하지만 뭔가 좀 있어보이는 인장을 만들고 싶다면 HTML을 사용해야 한다.

그럼 HTML을 눌러볼까?



필자의 경우 어느정도 인장을 꾸며놨기에 빈칸이 아닌데, 만약 인장에 아무 내용도 없으면 당연히 빈칸일 것이다. 앞에서도 말했듯이 수많은 <>를 보면 x키 누르고 도망가고 싶어질 것이다. 하지만 도망칠 필요 없다. 매우 간단하니까!

일단, HTML이라는 것은 제목에도 써놨듯이 HyperText Markup Language의 약자이다. 여기서 마크업이 뭔지, 하이퍼텍스트가 뭔지는 설명하지 않겠다. 인장 꾸미기 강의지 HTML 강의는 아니니까. 그리고 저거 설명하면 메붕쿤들은 도망칠 테니까.

우리 메붕쿤들이 인장을 꾸미기 위해서 사용하는 HTML에 대해서는 이것만 기억하면 된다.

<태그이름 속성1="값" 속성2="값" ...>내용</태그이름>

이것을 묶어 요소(Element)라고 부른다.

1) 태그이름: div, img, span, a 등등을 태그 이름이라고 한다. 어떤 역할, 의미인지 정도의 느낌.
2) 속성(Attribute): 부가적인 정보를 넣는다. 예를 들어 태그이름이 img(이미지) 라고 한다면 이미지를 어디서 불러올 것인가에 대한 정보가 필요할텐데, 이때 src(source의 약자)라는 속성을 이용해 이 정보를 추가해준다. 각 속성은 공백으로 구분되며 태그이름에 따라 사용할 수 있는 속성이 다르다. MDN(맨 밑에서 설명한다)에서는 특성이라고 부르더라...
3) 내용: 말 그대로 넣고 싶은 내용이다. 이따가 설명하겠지만 요소가 또 들어갈 수도 있다.
4) </태그이름>: 1번과 2번이 들어가는 <> 부분을 여는 태그라고 하고, 4번을 닫는 태그라고 한다. 일부 태그의 경우 그 태그의 의미 자체가 굳이 닫는 태그를 필요로 하지 않는 경우도 있다. (예: br (강제개행), img (이미지))

요소의 예를 들자면 다음과 같다.

<span id="hw" style="color: red;">Hello World!</span>

Hello World!

내용은 몰라도 된다. 구조를 보라.

위에서 설명했듯이 요소 안의 내용에 요소가 들어갈 수도 있다. 메붕쿤들이 인장의 HTML을 보고 복잡하다고 느껴 도망친 주원인 중 하나다. 다음을 살펴보자.

<table><tbody><tr><td>버닝댕구</td><td>24억</td></tr><tr><td>급하지 않으시면</td><td>담달에 해방하시는게 어떨까요</td></tr></tbody></table>


내용은 몰라도 된다. 일단 구조에 익숙해지는 데에 집중하자.

참고로 위를 출력하면 이렇게 나온다.

버닝댕구24억
급하지 않으시면담달에 해방하시는게 어떨까요

사실 HTML 코드를 쓸 때에는 가독성을 위해 들여쓰기를 한다. 하지만 우리의 ㅈ벤 인장 편집기는 들여쓰기를 안시켜준다 (사실 컴퓨터가 HTML을 해석할 때에는 들여쓰기 등을 무시한다. 알빠노? ㅈ벤). 이게 우리 메붕쿤들이 도망친 또다른 원인이다. 우리 메붕쿤들은 귀여운 뉴비니까 위의 HTML 코드를 들여쓰기 된 버전으로 살펴보자.

<table>
    <tbody>
        <tr>
            <td>버닝댕구</td>
            <td>24억</td>
        </tr>
        <tr>
            <td>급하지 않으시면</td>
            <td>담달에 해방하시는게 어떨까요</td>
        </tr>
    </tbody>
</table>

이제 좀 구조가 보이지 않는가? 다시 말하지만 지금은 구조를 보는데에만 집중하자. 어차피 태그 이름은 그냥 검색하면 다 나온다. 구조를 알게 되면 저렇게 쓸 수밖에 없었다는 것을 깨닫게 될 것이다.

위의 구조를 들여쓰기 측면에서 보면 table > tbody > tr > td 순으로 점점 들어간다는 걸 알 수 있다. table이 가장 겉이고 그 table 안에 tbody가 있고, tbody 안에 tr이 있고, tr 안에 td가 있는... 이런식으로 요소(태그) 안에 요소(태그)가 들어가면서 내용이 구성되는 것이 html의 구조이다. 나오는 관점으로 본다면 가장 안쪽부터 하나씩 감싸지면서 가장 바깥쪽이 모든걸 감싸는 구조라고 볼 수도 있다. 아무리 복잡해진다고 해도 저 구조는 유지된다.

혹시 이해를 못했다고? 괜찮아 메붕쿤! 처음부터 잘할 순 없어!

2. HTML의 몇가지 태그와 속성

이번엔 인장을 꾸밀 때 자주 사용하는 태그들을 알아보자.

1) a 태그: href="url" 속성을 사용하면 해당 url로 링크를 걸어준다. (href는 Hypertext Reference의 약자)

<a href="https://maple.inven.co.kr">ㅈ벤</a>



2) img 태그: src="url" 속성을 사용하여 해당 url의 이미지를 불러온다. 인장을 꾸밀 땐 인벤 인장용 이미지 게시판(https://www.inven.co.kr/board/webzine/4730)을 이용해서 사진을 인벤 서버에 업로드한 후 그 사진의 url을 따서 사용한다. 여기서 url은 인벤 인장용 이미지 게시판에 사진을 올려놓은 후 그 사진을 우클릭한 후 사진 주소 복사를 눌렀을 때 복사되는 주소이다. img 태그는 닫는 태그 없이 사용한다.

<img src="https://upload3.inven.co.kr/upload/2022/09/20/bbs/i15951749429.jpg">


3) div 태그: 인장을 꾸밀땐 구역 구분, 블럭 구분 정도로 사용한다. 인장을 꾸밀땐 style, data-inven-~ 속성들을 쓰는데, style은 다음 챕터이고 data-inven-~은 인벤스크립트 파트에서 다룰 것이다. 아마... 3탄쯤?

<div style="border: 2px solid black; cursor: none; padding: 10px;">여기다 마우스 올리면 커서가 사라진다! 신기하지?</div>


여기다 마우스 올리면 커서가 사라진다! 신기하지?

4) span 태그: div와 비슷한 태그이다. 이 태그도 역시 div와 비슷한 속성들을 쓴다. div와의 차이점을 쉽고 간단히 설명하자면 div는 줄바꿈이 되는 것이고, span은 줄바꿈이 일어나지 않는다는 것이다.

<div style="border: 2px solid black; padding: 10px"><div>div는 줄이</div><div>바뀐다</div></div>

div는 줄이
바뀐다

<div style="border: 2px solid black; padding: 10px"><span>span은 줄이</span><span>바뀌지 않는다</span></div>

span은 줄이바뀌지 않는다

5) table 태그: 이름에서 알 수 있듯이 표를 그린다. td 태그에서 colspan 속성, rowspan 속성을 쓰면 셀 병합도 가능하다. (thead: Table Head | th: Table Header | tbody: Table Body | tr: Table Row | td: Table Data)

<table><tbody><tr><td colspan="2">데둉해요</td></tr><tr><td>한국 사람들</td><td>금방 잊어요</td></tr></tbody></table>

데둉해요
한국 사람들금방 잊어요

이 정도면 인장 꾸미기에 필요한 태그들은 거의 알려준 듯..? 했는데 br을 빼먹었더라...

6) br 태그: 강제 개행이다. 닫는 태그 없이 사용한다.

<div style="border: 2px solid black;"><span>보우를 달랬는데<br>왜 활을 주세요</span></div>

보우를 달랬는데
왜 활을 주세요

3. style 속성

우리는 앞서 HTML의 구조를 보았고 태그와 속성들을 이용해 요소를 만들어 내용을 작성함을 배웠다. 속성 중에서도 눈여겨 보아야 할 속성이 있는데 style 속성이다.

앞서 몇가지 태그와 속성을 다룰 때 예제의 내용에 style이라는 속성이 들어간 것을 보았을 것이다. 이 style은 인벤 인장을 꾸미면서 절대 빼놓을 수 없는 중요한 속성이다.

style 속성은 조금 특이한데, 다른 속성들과는 다르게 속성값으로 CSS(Cascading Style Sheets) 언어로 적힌 내용을 가진다는 점이다. 그리고 이 CSS는 Style이 들어감에서 눈치를 챘겠듯이 무언가를 꾸미고 디자인하는 용도이다.

style 속성값의 내용은 다음과 같은 구조를 가진다.

속성1: 값; 속성2: 값; 속성3: 값; ...

이 구조가 CSS의 기본 구조이다.

1) 속성(Property): 아까 HTML의 속성은 Attribute임을 유의하라. 여기서의 속성은 테두리, 배경 색, 글자 크기, 글자 색, 여백 등 디자인적인 부분을 의미한다. cf) HTML의 속성(Attribute): 태그에 부가적인 정보를 추가한다.
2) 값(Value): 속성에 따라서 와야하는 값이 다르다. 배경 색이라면 색깔이 와야할테고, 글자 크기라면 크기값이 와야할 것이다.
3) 아까 HTML에서는 공백으로 속성을 구분했지만, CSS에서는 세미콜론으로 속성을 구분한다. 헷갈리지 않도록 주의하자!

CSS는 2탄에서 자세하게 다뤄볼 것이고 여기서는 예제만 한번 살펴보도록 하자.

이미 앞에서 예제를 잘 보여주기 위해 style을 사용했는데, 사실 div는 기본적으로 테두리도, 배경색도 없다. style을 이용했기 때문에 회색 박스가 나온 것이다.

이 강의에서 사용한 회색 박스는 밑의 CSS 코드로 만들어낸 것이다.

background-color: gray; display: inline-block; color: white; border: 1px solid black; padding: 10px;

Hello World!

왜 볼드가 안되냐고? 정상이다. 인벤 에디터의 볼드 기능은 글자를 <b> 태그로 감싼다. 즉 style로 한 게 아니다. 볼드를 원한다고? style로 할 수 있다. 그럼 우리 메붕쿤을 위해서 볼드까지 style을 이용해서 해보겠다.

background-color: gray; display: inline-block; color: white; border: 1px solid black; padding: 10px; font-weight: bold;

Hello World!

짜잔!

앞서 말했듯이, CSS의 주요 속성들은 2탄에서 다뤄보겠다. CSS의 주요 속성들과 그 응용은 분량이 꽤나 나오는 내용이기 때문이다. 안 그러면 메붕쿤들 머리 터진다.

4. 인장용 HTML 코드 작성

결국 우리 메붕쿤들이 이 강의를 보고 있는 이유는 인장을 꾸미기 위함이다. 인장에 어떻게 앞서 배운 것들이 적용되는 걸까?

인장을 편집할 때 사용하는 HTML 코드는 주로 이 구조를 쓴다고 보면 된다.

<태그이름 style="CSS 코드" 태그에 맞는 속성=값 data-inven-~=값>내용</태그이름>

사실 본인이 하나의 웹사이트를 만든다면 모든 요소마다 style을 다는 게 아니라 별도의 style 파일을 작성 후 이를 적용하는 방식으로 디자인하지만 우린 인벤에서 인장을 꾸미는 것이다 보니 거의 모든 요소(태그)마다 style을 써야 한다. 좀 귀찮다. 그치만 멋진 인장을 위해서라면...

이렇게 해서 인장 꾸미기의 기초가 되는 HTML의 구조, HTML의 몇가지 태그와 속성, CSS를 사용하는 style 속성, 마지막으로 인벤 인장을 꾸밀 때 어떻게 적용되는 지를 알아봤다. 

마지막으로 참고할 만한 사이트를 소개한다. https://developer.mozilla.org/ko/docs/Learn/HTML MDN(Mozilla Developer Network)이라는 사이트에서 만든 HTML 튜토리얼이다. 한국어 지원되니까 겁먹지 말라. MDN은 필자도 밥 먹듯이 들리는 아주 좋은 사이트다.

끝이다. 여기까지 오느라 수고했어 메붕쿤, 짝짝짝짝!

* br 추가

흐아암... 이거 거의 5시간 동안 쓰고 고쳤어... 졸려... 자러갈래..