티스토리 뷰

카테고리 없음

코딩 공부, HTML CSS 자바스크립트 입문

인간연료 2024. 4. 23. 15:20

챗GPT가 신기해서 만져보다가 관련된 유튜브 영상을 소비하게 되었고, 코딩할 줄 아는 사람이 부러워졌습니다. 뭔가 프로그래밍은 천재들만 하는 것 같았는데, 여기저기서 코딩 너도 할 수 있어라는 광고들만 뜨고 있네요. 나도 한 번 손대볼까? 하는 생각에 HTML CSS를 만져보았습니다. 뭔가 한글이나 워드 프로그램하고 비슷한 거 같은데 영어 비슷한 암호들로 파일을 만들고 나니까, 브라우저에서 웹사이트처럼 뿅 하고 나타납니다. 오 나도 이제 프로그래머 할 수 있나 보다 착각하기 시작하다가 코딩 덕질 한지 6개월이 넘어갔습니다. 그러다가 멋진 글귀를 발견했습니다.

"프로그램은 섹X와 같다. 한 번의 실수로 평생을 지원해야 한다."

Michael Sinz 말대로, 한 번의 실수가 지금 제 모습입니다. HTML CSS 자바스크립트 노드제이에스 파이어베이스 파이썬 딥러닝까지 저는 도대체 뭐가 궁금하고 뭐를 만들고 싶어서 이러고 있는지 아직도 모르겠지만, 한 번의 실수로 평생을 지원하게 된 것 맞는 말 같습니다. 한숨이 나서, 첫 경험 시절이나 끄적여 봐야겠습니다.

HTML CSS 기초

저는 하루종일 인터넷 창을 열어놓고 일을 하는 직업입니다. HTML을 공부하고 나니, 제 눈에 모이는 모든 웹페이지가 HTML 언어로 만들어졌구나라는 생각을 매순간 하게 되었습니다. 웹페이지에 있는 텍스트, 이미지, 박스, 버튼, 비디오 등 모든 자료를 박아 넣는(마크업 하는) 언어가 HTML 입니다. 그래서 하이퍼 텍스트 마크업 랭귀지(Hypertext Markup Language)라고 이름이 붙었답니다. 코드를 편집하는 에디터로 비주얼 스튜디어 코드를 처음 설치했던 날이 기억납니다. 처음 만들었던 HTML 문서(.html로 끝나는 문서)에서 만났던 HTML 파일 기본 템플릿을 추억 삼아 올려봅니다.

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>그땐 몰랐지. 코딩에 빠지게 될줄.</p>
</body>

</html>

꼬꼬마 때는 태그 모양도 무서웠습니다. 사실 별거 아닌데요. <head> 내부엔 사이트 생성에 필요한 인코딩형식, 사이트제목, 필요한 CSS나 JS파일 등이 들어갈 수 있습니다. <body> 내부엔 실제 웹사이트에서 보여줄 글, 그림 등을 적어주시면 됩니다. 이 정도만 가볍게 기억하고 넘어가면 되는데, 왜 이걸 종이에 깜지 적고 있었는지 멍청했습니다.

이미지를 눌렀을 때 다른 곳으로 이동하게 만드는 것을 몰라 해메고 다녔던 적도 있었습니다. 흑역사를 추억 삼아 박제해 둡시다. 그때는 태그 안에 태그를 넣는 것이 왜 그렇게 무서웠을까요.

<a href="http://naver.com">
  <img src="">
</a>

생각해 보니, 태그 없이 텍스트만 잔뜩 늘어놓고 뿌듯해했던 때도 있었네요. 지금은 안 그렇습니다.

<h1>글 제목은 h태그 안에 넣어야 함</h1>
<p>글 본문 그냥 쓰지 말고 p태그 안에 넣어라</p>
<img src="이미지 경로">
<video autoplay muted loop controls>
	<source src="비디오 경로">
</video>
<a href="">링크</a>
<button>버튼</button>
<ul><li>리스트</li></ul>
<ol><li>리스트</li></ol>

더 기억해 보려고 하니까 추억이 너무 지저분해 지는 군요. 일단 스탑.

자바스크립트 기초

HTML 하고 CSS 만으로 웹사이트 만들어 보고 나니, 뭔가 참 많이 허전했습니다. 원래는 그냥 찍먹만 하고 하산할 생각이었는데, 자바스크립트까지 만지게 돼버렸습니다.

맨날 consol.log() 만 시켜서 이거 도대체 왜 배우나 싶었는데, 코딩애플 선생님 강의가 찰떡이네요. 그러고 보니까 코딩애플 선생님 때문에 코딩에서 도망치는 게 늦어버린 것 같습니다. 너무 재밌음. 코딩 애플 선생님이 힙해 보여서 닮을 때까지 공부해 봐야겠습니다.

추억으로 공부 노트 시작 부분을 뒤져서 옮겨봐야지.

<h1 class="class-test" id="id-test">
    내부 글자 사이즈를 16px로 변경해오십시오
</h1>

  <script>
    document.getElementById('id-test').style.fontSize = '16px';
    document.getElementsByClassName('class-test')[0].style.fontSize = '16px';
    document.querySelector('#id-test').style.fontSize = '16px';
    document.querySelector('.class-test').style.fontSize = '16px';
    document.querySelectorAll('.class-test')[0].style.fontSize = '16px';
    $('#id-test').css('font-size', '16px');
    $('.class-test').eq(0).css('fontSize', '16px');
    $('.class-test').eq(0).html('글자바꾸기');
  </script>

쌩자바스크립트는 하나씩만 선택할 수 있음(jQuery는 전부 선택할 수 있음)

getElementsByClassName('클래스이름그대로복붙')[순서] 대괄호 반드시 붙여야 됨

querySelectorAll('.클래스css표기법')[순서] 대괄호 반드시 붙여야 됨

카멜케이스 대소문자 구별 틀리면 안 됨

끝

코딩이 참 재밌는데, 이걸 취미 생활로 갖는 미친놈이 주변에 잘 보이질 않습니다. 나이 때문인지, 직업 때문인지 코딩 친구 만들기가 쉽지가 않네요. 코딩하면서 같이 놀고 싶다.

저작자표시

티스토리 뷰

코딩 공부, HTML CSS 자바스크립트 입문

HTML CSS 기초

자바스크립트 기초

끝

티스토리툴바