230920 프론트엔드 웹개발 3주차

주제 : HTML 복습

 

1. 기본문서 만들기

• 표를 만드는 코드 : <table>
  • <table> : 표 전체를 담는 컨테이너
  • <caption> : 표 제목, <table>에 반드시 첫번째로 삽입
  • <thead> : 헤딩 셀 그룹
  • <tfoot> : 바닥 셀 그룹
  • <tbody> : 데이터 셀 그룹
  • <tr> : 행. 여러 <td>, <th> 포함
  • <th> : 열 제목(헤딩) 셀
  • <td> : 데이터 셀
• 하이퍼링크를 넣는 코드 : <a>
  • 같은 웹 사이트에 있는 웹 페이지 연결

<a href=“picturepage.html”>클릭하면 사진 페이지로 이동합니다.</a>

• 다른 웹 사이트의 웹 페이지 연결

<a href=“http://www.naver.com”>네이버</a>

• 이미지 하이퍼링크 만들기

<a href=“http://www.naver.com”>
	<img src=“naver.png” alt=“네이버사이트”>
</a>

• 하이퍼링크 텍스트의 색
  • 링크 텍스트(standard link) 처음 색 – 밑줄과 함께 blue
  • 방문 후 링크(visited lnk) 색 – purple
  • 마우스로 링크를 누르고 있는 동안(active link) – red
• 페이지 내 하이퍼링크 : HTML 페이지 내의 특정 위치, <a id="앵커이름">

• 인라인 프레임 만드는 코드 : <iframe>
  • <iframe> target 속성 – 링크 클릭 시 타겟된 이름의 프레임에 특정 사이트 출력
    • target 속성 명령어 종류 : _blank(새 윈도우 탭), _self(현재 윈도우), _parent(부모 윈도우), _top(모든 프레임 윈도우 제거 및 브라우저 윈도우에 출력)
• 미디어를 삽입하는 코드 : <audio>, <video>

2. 웹프로그래밍의 개요

• 자바스크립트의 특징
  • 모든 웹 브라우저에서 작동한다.
  • 실행 결과를 즉시 확인할 수 있다.
  • 웹개발 뿐만 아니라 다양한 용도의 프로그램을 만들 수 있다.
  • 다양한 자바스크립트 공개 API를 사용할 수 있다.
  • 다양한 라이브러리와 프레임워크를 사용할 수 있다.
• 크롬 브라우저에서 프로그램 소스 확인하기
  • 프로그램 소스에서 크롬 브라우저의 ‘검사’ 기능
  • ‘개발자 도구’ 화면의 Elements탭이 나타남
  • <script> 태그를 찾아 왼쪽에 있는 ‘▶’를 누르면 작성한 소스를 확인할 수 있음 
• 크롬 브라우저의 콘솔도구 기능
  • 사용자 입력값 받기 : prompt();
    
  • 알림창으로 출력하기 : alert();
    
  • 웹브라우저 화면에 출력하기 : document.write(); (괄호안의 내용을 크롬 브라우저 화면에 표시하는 역할, 줄바꿈은 shift + enter)
    • ex) > var name = prompt("이름: ");    
               document.write(name);
  • 콘솔에 출력하기 : console.log(); (괄호안의 내용을 콘솔 창에 출력)
    
    • ex) > var name = prompt(“이름: “);    
               console.log(name);
  • 크롬 브라우저 콘솔로 오류 찾아내기
    1. VC코드로 작성한 자바스크립트 소스를 크롬 브라우저에서 실행하면 실행되지 않거나 원하지 않는 결과가 나오는 경우 콘솔에서 오류를 찾아내는 방법
    2. 만일 오류가 발생되어 프로그램이 제대로 실행되지 않는 경우 ‘Ctrl + Shif + J’를 눌러 콘솔창을 연다.
       
    3. 콘솔창에 빨간색 글자로 오류내용이 표시된다.
       
    4. 오류 내용을 잘 모를때 오류내용 오른쪽에 표시된 파일 이름과 오류가 발생한 줄번호(jes.html:16)를 누른다.
       
    5. 오류가 발생된 파일(jes.html)의 소스 위치(16)로 바로 이동된다.