본문 바로가기

HTML6

HTML / DOM요소는 어떻게 만들어지나 사용자는 웹페이지를 보기위해 HTML파일을 다운받아야하며 다운받은 HTML은 브라우저가 위에서부터 순차적으로 파싱한다. 파싱이 완료된 코드들은 DOM요소로 변환된다. 2020. 12. 25.
HTML / 스크립트 태그 작성 방법 HTML에 스크립트 태그를 작성하는 방법은 크게 4가지가 있다. 헤드태그안에 스크립트 태그 작성 헤드태그 안에 스크립트 작성 시 defer 추가 헤드태그 안에 스크립트 작성 시 async 추가 바디태그안의 가장 아래에 스크립트 작성 헤드태그안에 스크립트 태그 작성 위와 같이 스크립트 태그를 헤드태그안에 작성할 경우 브라우저가 순차적으로 HTML파일을 파싱하다 스크립트 태그를 만나면 파싱을 멈추고 스크립트파일을 서버로부터 다운받고 실행한 후 파싱을 이어간다. 이로인해 야기되는 문제점은 바디태그를 파싱하여 만들어진 DOM요소로 스크립트를 실행하는 .js파일이 존재하지 않는 바디의 DOM요소에 접근하려 하기 때문에 스크립트태그는 오류가 발생한다. 헤드태그 안에 스크립트 작성 시 defer 추가 헤드태그 내부에.. 2020. 12. 25.
H4. 미디어 삽입, 웹폼 1.미디어 삽입 HTML5 이전까지는 미디어를 재생하기 위해 브라우저에 적절한 플러그인 소프트웨어가 필요했다. 이것은 비표준 형식 데이터 때문인데 이러한 비표준형식 데이터로 만들어진 비표준 미디어을 포함하는 웹페이지는 브라우저에 따라 재생되지 않는 문제점이 있었다. 그래서 HTML5에서는 플러그인 없이 미디어를 재생할 수 있도록 미디어에 속하는 오디오와 비디오에 관한 태그를 표준화하였다. 물론 플래시 애니메이션과 같은 표준화하지 않은 미디어를 재생하기 위해서는 현재도 여전히 플로그인이 필요하다. 이런경우 다음과 같은 태그가 필요하다., 1-1. 비디오 삽입 태그에 의해 브라우저에는 320x240픽셀 크기의 공간이 할당되고 이곳에 비디오가 재생된다. autoplay속성에 의해 비디오는 바로 재생되며, co.. 2020. 3. 6.
H3. 표, 하이퍼링크, 앵커, 파일다운로드 링크, 인라인프레임 1.표만들기 (태그) 개발자에게 있어서 가장 중요한 태그는 대표적으로 무엇이 있을까요? 물론 웹페이지를 구성하는 모든 태그들이 개발자에게 중요하지만 그 중에서도 핵심이 되는 태그는 태그와 태그입니다. 표는 정형표와 비정형표로 나뉘며 특히 비정형표는 개발자가 어떻게 쓰느냐에 따라 다양한 형태를 갖춥니다. ▶표를구성하는 태그 : 표 전체를 담는 컨테이너 : 표 제목 : 헤딩 셀 그룹 : 바닥 셀 그룹 : 데이터 셀 그룹 : 행. 여러개의 , 포함 : 제목(헤딩) 셀 : 데이터 셀 ▶예시 (정형표) ▲코딩 ▲출력 결과 ▶예시 (비정형표)▲코딩위 이미지는 태그에 rowspan속성을 주어 열을 합친것이다. colspan은 행을 합치는 속성이다. ▲출력 결과 ※참고표를 만들때 , , , 태그를 사용하지 않고 만 표.. 2020. 3. 5.
H2. HTML의 기본 태그 살펴보기! 1.HTML 필수 태그 , 로 둘러싼 부분은 문서의 제목, 본문을 설명하는 메타 태그들, 자바스크립트 코드와 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다. ▶태그 또한 필수 태그는 아니며 메타데이터의 태그이다. 웹페이지의 저작자, 문자 인코딩 방식, 문서 내용 등 다양한 메타 데이터를 표현하기 위해 사용된다. 이 태그는 name과 content 속성을 쌍으로 구성한다. 인코딩 방식을 지정할때는 charset속성을 사용한다. ▶HTML 페이지의 타이틀은 페이지의 제목으로, 브라우저의 타이틀 바에 출력된다. 타이틀은 태그를 이용하며 내에서만 작성된다. ▶문서의 본문이다. 이곳은 자바스크립트 코드를 포함할 수 있다. 헤드와 바디 사이에는 아무것도 들어갈 수 없다. ※짚고 넘어가기▷주석문은 .. 2020. 3. 5.
H1. HTML과 CSS, J.S를 맛보기로 살짝 활용해 간략한 자기 소개 페이지 만들기! 1-1 HTML 베이스 코딩 ▶HTML의 베이스 태그들과, 속성, 값을 코딩한다. 1-2 CSS문서 모양 코딩 추가 태그 추가▶태그안에 태그를 주어 내가 디자인하려는 를 포함한 내의 태그들에 자신의 개성에 맞추어 스타일 코딩한다.▶HTML 문서 모양을 꾸미는 방법은 크게 3가지로 다음과 같다. ①스타일시트를 활용 ②태그 내에 코딩 ③태그 내에 코딩 ※ 참고 1)제목 태그 : 제목을 표시하는 태그로 h1~h6까지 사용할 수 있으며 h1이 가장 크다. .... 2)본문 태그 ... : 단락을 만드는 태그 : 줄 바꾸기 : 수평선을 긋는 태그 ... : 인용문을 넣는 태그 : 글자, 글꼴, 줄 바꿈을 입력한 그대로 출력하는 태그 3)태그 내의 속성 background-color : 배경색 color : 글자색.. 2020. 3. 4.