Ⅰ, Ⅱ, Ⅲ, Ⅳ, Ⅴ와 같은 것을 로마 숫자라고 합니다. 로마 숫자라고 불리는 이유는 고대 로마에서 숫자를 나타낼 때 사용되었기 때문입니다. 멋스러운 면이 있어서 그런지 몰라도 시계에서 시간을 나타내기 위해 많이 사용되죠.

논문을 작성하다보면 이 로마 숫자를 써야하는 경우들이 있습니다. 특히 어떤 장 또는 섹션을 나타낼 때는 로마 숫자를 많이 사용합니다. 다음과 같이 말이죠. 

오늘은 LaTeX로 로마 숫자를 나타내는 방법에 대해서 다루도록 하겠습니다. 

\uppercase\expandafter{\romannumeral1}

\uppercase\expandafter{\romannumeral2}

\uppercase\expandafter{\romannumeral3}

\uppercase\expandafter{\romannumeral4}

\uppercase\expandafter{\romannumeral5}

\uppercase\expandafter{\romannumeral6}

\uppercase\expandafter{\romannumeral7}

\uppercase\expandafter{\romannumeral8}

\uppercase\expandafter{\romannumeral9}

\uppercase\expandafter{\romannumeral10}

이상의 코드가 로마숫자 1부터 10까지에 대한 코드입니다. LaTeX에 위 코드를 기입하고, 실행하면 다음과 같은 화면이 출력됩니다. 

만약 소문자로 나타내고 싶다면, \uppercase를 \lowercase로 바꾸시면 됩니다. 

\lowercase\expandafter{\romannumeral1}
\lowercase\expandafter{\romannumeral2}
\lowercase\expandafter{\romannumeral3}
\lowercase\expandafter{\romannumeral4}
\lowercase\expandafter{\romannumeral5}
\lowercase\expandafter{\romannumeral6}
\lowercase\expandafter{\romannumeral7}
\lowercase\expandafter{\romannumeral8}
\lowercase\expandafter{\romannumeral9}
\lowercase\expandafter{\romannumeral10}

위와 같이 바꾼 다음에 코드를 실행하면, 소문자의 로마 숫자로 나타내어집니다. 

margin 또는 padding의 크기를 정해줄 때 상하좌우의 크기를 일괄적으로 같게 정해주려면 다음과 같이 간단히 코딩해주면 되지만,

만약 각각 다르게 정해주고 싶다면 하나씩 지정해줘야합니다. 이때 순서는 상우하좌, 즉 시계방향 순입니다.

이것은 외우는 것이 좋겠죠. 상우하좌! 시계방향! 

간단한 예제를 통해 이것이 맞는지 확인시켜드리겠습니다. 

index.html

style.css

html과 css에 익숙치 않은 분들을 위해서 위 코드에 대해서 간단히 설명을 드리겠습니다. id라는 것이 있습니다. <div> </div>와 같이 시작 태그와 종료 태그로 둘러싸인 것을 요소(element)라고 하는데, 그 요소의 신분증 같은 역할을 해주는 것을 id라고 합니다. id를 통해 우리는 특정 요소를 가리킬 수 있습니다. 예를 들어, index.html에서 id가 ex1인 요소를 style.css에 있는 #ex1 { }의 코드로 꾸며주는 식입니다.

id가 ex1인 요소는 마진을 주지 않기로 했고, ex2 요소는 상우하좌 모두 10px의 마진을 주기로 했고, ex3 요소는 상우하좌 각각 다른 크기만큼의 마진을 주기로 했습니다. 위 코드를 실행하면 다음과 같은 웹페이지가 생성됩니다. 

오늘은 div 태그로 감싸진 요소에 테두리를 그리는 방법에 대해 다루도록 하겠습니다. 테두리를 그리기 위해서는 css의 border 속성을 사용하면 됩니다. 간단한 예를 통해 어떻게 테두리를 그리는지 보여드리도록 하겠습니다. 

index.html

style.css

위 코드를 실행시킨 결과는 다음과 같습니다. 보시다시피 상하좌우 전체 테두리를 그릴 수도 있고, 일부만 그릴 수도 있습니다. 또한 다양한 스타일의 테두리를 그릴 수도 있습니다. 

테두리를 그릴 때는 주로 다음과 같은 값들을 설정해줘야 합니다. 

테두리의 굵기, 스타일, 색상을 설정해줘야합니다. 

위 예제에서는 테두리의 스타일로 solid, dotted, dashed만 보여드렸는데, 이를 제외하고도 double, groove, ridge, inset, outset, none, hidden 등 다양한 종류의 스타일이 있습니다. w3schools의 CSS Borders를 참조하세요. 

팬톤에서는 매년 올해의 색을 발표하고 있습니다. 2020년 올해의 색은 클래식 블루(classic blue)라고 합니다. 왜 이런 걸 굳이 정해주지 싶은 마음이 들 때도 있지만, 또 막상 누군가가 이 색상이 올해의 색이라고 정해주면 또 써보고 싶은 것이 사람의 심리인 것 같습니다. 아무튼 제가 좋아하는 색상으로 정해줘서 고맙네요. ㅋㅋ 참고로 클래식 블루의 색상코드값은 #0f4c81입니다. 

2020년이 이미 절반이 지났지만, 이 색상을 활용해보고 싶어서 블로그의 네비게이션과 가로선, 버튼, 카테고리 등에 클래식 블루를 적용해봤습니다. PC 화면은 다음과 같습니다.  

모바일 화면은 다음과 같고요. 

이번에 스킨을 꾸미면서, 모바일 화면에서는 아래에 사이드바가 거추장스럽게 많이 딸려 내려오지 않게 했습니다. 내용이 길지 않은 글들도 꽤 있는데, 본질보다 부가적인 것이 더 많이 보여지는 것이 좀 그렇더라고요. 좀 더 방문자분들이 글에 집중할 수 있도록 수정했습니다. 

더 이쁘게 만들고 싶지만, 제 미적 감각에는 한계가 있어서 이 정도로만 수정하려고 합니다. ㅎㅎ 내년의 색은 무엇일지 궁금하네요. 제 마음에 드는 색상이면, 내년에 색상만 다시 바꿔보는 것도 재밌을 것 같네요.

태그와 요소가 혼용되어 사용되는 경우가 많습니다. 저도 그랬습니다. 그러나 엄밀히 따지면 개념이 조금 다릅니다.

태그는 단순히 < 와 >로 묶인 명령어들을 의미합니다. 예를 들어, <p>, </p>, <h1>, </h1>, <img>와 같은 것들이죠. 이중에서 <p>, <h1>과 같은 것들은 시작태그라고 부르고, </p>, </h1>은 종료태그라고 부릅니다. 태그 중에는 <img> 태그와 같이 종료태그가 없는 태그들도 있습니다. 

w3schools의 HTML element reference를 참고하시면 어떤 태그들이 있는지 한눈에 확인하실 수 있습니다. 

반면 요소는 태그들을 이용해서 만들어낸 웹페이지의 구성요소라고 보시면 됩니다. 예를 들어,

<p> 안녕하세요. </p>

<h1> bskyvision </h1>

<a href="https://bskyvision.com"> 비스카이비전 </a>

과 같은 것을 요소라고 부릅니다. 

<참고자료>

[1] https://opentutorials.org/module/966/6986, 오픈튜토리얼스, "엘리먼트는 뭐고, 태그는 또 뭐야"