HTML5와 CSS3 사용의 장점 구분 설명 웹 개발의 플랫폼 의미가 더 분명한 태그들, 사이트나 창 사이의 더 나은 데이터 교환, 애니메이션, 더 나은 멀티미디어 지원 등, 더 좋은 사용자 인터페이스 구현 가능 더 분명한 마크업 내용을 설명하는데 직접 연관된 요소 추가 (제목, 푸터, 내비게이션 절, 사이드바, 글을 정의하는 요소들) 플러그인에 덜 의존하는 멀티미디어 오디오, 비디오 기능 제공 웹 소켓 HTML5는 서버와의 연결을 유지시키는 웹 소켓을 지원 클라이언트 측 스토리지 웹 스토리지와 웹 SQL 데이터베이스 API를 이용하면 브라우저에서 동작하긴 하지만 모든 데이터를 사용자의 컴퓨터에 보관하는 애플리케이션을 만들 수 있음. 더 좋은 인터페이스 테이블에 스타일을 적용하거나, 둥근 모서리를 만드는..

02.html-실행위치(head태그) 1) 실행위치(body태그) 2) 실행위치(head태그) 실행파일을 외부 파일에 명시하고 링크하기 File Info 02.html script.js 소스 코드 - 02.html 소스 코드 - script.js document.write('script.js에 있는 코드 실행'); 출력결과

01.html-실행위치(body태그) 1) 실행위치(body태그) 2) 실행위치(head태그) 소스 코드 출력결과

자바스크립트 변수관련 강의 맵 - ch01-variable, 자바스크립트 변수

[WebStorm] 디버깅 하기 웹스톰에서는 디버깅하는 기본적인 기능을 제공합니다. 브레이크 포인트를 지정할 라인의 맨앞쪽의 회색 공간을 마우스로 클릭하면 빨간색 원으로 해당 라인이 브레이크 포인트가 걸린 자리라는 것을 표시해 줍니다. Run > Debug 디버깅 시작! index.html 클릭 실행 중 자바스크립트의 브레이크 포인트 구문에서 멈춥니다. 하단에 Debug 정보 창이 오픈됩니다. Debug정보 창의 우측 상단에 Step Over, Step Into, Force Step Into, Step Out, Run to Cursor명령을 수행하여 단계적으로 실행시켜 변수값을 확인하며 추적할 수 있습니다. Step Into클릭 후 화면

[WebStorm] JetBrain extension for Chrome 설치 Chrome브라우저에서 디버깅을 수행할 경우 Run > Edit Configurations...실행해 Browser를 Chrome으로 설정합니다. Apply > OK 디버깅을 위한 Chrome 확장기능 설치에 대한 안내메시지가 맨 아래에 나타납니다. 하단의 메시지 줄을 클릭하여 Event Log창을 오픈합니다. JetBrains IDE Support링크 클릭 Chrome 브라우저가 자동으로 열리면서 디버깅할 수 있는 Chrome의 확장기능 Tool을 설치할 수 있는 링크를 오픈 합니다. 무료 버튼클릭 추가 클릭 설치 완료!