오뚝이개발자

웹 클론 코딩을 할 때에 유용한 익스텐션 몇 가지를 소개한다. 해당 내용은 유튜버 노마드코더에서 참고한 것이다. 1. colorzilla 웹에서 특정 색깔의 RGB 코드값을 알 수 있게 해준다. 2. cssviewer 웹에서 특정 부분의 css 코드를 보여준다. 3. jsonviewer json 형태의 웹 정보를 좀 더 가독성이 있는 형태로 바꾸어준다. 4. whatfont 웹에서 사용하고 있는 font가 무엇인지 알려준다. 5. page ruler redux 웹 페이지에서 마치 자(ruler)처럼 특정 규격을 측정하는데 도움이 된다. 6. builtwith 웹이 어떠한 기술 스택으로 이루어져있는지 파악하는데 도움이 된다. https://www.youtube.com/watch?v=KtzSsrYj440

본 글은 유튜버 생활코딩님의 WEB2 JavaScript 강의를 듣고 정리한 것이다. 위의 예시에서 x,y 같이 값이 바뀔 수 있는 것이 변수이다. 그에 반해 1=2를 입력하고 실행시켰을 때 에러가 발생하는데 이는 1이 변수가 아닌 상수이기 때문이다. 그렇다면 이러한 변수를 사용하는 것은 효용은 무엇일까? 아주 긴 텍스트가 있다고 치자. 이 때, 특정 단어만을 다른 단어로 바꾸고자 하는데 변수를 사용하면 아주 간단하게 바꿀 수 있다. 예시는 아래와 같다.(참고로 실행을 유보할 때는 Ctrl+Shift를 누르면 된다.) name이란 변수를 지정해두면 복잡한 텍스트에서 해당 변수의 값만을 바꾸는 것으로 name이란 변수가 들어가는 모든 부분에서 변화를 줄 수 있다. 참고로 변수의 경우 이를 명시하기 위해 v..

본 글은 유튜버 생활코딩님의 WEB2 JavaScript 강의를 듣고 정리한 것이다. JS에는 다양한 데이터타입이 있다. 여기서는 가장 많이 쓰이는 문자열과 숫자에 대해 알아보고 그들을 이용한 간단한 연산이나 함수를 살펴보자. 간단히 콘솔창에서 시험해보도록 하자. 위와 같이 네가지 산술연산이 가능하고, 나눗셈 연산은 소숫점까지 표현된다. 이제 문자열을 살펴보자. 큰따옴표 혹은 작은따옴표로 묶여있는 것은 문자열로 인식한다. length는 문자열의 길이를 알려주고, 문자열의 + 연산은 concatenating 연산이 된다. length 외에도 다양한 기능을 제공하는 함수들이 많다. 매우 많기 때문에 여기서는 몇가지의 예시들만 보여주고, 자세한 것은 모질라에서 제공하는 문서를 필요에 따라 참고하면 된다. ht..

본 글은 유튜버 생활코딩님의 WEB2 JavaScript 강의를 듣고 정리한 것이다. JS 코드를 파일 생성 없이 웹페이지상에서도 바로 실행시킬 수 있다. 방법은 크롬의 개발자도구 창의 Console 탭에서 작성한 뒤 실행시키는 것이다.(엔터를 누르면 실행된다.) 예시는 다음과 같다. 참고로 length는 문자열의 길이를 알려주는 함수이다. 이를 실행시키면 아래와 같이 경고창으로 문자열의 길이를 알려준다. 또 다른 방법은 개발자도구 창의 Element 탭에서 ESC를 누르는 것이다. 그럼 아래에 Console 탭이 뜨게 된다. 이와 같이 JS를 실행하면 파일 생성 없이 좀 더 간단하게 실행시켜볼 수 있고, 보고있는 웹페이지의 정보를 기반으로 JS 코드 구현이 가능하다.(예컨대, 댓글추첨기능 등...)

본 글은 유튜버 생활코딩님의 WEB2 JavaScript 강의를 듣고 정리한 것이다. 웹페이지에선 다양한 일들이 발생할 수 있다. 예컨대, 클릭이나 텍스트입력과 같은 일들이다. 나열하자면 무수히 많은데 이러한 것들을 이벤트라고한다. JS를 사용하면 이들 이벤트가 발생하였을 때 각각 특정한 동작을 하도록 지정할 수 있다. 위 코드는 hi라는 버튼을 만들어 이를 클릭했을 때 hi라는 alert 메시지가 뜨도록 한다. 코드를 실행시키고 크롬으로 열어보면 위와 같이 hi 버튼이 만들어진다. 이를 클릭하면 아래와 같은 메시지가 뜬다. 이제 다른 이벤트도 다뤄보도록 하자. 코드에 아래와 같이 한 줄을 추가해보자. 그럼 아래와 같이 hi 버튼 옆에 텍스트 창이 뜰 것이다. 위 코드와 같이 type 속성을 text로 ..

본 글은 유튜버 생활코딩님의 WEB2 JavaScript 강의를 듣고 정리한 것이다. HTML에게 특정 부분이 JS 코드라는 것을 어떻게 알려줄까? 바로 script 태그를 사용하는 것이다. 이를 사용하면 HTML에게 script 태그 안의 내용은 JS코드로 인식을 하게 도와준다. JavaScript HTML 1+1 위 코드에서 script 태그 안의 document.write(1+1)은 JS 코드로, 그 아래의 1+1은 HTML 코드로 인식된다. 그럼 이 코드가 화면에는 어떻게 출력될까?(document.write는 화면에 무언가를 wirte할 때 사용하는 JS코드이다.) 위와 같이 JS 코드로 입력한 것은 2라는 결과값을, HTML 코드로 입력한 것은 그대로 1+1을 출력하는 것을 알 수 있다. 이처..

본 글은 유튜버 생활코딩님의 WEB2 JavaScript 강의를 듣고 정리한 것이다. 자바스크립트는 사용자와의 상호작용을 컨트롤하는 언어이다. 본래 웹브라우저는 한 번 화면에 표시되면 자기자신을 바꿀 수 없다. 이를 바꿀 수 있도록 해주는 것이 바로 JS이다. 따라서, 다른 말로 하면 JS는 HTML을 제어하는 언어이다. 그래서 기본적으로 JS는 HTML 위에서 작동한다. JS의 이러한 특성이 웹페이지를 훨씬 동적으로 작동하도록 바꾸어주는 것이다. 예시를 들어보자면, 네이버의 메인 화면에 들어가면 다음과 같이 우측하단에 라이트모드로 보기, 다크모드로 보기를 선택할 수 있도록 되어있는 버튼이 있다. 이것을 누르면 페이지가 다크모드 혹은 라이트모드로 바뀌는데 이러한 것을 가능하게 하는 것이 바로 JS이다.