초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분의 로직은 주로 웹 서버에서 실행되었고 브라우저는 서버로부터 전달받은 HTML, CSS를 랜더링하는 수준이었다. ※ 랜더링 HTML, CSS, JavaScript로 작성된 문서를 해석해서 브라우저에서 시각적으로 출력하는 것 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정은 Server Side Rendering (SSR)이라 한다. Ajax 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 등장 이전 웹페이지는 웹페이지 전체를 랜더링하는 방식으로 동작하여 화면이 전환되면 새로운 HTML 문서를 전송받아 웹페이지 전체를 처음부터 다..

자바스크립트 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어 HTML → 웹사이트 구조 CSS → 디자인 자바스크립트 활용 범위 Iot, 하이브리드앱, 서버 개발 등 자바스크립트 변수 변수 안의 데이터 확인 방법 var fruit = "apple" console.log(fruit); console.log()는 콘솔에서 변수값을 출력한다. ※ 브라우저에서 F12 (개발자 검사) - console탭 선택하면 웹 브라우저에서 값을 볼 수 있다. 변수값을 웹 화면에 출력하는 방법 var num = 1; document.write(num); document.write()는 웹 화면에 변수값을 출력한다. 자바스크립트 사용 방법 태그 안에 src 속성값으로 js..

반응형 웹 디자인 화면의 크기에 따라 웹 페이지 요소들이 반응해서 최적화된 모양으로 바뀌는 디자인 @media(조건){실행문} ex) @media(min-width:800px){ div{display : none;}} → 화면 크기가 최소 800px이면 div 태그는 사라진다.

그리드를 사용하기 위해서는 태그들을 그룹화할 필요가 있다. 그리드 속성 display : grid grid-template-rows: grid-template-colulmns:

html 태그에는 block element, inline element가 있다. block element : 화면 전체 공간 사용 inline element : 자기 자신 크기 공간 사용 html 태그의 부피감을 결정하는 css 문법 폭 width 높이 height 테두리 border 컨텐츠와 테두리 사이 padding 박스 간 간격 margin

Cascading Style Sheets의 약어로 마크업 언어로 쓰여진 문서의 외형을 만드는데 사용되는 언어이다. 웹 브라우저에게 html 문법으로 css 문법으로 해석하라고 알려줄 필요가 있다. : style 태그 안쪽 내용은 css 문법으로 해석하고 처리 → 웹 페이지 꾸미는 내용은 style 태그로 한정 CSS 구성 요소 선택자 selector : 스타일 입힐 대상을 결정 선언 declaration : 속성 : 값 속성 property : 어떻게 꾸밀지 결정 값 value : 값을 통해 구체화 ex) a { color:green} → a 태그 모든 글자색 초록색으로 변경 (css 코드로 중복 제거 가능) declaration을 구분자 ;를 사용하여 구분한다 CSS 문법 css 언어를 사용하는 방식에..