페이지에 글을 코딩글을 게시할 때 엄청나게 가독성이 좋아지고 깔끔해지는 기능.


넣는 방법도 별 어렵지 않으니 코딩글을 게시하는 분들은 적용해보는 것을 강력추천!


(HTML을 배우지않으신 분도 충분히 적용가능합니다)


어떻게 변하는지는 비포에프터 이미지로 한방에..


<↑이렇던 친구가.....> - Before


<↑이렇게 변했습니다! 혁명이에요!> - After


자! 그럼 바로 적용해보도록합시다.


https://highlightjs.org/

해당 링크에서 Get version을 클릭하여 압축파일을 받고 바로 압축을 해제해 줍시다.



압축을 해제한 폴더(highlight)의 highlight.pack.js가 필요하고


styles폴더에서 원하는 코드 스타일을 고릅니다. 코드 스타일을 미리보는 방법

https://highlightjs.org/static/demo/ 


해당 링크에서 Styles 카테고리를 눌러보시면서 미리 볼 수 있습니다.

미리 본 스타일의 이름과 styles폴더 안에 이름이 같은 css파일이 필요합니다.


두 가지를 잘 준비하셨다면 이제 티스토리에 적용을 해보아야겠지요?



티스토리 관리 - 꾸미기 - 스킨 편집으로 들어가줍니다.




먼저 오른쪽 상단에 파일업로드에서 아까 준비한 두가지 highlight.pack.js와


미리 본 스타일의 이름과 styles폴더 안에 이름이 같은 css파일을 업로드!!


업로드가 다 되었다면 파일업로드 왼쪽 끝에있는 HTML 탭으로 갑니다. 



HTML코드를 보시면 </head>가 있습니다. 이 줄의 바로 위에 아래의 코드를 복사해서 넣어줍니다.

<link rel="stylesheet" href="./images/default.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

그리고 저 코드에서 default 라고 되어있는 부분을 아까 미리 봐둔 스타일의 파일 이름으로 수정해줍니다(골라두신 CSS파일 이름과 같으면됩니다). 


적용이 끝났습니다. 이제 사용하는 방법을 알아볼까요? 어렵지않습니다.


글쓰기를 가신 뒤 HTML체크 박스를 체크해주면 HTML작성으로 변경됩니다.


이렇게 작성하시면됩니다.


<pre><code>이 사이에 코드를 집어넣읍시다.</code></pre>


적용해보시면 정돈된 코드의 모습을 보실 수 있을 것입니다. 


그리고 단, 한가지의 단점이 있습니다. 


C++을 예로들면 #include <iostream> 코드가 들어갈 때, '<', '>' 이녀석들이 출력되지않습니다


글씨로 인식하는 것이 아니라 태그로 인식해서인데요. 


해결방법은 간단합니다. '<' 이녀석을 &lt; 이걸로 대체해서 써줍시다. 그러면 해결!

블로그 이미지

irostub

iro의 잡화상점

,

예제 3)km를 mile로 환산


다른 환산 로직과 별다를 것은 없다. 반복학습의 일환.


확실히 작성하면서 느끼는데, 개인적으로 묵시적 형 변환보단 명시적 형 변환이 더 깔끔하다고 느껴진다.

#include "stdafx.h"
#include <iostream>
using namespace std;

int main()
{
	int km = 0;
	float mile = 0;

	cout << "km값을 입력하세요 : ";
	cin >> km;

	mile = (float)km * 0.62f;

	cout << km << "km는 " << mile << "mile입니다.";
}



블로그 이미지

irostub

iro의 잡화상점

,

예제 2) 시,분,초를 입력받아 초로 환산하여라.


배운 내용대로 구성하자면 ' ' - 공백으로 구분하여 각각 시분초 변수에 입력받고 연산을 결과값에 누적시켜주는 것으로 완성.


#include "stdafx.h"
#include <iostream>
using namespace std;

int main()
{
	//TODO : 시 분 초를 입력받아 초로 변환
	int hour, minute, second, result;

	cout << "시, 분, 초 를 ' '으로 구분하여 입력하세요 : ";
	cin >> hour >> minute >> second;

	result = hour * 3600;
	result += minute * 60;
	result += second;

	cout <<"시간을 초로 환산한 값은 " << result <<" 입니다.";
}


조금 더 나아가서 C-String을 사용하면 공백문자로 아리쏭하게 입력받는 것이 아닌

 x : x : x 로 입력 받는 것이 가능할 것 같다.


#include "stdafx.h"
#include <iostream>
using namespace std;

int main()
{
	char inputTime[50];
	int result = 0;
	char temp[10];

	cout << "시:분:초 를 입력하세요 : ";

	for (int i = 0; i < 2; i++)
	{
		cin.getline(inputTime, 50, ':');
		strcpy_s(temp, inputTime);

		if (i == 0)
		{
			result += atoi(temp) * 3600;
		}
		else if (i == 1)
		{
			result += atoi(temp) * 60;
		}
	}
	result += atoi(inputTime);

	cout << "시간을 초로 환산한 값은 " << result << " 입니다.";
}


이렇게 하면 조금 더 자연스럽게 시:분:초 를 입력할 수 있다. 큰 차이는 없지만 스페이스바로 띄워서 구분하는 것보다 ':'를 기준으로 구분하는 것이..조금의 차이점?



블로그 이미지

irostub

iro의 잡화상점

,

예제 1)


cm로 값을 입력받아 feet&inch로 표현하여라.


결과 예)

키를 cm로 입력하세요 : 190

6feet 2inch 입니다.


#include "stdafx.h"
#include <iostream>
using namespace std;

int main()
{
	int cm, feet, inch = 0;
	cout << "키(cm)를 입력하세요 : ";

	cin >> cm;

	inch = cm / 2.54f;
	feet= inch / 12;
	inch %=12;

	cout << feet<<" feet "<< inch<<" inch 입니다.";


문제점. inch의 정확한 소수점 표현 실패


조금 생각해서 Float 변수 선언해주고 나눗셈 결과를 Float 변수와 int 변수에 저장해서

int 변수에 들어가있는 제수를 Float 변수에서 빼줬다.


일단 꽤 정확하게 나오는데는 성공했지만, 문제는 보기에 이쁘지않다는 것


실행 결과가 xx feet 0.xxxxxxinch 입니다.

'0.' 이녀석 지우고싶다.



#include "stdafx.h"
#include <iostream>
using namespace std;

int main()
{
	int cm, feet;
	float inch, temp;
	cout << "키(cm)를 입력하세요 : ";

	cin >> cm;

	inch = cm / 2.54f;
	feet= temp = inch / 12;
	inch = temp-feet;

	cout << feet<<" feet "<< inch<<" inch 입니다.";
}


블로그 이미지

irostub

iro의 잡화상점

,