(아래 글은 모두 2022.02.14에 작성된 글입니다.)
짤막한 서론을 시작으로 내 인생 처음 써보는 TIL을 시작하겠다.
No.0
불과 며칠 전에 부모님과 진로 상담을 하면서, 아버지께서 코딩을 배워보는 것이 어떻냐는 제안에 응하였다. 아버지는 곧바로 HTML과 CSS, JavaScript에 대한 소개와 기본적인 원리, 코딩 방식에 대해 설명해 주시고, 직접 만드신 간단한 예시도 보여 주셨다. 어려울 것이라 우려했던 것과는 다르게, 각 컴퓨터 언어와 프로그래밍 언어 사이에 얽힌 이야기와 Visual Studio Code라는 코딩 프로그램의 체계적이고 확실한 기능을 직접 보고 나니 꽤 할만할 것 같다는 생각이 들었던 것 같다. 코딩 강의 사이트 두 가지(인프런, 노마드 코더)와 JavaScript 튜토리얼 사이트를 소개받고, 그 뒤에 코딩 공부를 위해서 마지막으로 소개받은 것이 velog였다.
이런 첫 만남, 나름 나쁘지 않을지도?
.... 내가 봐도 오글거리네.
위 이미지는 오늘 인프런에서 들었던 강의 목록이다. 생활코딩님의 무료 강의로, 유튜브 영상으로 구성되어 있었다. 나는 강사님과 달리 VSCode를 사용할 예정이지만, 사용 방식이 크게 다르지는 않으리란 생각으로 학습에 임했다.
Ps. 학습 중에 다중 커서 사용 방법도 익혔다.
No.1
오늘의 첫번째 주제는 HTML에 대한 내용이다.
우선, 코딩을 시작하기 위해서 파일을 생성하는 것부터 시작한다.
바탕화면에 새로운 폴더, 강사님이 만든 것처럼 WEB이라는 이름의 폴더를 만들며 시작했다. VSCode를 통해 WEB 폴더를 열고, 본격적으로 1.html 파일을 만들었다(해당 파일은 이후 WEB 폴더 안에 HTML 폴더를 만들며 그 안으로 옮겼다).
그 다음은 태그에 대한 기초적인 설명이다.
<tag>text</tag>
이는 프로그래밍에 있어 가장 기본적인 구조로, 열리는 태그로 시작해서 닫히는 태그로 끝을 내고, 사이에 텍스트를 끼우는 형식이다.
가장 처음 배운 태그는 텍스트를 강조하는 strong 태그와 밑줄을 치는 u 태그였다. 뒤이어, 제목을 지정하는 h1~6 태그, 줄을 바꾸는 br 태그와 단락을 바꾸는 p 태그까지 순서대로 배웠다.
- br 태그와 p 태그의 역할은 비슷하다. 보통 br 태그가 선호되는 편이지만, 강사님은 단락을 확실히 구별할 때는 CSS를 적용한 p 태그가 좋은 선택이라며 p 태그를 잘 활용하길 추천해 주셨다. 두 태그를 알아두고 원하는 곳에 적절히 사용하는 연습을 해야겠다는 결론을 얻었다.
- 또, br 태그는 특이한 점이 있었는데, 아래에 나올 img 태그처럼 무언가를 설명하지 않아서 닫히는 태그를 사용하지 않는다고 했다.
<strong>text</strong> <u>text</u> <h1>text</h1> <br> <p>text</p> <p style="margin-top: 45px;">text</p> (강사님이 추천해주신 p 태그 사용법 예시)
그 다음은 이미지를 삽입하는 img 태그이다. 해당 태그는 원본(source)를 가져오는 속성 태그, src 태그를 통해 삽입할 이미지를 가져온다.
나는 WEB 폴더의 HTML 폴더 안에 img 폴더를 만들어 web1.jpg를 넣은 뒤 크기를 조절하는 width 태그와 함께 명령을 적었다.
<img src="img/Web1.jpg" width="90%">
그 다음은 목차, li 태그와 관련된 부분이었다. li 태그는 부모 태그를 가지고 있는 자식 태그로, 부모 태그로는 ul 태그와 ol 태그가 있다.
- ul 태그는 이런 li 태그를 기호형 목록으로 묶는 기능을 하고, ol 태그는 li 태그를 숫자형 목록으로 묶는 기능을 한다.
<ol> <li>text</li> </ol> <ul> <li>text</li> </ul>
그 다음으로 배운 것이 html 문서에서 가장 먼저 나오는 문서 형식 표시 방식이었다. !DOCTYPE html, html, head, body 까지, 태그는 총 네 가지였다. 이 부분은 아버지께서 미리 설명해 주셨지만, 다시 한 번 들으며 확실하게 기억했다.
<!DOCTYPE html> (문서 형식) <html> (문서 틀) <head> (문서 설정) </head> <body> (본문) </body> </html>
head 태그 안에 들어가는 meta charset 태그는 한글 깨짐을 방지하기 위해서 문자 인코딩 방식을 설정하는 태그였다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> </body> </html>
오늘의 첫 HTML 공부에서 마지막으로 배운 것은 링크를 거는 방법이었다. a 태그로 링크를 걸고 싶은 텍스트를 감싸고 href 속성 태그로 원하는 주소를 기입하면 된다.
- 추가적으로, target 태그는 사이트를 열 탭을 지정, title 태그는 링크의 이름을 표시한다.
<a href="https://www.ooo.org">text</a> <a href="https://www.ooo.org" target="_blank" title="ooo">text</a>
No.2
두번째 주제는 CSS이다. CSS는 사용하는 방법이 꽤 복잡해서 이해하는데 조금 시간은 걸렸다. 하지만 몇 가지 적을게 없다는 사실은 조금 신기하게 느껴진다. HTML에서 사용하는 font 같은 태그 대신, 좀 더 간편하고 확실한 방법으로 문서를 꾸밀 수 있게 해주는 것이 바로 CSS이다. CSS는 style 태그를 속성 태그로 이용하거나, head 태그 안에 style 태그를 넣어 선택자를 이용한다.
[style 속성 이용] <a href="https://www.ooo.org" style="color:red; text-decoration:underline;">text</a>
[style 선택자 이용] <head> <style> tag { (선택자) property:value (효과) } </style> </head>
이렇게 하면 선택자로 원하는 범위 내에 효과를 적용할 수 있게 된다.
선택자는 각자 우선순위를 가지고 있는데, 종류는 id, class, tag까지 총 세 가지로 나뉜다.
-
id 선택자 : 최우선, 1회 타겟팅
#aaa {} ▶ id="aaa"와 함께 있는 부분을 선택한다. -
class 선택자 : id 선택자 아래, class값을 그룹화
.bbb {} ▶ class="bbb"와 함께 있는 모든 부분을 선택한다.
-
tag 선택자 : class 선택자 아래, 모든 tag를 지정
tag {} ▶ 선택자로 지정된 tag를 모두 선택한다.
이외의 선택자는 이곳에서 찾을 수 있다.
No.3
오늘 마지막으로 배운 주제는 JavaScript이다. 자바스크립트는 정적인 컴퓨터 언어를 동적으로 바꿔주는 역할을 한다.
먼저, script 태그이다. script 태그 안쪽에 있는 코드는 자바스크립트로 해석한다.
아래는 script 태그를 이용한 예시이다.
<script> document.write("hello world") document.write(1+1) </script> script 태그 안쪽의 document.write()가 값을 출력하는 것을 보면, 값은 결과값으로 출력되는 것을 볼 수 있다.
두번째는 input 태그를 이용해서 이벤트를 발생시키는 방법이다.
<input type="button" value="click" onclick="alret('!')">
type 태그로 형식을 지정한다. value 태그는 button 형식에 들어가는 이름(값)이고, onclick 태그가 이벤트를 지정한다.
click이라는 이름을 가진 버튼을 누르면 !라고 적힌 경고창이 뜨는 식이다.
on~ 관련 태그의 예시는 더 있다.
<input type="text" onchange="alret(1+1)"> <input type="text" onkeydown="alret('changed!')">
텍스트 박스 안에서 변화가 일어날 경우 경고창을 띄우는 식이다.
세번째는 div 태그와 span 태그이다.
- div 태그는 해당 줄 전체를 차지하는 것을 제외하면 혼자서는 아무런 기능을 하지 없지만, CSS나 JS로 제어하고자 하는 부분을 선택할 수 있게 해준다.
- span 태그는 줄바꿈 없이 div와 동일한 효과를 가진다.
위의 두 태그는 아래와 같은 방식으로 사용할 수 있다.
<div id="a" class="b">JavaScript</div> <span class="b">JavaScript</span>
No.3의 마지막은 제어할 태그를 선택하는 방법이다.
input 태그를 통해서 제어하고픈 태그를 선택한다.
아래는 예시이다.
<input type="button" value="Night" onclick=" document.querySelecter('body').style.backgroundColor='white'; document.body.style.backgroundColor='white'; ">
강의 안에서는 querySelecter()를 이용해 body 태그를 선택하여 CSS를 적용하는 방식이었지만, 아버지께서 body 태그와 같은 상위 태그는 굳이 querySelecter()로 선택할 필요가 없다라고 정정해 주셨다. querySelecter()는 다음에 하위 태그를 선택할 일이 있다면 사용해야겠다.
No.4
오늘 하루동안 짧지만 길었던 코딩 첫 탐방을 끝마치며 느낀 소감을 남겨보겠다. 솔직히 코딩을 만만하게 생각했다면 만만하게 생각했다고 해도 틀리지 않았을 것 같다. 그정도로 코딩에 대한 첫인상은 좋은 편이었고, 한 번 해보겠다는 마음가짐은 나태한 정신을 가진 나에게 생애 첫 변화를 가져다 준 것 같다. 똑같은 일에 오랫동안 머물 의지가 부족했던 내게 그 나약하던 세월이 무색할 정도로 오래동안 하나의 일에 집중시켰다. 솔직히 말하면 신기하기도 하고, 아직까지도 실감이 나지 않으며, 오늘의 일과가 이제서야 끝나간다고 생각하니 정신이 약간 피곤해진 느낌도 든다. 앞으로는 다른 일을 하면서 함께 병행해야 하는데, 내가 잘 해내리라는 자신은 없다. 하지만 아직 포기할 생각은 전혀 없다. 첫날이지만, 내가 이렇게까지 열중한 공부는 없었던 것 같기도 하다. 프로그래밍이란 것에 마성의 매력이라도 있는 걸까? 아니면, 이 일이 내 적성에 맞는 걸까? 확신이 들 때까지 계단을 오르다 보면 아마 이 질문에 답을 내릴 수 있을 지도 모른다. 이왕 시작한거, 한 번 끝을 내보자.
Ps. 다음에는 좀 더 간결하게 하면서 이미지 자료를 더 많이 사용해서 눈에 잘 띄도록 만들어야겠다. 코드와 출력물을 비교할 수 있게!
0개의 댓글
