CodeLab - 시멘틱 태그 01.html sematic 시멘틱 태그 표현을 위한 태그 소스코드 출력결과 sematic 무의미한 태그가 아니라 '의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻 시멘틱 태그 태그 설명 header 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨 hgroup 제목과 부제목을 묶는 역할 nav 사이트나 메뉴나 링크 같은 내비게이션 요소들이 포함 section 실제 문서 내용이 들어감 article 문서 내용이 많을 경우 여러 개의 요소로 나눌 수 있음 aside 문서의 주요 내용 외의 내용들을 넣어 문서의 주 영역 주변에 배치 footer 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음 표현을 위한 태그 태그 설..

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을 설치할 수 있는 링크를 오픈 합니다. 무료 버튼클릭 추가 클릭 설치 완료!