본문 바로가기
Programming/Practice

[Practice] HTML, CSS, JavaScript란?! (feat. 깃똥찬 계산기) (#코딩공부)

by 함께 공부해요 2020. 1. 23.

https://www.youtube.com/watch?v=ffENjt7aEdc

 


HTML = Hyper Text Markup Language

화면들에 이것들을 놓여있어라! 하고 갖다놓는 수단

 

CSS = Cascading Style Sheets

HTML을 올려놓은 이것들을 이렇게 보여라! 하고 꾸며주는 [문서]

 

JavaScript = 브라우저에서 다양한 일을 수행하고 HTML로 올려놓은 요소들을 변형시키거나 직접 만들어내는 역할


<준비물>

https://code.visualstudio.com

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com


1. 첫 번째 시도

분명.. 나는 보이는대로 코드를 넣었을 뿐인데.. 뭔가가 잘못됐어!!!! (범인은 이 안에 있어!!ㅋㅋㅋㅋ)

 

이때 적었던 코드를 캡쳐를 못했는데, 다음에는 결과물에 대한 코드도 캡쳐해놔서 어느부분이 잘못되었는지 봐야겠다.


2. 두 번째 시도

"오호 이번에는 그래도 칸안에 들어왔군, 좋아좋아!!"... 할게 아니잖아!!ㅋㅋㅋㅋㅋㅋㅋㅋ

이번에도 역시 '수식을 입력하세요.' 칸의 너비 설정이 잘못된거 같다. 다시다시!!


3. 세 번째 시도

오.. 드디어 그럴듯한 모습을 갖추게 됐다! YEAH~~

그럼 저렇게 나올 수 있었던 html과 css 코드를 한번 보면,

요렇게! 영상에 나온거를 멈추고 최대한 동일하게(?), 아니 그냥 똑같이 적으려고 노력해봤다... (처음이라 어려웠다 ㅠ)

그럼 이것으로 성공인 것이냐..?! 그렇지 않다...


4. 네 번째 시도, 계산기의 역할을 갖추어라!

'깃똥찬 <계산기>' 이기 때문에, 계산을 할 수 있는 계산기 역할을 갖춰야한다.

영상에 나온대로 똑같이 따라한 것 같아 보이지만.. 분명 어딘가에 문제가 있다ㅠㅠ

이 부분에 대해서는 https://github.com/wook2124/Practice_Calculator

 

wook2124/Practice_Calculator

Make a calculator. Contribute to wook2124/Practice_Calculator development by creating an account on GitHub.

github.com

github에 올려두었으니... 추후에 내 실력이 조금 오르면 어떤 점이 문제였었는지 보려고 한다.

 

1일 1깃 화이팅!!

댓글