초간단! 프로그래밍 지식이 전혀 없이 나만의 웹사이트 만들기! - 2편[마무리]

followme95(54)

Published in

#kr

Words

607

Reading

3 min

Listen

Play

안녕하세요, @followme95 입니다.

저번에 작성했던 글에 이어서 오늘은 '주어진 홈페이지'를 '자신만의 홈페이지'로 만드는 과정에 대해 다루도록 하겠습니다.

저희는 index.html에 대해서만 고치면 되는데요.

정석적으로 하는 방법은 html 언어를 배우면 쉽게 할 수 있지만, 저희는 그렇지 않으므로 '눈치'를 이용해서 바꿔보도록 하겠습니다.

저희가 이용한 템플릿의 제일 윗화면은 이렇게 생겼습니다. 무슨 단어들이 있는지 볼까요?
"Welcome to our studio!", "It's nice to meet you", "tell me more", "start bootstrap" 등등의 단어가 있네요.
제가 여기서 질문을 드리겠습니다. 위에 언급한 저 단어들이 과연 프로그래밍 코드로 쓰이는 언어일까요?
당연히 아닙니다. 따라서 주어진 index.html 코드에서 저 단어들이 있는 위치에 저희가 원하는 표현을 작성하면 됩니다.
한가지 팁을 더 드리자면, 이 코드의 경우에는 저희가 위에서 아래로 보는 웹페이지의 내용과, 코드에서 위에서 아래로 보는 웹페이지의 순서가 같습니다. 이 점을 활용해서 코딩을 전혀 할 줄 모르는 사람도 내용을 고칠 수 있습니다.

60번째 줄에서 69번째 줄에 "Welcome to our studio", "It's nice to meet you", "Tell me more" 라는 단어들이 보이네요.
이 부분을 한번 바꿔볼까요?

자, 이렇게 내용을 바꿔보았습니다. 그러면 화면에 보이시는 stop 버튼을 한 번 눌러주시고, ctrl+s 버튼으로 저장을 해주신다음에 run project를 해주시고 웹페이지를 열어주세요.

짜잔, 제가 쓴 표현들이 원래 있던 위치로 그대로 들어갔습니다 :)

두번째 꿀팁! index.html에서 Ctrl+F(찾기) 기능을 이용하면 더 쉽습니다. 예를 들어 바꾸고 싶은 내용의 위치가 "Start bootstrap"일 경우, index.html에서 Ctrl+F를 누르시고 "Start bootstrap"을 치시면 더 쉽게 위치를 바로 찾을 수 있겠죠. 주의사항은 그 단어가 자주 쓰이는 단어일 경우 코드에서 어떤 위치에 있는지 위치를 신경쓰셔야한다는 점입니다.
예제를 바로 보여드리도록 하겠습니다.

Ctrl+F를 누르고, "Start bootstrap"을 쳤더니, 검색결과가 두개가 나왔습니다.
1번째 검색결과는 바로

웹페이지의 이름과 관련이 있습니다.[정식명칭을 까먹어서 기억이 안나네요.]
2번째 검색결과는 바로

저희가 띄운 웹페이지의 제일 앞에 보이는 부분의 로고와 관련이 있습니다.

그러면 각각 부분을 바꿔보도록 할까요?

아까와 마찬가지로 Stop 버튼 누르시고, Ctrl+S로 저장하시고, Run project 버튼 누르신다음에 다시 웹페이지를 띄워보시면

짜잔, 다 바꿨습니다.

이렇게 저희는 주어진 템플릿의 모든 글씨를 바꾸는데 성공하였습니다.

이미지 넣기

이제 이미지를 눈치껏 넣어보도록 하겠습니다.

웹페이지에서 스크롤을 내리시면 Portfolio 라는 부분이 있습니다.
이 부분이 바꾸기 쉬울 것 같다는 느낌이 오실겁니다.(사진이 정렬되어있으니까요.)
코드를 보도록 하겠습니다.

여기에서 저희에게 제일 익숙한 사진과 관련된 단어는 무엇인가요? 바로 126번째 줄에 보이는 .jpg 라는 단어가 눈에 들어오실 겁니다. 이 부분을 저희가 원하는 이미지로 바꾸어주면 문제가 해결이 될 겁니다.

원하시는 이미지 파일의 이름을 영어 또는 숫자로 입력해주신 뒤(한글은 안됩니다.) public 폴더에 있는 img 폴더로 드래그 앤 드랍해서 옮겨주세요.

이렇게 옮겼습니다.
다른 부분은 건들지 않고, 이미지 파일만 교체하도록 하겠습니다.

짜잔, 이렇게 저희가 원하는 이미지로 교체하는 것에 성공하였습니다.

마무리 및 주의사항

먼저 주의사항부터 알려드리자면, c9.io에서 제공하는 서버가 무료이기 때문에 일정 시간이 지나면 자동으로 꺼지게 됩니다. 그럴 때에는 그냥 다시 run project 버튼을 누르면 켜지므로, 누구에게 보여주기 위해서는 몇시간 전에 run project를 눌러서 켜주시고 보여주시면 됩니다.

별로 어렵진 않았지만 한계점이 많죠. 글씨크기, 글씨 색깔, 글씨 폰트 그리고 이미지의 경우에는 이미지 크기, 이미지와 텍스트와의 정렬 등등 다루고 싶은 부분이 많으실 것이라 생각됩니다.

이번 단계로 프로그래밍의 기본적인 원리를 재미있게 느끼셨다면, 지금부터 시작하시면 될 것 같습니다.