지우의 우당탕탕 개발일지

1. 부트스트랩이란?2. 부트스트랩의 장점3. 부트스트랩의 특징4. 컨테이너5. Bootstrap의 그리드 시스템6. 글자색 스타일명7. 배경색 스타일명8. 버튼만들기  1. 부트스트랩이란? https://getbootstrap.kr/ Bootstrap강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기getbootstrap.kr 반응형 모바일 웹사이트를 개발하는 데 가장 인기 있는 HTML, CSS, JavaScript 프레임 워크이다.  CDN으로 포함하기에 있는 코드를 복사하여 HTML   BootStrap 의 css와 관련된 부분  bootst..

1. JSX 란?2. JSX 의 역할3. JSX의 장점4. JSX의 사용법  1. JSX란? ' Syntax extension to JavaScript ' 로 자바스크립트의 확장 문법  Q. 문법을 어떻게 확장 시킨 것인가?A. JSX는 JavaScript와 XML/HTML 을 합친것 ex. const element=Hello, World!; 에서Hello, world!부분이 자바스크립트와 HTML 코드가 결합되어 있는 JSX코드이다.  2. JSX의 역할 ' 코드가 더욱 간결해지고 생산성과 가독성을 올리는 역할 '  즉, JSX를 쓰지 않더라도 가능하지만 더욱 효율적으로 사용하기 위해서 JSX를 쓴다! Q. 그렇다면 JSX를 쓰지 않는다면 어떻게 될까?사실 JSX는 내부적으로 XML/HTML 코드를 자..

콘솔 (Console) 첫 강의에서 했던 것처럼 웹 브라우저에서 오른쪽 버튼 > 검사 를 누르면 뜨는 창을 잘 살펴보면 Console이라는 이름의 탭이 보일 겁니다. 이 콘솔을 이용하면 파일을 만들지 않고도 바로 Javascript 코드를 실행할 수 있습니다. 예를 들어서, 어떤 문자열(Hello, World!)의 길이를 알고 싶다고 해 봅시다. 이 때 바로 이 콘솔 창에서 다음과 같이 치고 엔터를 누르면 문자열의 길이를 현재 페이지에서 바로 경고창으로 출력할 수 있습니다. alert('Hello, World!'.length) 즉, 콘솔을 통해서 입력된 코드는 현재 페이지에서 즉석으로 실행되는 것입니다. Q. 콘솔을 어떻게 활용? 예를 들어서 여러분이 페이스북에 댓글을 남기는 이벤트를 개최 이 때 아주 ..

1) Javascript와 사용자의 상호작용, 이벤트(Event) Javascript에서는 다음과 같은 코드를 통해서 alert 창을 만들 수 있다. alert('hi') 그렇다면 이제, 사용자가 어떤 버튼을 눌렀을 때 이 alert 창이 뜨도록 만들어봅시다. 먼저 빈 화면에 버튼을 만들고, 이 버튼을 눌렀을 때 어떤 동작이 실행되도록 하는지 지정하는 속성인 onclick에 이 javascript 코드를 넣어보았따. onclick="alert('hi')" 은 1) 자바스크립트가 와야한다 2) 사용자가 클릭했을 때 자바스크립트 코드를 자바스크립트 문법에 따라 동작할 것입니다. 를 뜻함. 예시1 (2) html 소스코드 예시 2 (1) 웹 화면 (2) 소스코드 (html) 2) Onclick 속성 HTML ..

HTML과 Javascript Javascript는 HTML 위에서 동작하는 언어입니다. 그렇다면 어떻게 서로 다른 두 언어를 하나로 합칠 수 있는 것일까요? 이 때 바로 script 태그가 필요함 (앞선 게시물에서는 onclick="" 을 통해서 js 구현) Javascript 는 html 태그를 통해 구현 hello world 는 js 를 통해 구현 Q. 둘 차이의 차이점은 뭘까? 아래의 코드와 웹 화면을 보자 Javascript로 쓴 코드는 동적이라는 것이다. 1+1을 출력한다고 해 봅시다. 이 때는 HTML과 Javascript로 쓴 코드의 결과가 아래와 같이 달라진다. 즉, HTML로 쓴 코드는 정적이기 때문에 문자 그대로를 출력하지만, Javascript 코드는 동적으로 이를 계산할 수도 있다..

( 이 게시글은 부스트코스 [생활코딩 - 자바스크립트의 시작] 강의를 듣고 정리한 내용입니다) 1장. 웹과 Javascript 1)Web, Javascript, HTML HTML : 정적, 한 번 출력되면 그 모양이 바뀌지 않는다 사용자와 동적으로 상호작용하는 WEB을 만들기 위해서는? => Javascript 등장 즉, 정적인 정보인 HTML을 Javascript가 동적으로 만들어 주는 것 2) Javascript의 역할 : 사용자와 상호작용을 할 수 있도록 하는 것 아래의 웹 화면에서 버튼을 클릭해서 배경색/글자색 바꾸는 것은 javascript로 구현한 것이다. javascript 이용하여 배경색/글자색 바꾸기 여기에서 js 에 해당하는 코드는 onclick에 있는 document.querySele..