3일만에 끝내는 HTML, CSS, JS 기초

HTML5 벡터 그래픽 SVG (Scalable Vector Graphics) 는 가변형 벡터 그래픽인데, 웹용 그래픽으로 사용되며 W3C 의 추천 포맷입니다. HTML 태그는 HTML5 에서 등장하였는데 SVG 그래픽을 담기 위한 영역을 생성합니다. SVG 는 직선, 사각형, 원형, 문자 및 그래픽 이미지를 그리기 위한 몇가지 메소드를 가지고 있습니다. 크롬, 사파리, 파이어폭스 및 IE9 이상의 대부분의 브라우저에서 태그를 지원합니다. 브라우저가 인라인 벡터 그래픽 기능을 지원하지 않습니다. 인라인 벡터 그래픽 기능을 브라우저가 지원하지 않거나 웹사이트가 허용하지 않았습니다. 인라인 벡터 그래픽 기능을 브라우저가 지원하지 않거나 웹사이트가 허용하지 않았습니다. 인라인 벡터 그래픽 기능을 브라우저가 지..

HTML5 캔버스 그래픽 HTML 태그는 일반적으로 자바스크립트를 사용하여 간편하게 그래픽을 그리는데 사용됩니다. 태그는 단지 그래픽을 담는 그릇입니다. 실제로 그래픽을 그릴려면 스크립트를 사용해야 합니다. 캔버스는 선, 사각형, 원, 문자, 그리고 이미지를 그리기 위한 몇개의 메소드를 가지고 있습니다. 태그는 크롬, 사파리, 파이어폭스에서 완전하게 지원하며, 익스플로러 에서도 IE9 이상에서 완벽하게 지원합니다. 캔버스는 HTML 페이지상의 사각형 영역입니다. 기본 값으로 테두리선도 없고 내용도 없는 빈 사각형이 생성됩니다. 항상 id 속성을 지정해야하는데 스크립트에서 참조할 때 사용됩니다. 그리고 가로와 세로 속성으로 캔버스 사이즈를 지정합니다. 테두리는 스타일 속성을 사용하여 지정합니다. 귀하의 브..

HTML5 페이지 코딩 규칙 HTML5 표준을 잘 지킨 페이지를 하나 만들어 봅니다. HTML 에서 코딩할 때 종종 규칙이 불확실한 경우가 있습니다. 아래 예에서 HTML5 를 위한 코딩 규칙을 주석으로 입력하였습니다. HTML5 페이지 코딩 규칙 신출귀몰 오랑우탄의 하루 사는 곳 먹는 것 하는 것 섹션 : 오랑우탄 사는 곳 첫번째 아티클 : 오랑우탄 가족의 여행 이러저러한 곳에서 사는 오랑우탄 가족이... 밀림을 지나 커다란 호수에 다다랐는데... 이러저러한... 두번째 아티클 : 새로운 곳에 정착 호수에 빛친 달 빛이 그윽하여... 물맛에 또한번 반해서... 결국 눌러 살다 지금의 아시아 오랑우탄이 되었다... © 2016 ... All rights reserved. 여기에서 그리고 의 차이에 대해 ..

HTML5 태그 HTML5 Semantic 태그라는 용어는 낱말에서 의미를 유추할 수 있는 유의미의 태그라는 의미입니다. 반면 무의미 태그는 또는 처럼 낱말에 어떤 특정한 의미가 없이 여러가지 용도로 구역을 구분하기 위해 쓰는 타입이라고 볼 수 있습니다. 유의미 태그들은 단어 자체에 의미가 포함된 것으로 예를 들면 , , 및 같은 것도 포함되는데 그 태그안에 포함될 내용을 그 태그가 의미하고 있습니다. 크롬, 사파리, 파이어폭스, 익스플로러 등 대부분의 브라우저가 HTML5 의 유의미 태그를 지원합니다. HTML5 에서는 웹 페이지를 여러 영역으로 나누고 각각 새로운 유의미 태그들을 제안하였습니다. 그 전의 HTML4 까지는, 웹 개발자들은 자기 자신의 속성 이름을 태그내에 생성하고 스타일 페이지에 각자..

HTML5 개요 HTML5 는 HTML4 에서 개선된 마크업 언어인데, DOCTYPE 선언부터 매우 심플하게 바뀌었습니다. 기본 문자셋 인코딩이 HTML5 에서는 UTF-8 입니다. UTF-8 은 모든 언어를 표현할 수 있습니다. HTML5 는 대부분의 브라우저에서 지원합니다. Content of the document...... HTML5 에서는 새로운 태그들이 많이 등장하는데, HTML5 기본 뼈대 네이버 Google 여기 중간 제목 여기 소제목 여기 내용 여기 소제목 여기 내용 © 2016 ... All rights reserved. Con..

HTML 폼 태그 HTML 폼 태그에 대해 다룰텐데, 다만, 는 이전 장에서 다루었습니다. 이번 장에서는 그외의 폼 태그들에 대해 설명합니다. 태그는 드롭다운 목록을 만들어줍니다. 태그로 선택항목을 생성해 주는데, 일반적으로 맨 처음 항목이 보이게 됩니다. 그러나 selected 속성을 입력해 주면 해당 옵션이 보이게 됩니다. 은하 별 발리 섬 토성 행성 우주 정거장 은하 별 발리 섬 토성 행성 우주 정거장 태그는 텍스트 입력 영역을 만들어 주는데, 텍스트 줄바꿈이 가능한 입력 필드를 생성해 줍니다. 바다의 여인 / 사월과 오월 바닷가에서 우연히 만난사람 바닷가에서 추억을 맺은 사람 손잡고 해변을 단둘이 거닐며 파도 소 리 들으며 사랑을 약속 ... 바다의 여인 / 사월과 오월 바닷가에서 우연히 만난사람..

HTML 폼 개요 태그는 사용자로부터 데이터를 입력받기 위해 사용되는데, 태그는 HTML 의 형태를 정의하는 기능을 합니다. 이 폼 태그에는 여러가지 형태가 있는데, input 태그, 체크 박스, 라디오 버튼, submit 버튼 등이 있습니다. 태그는 가장 중요한 태그인데 태그는 형태 속성에 따라 종류가 많습니다. 텍스트를 입력 받는 경우에는 로 생성합니다. 그리고 Name 속성이 있어야만, 정상적으로 데이터가 전송되므로, 각 input 필드는 반드시 name 속성을 가져야 합니다. 텍스트 필드는 기본적으로 20 문자를 입력할 수 있는 공간을 가집니다. 가입동기를 입력하세요: 각오를 입력하세요: 가입동기를 입력하세요: 각오를 입력하세요: 라디오 버튼은 로 생성합니다. 라디오 버튼은 사용자가 제한된 개수 ..

XHTML 최근에는 브라우저 시장을 몇 개 회사가 점유하고 있는데 어떤 브라우저는 모바일 폰용으로도 배포되고 있습니다. 아래 예에서와 같이 HTML 태그들이 정확하게 작성되지 않은 경우에는, 대부분의 데스크탑용 브라우저에서는 잘 동작하지만, 모바일 폰에서는 종종 성능부족을 발생시키는 원인이 되기도 합니다. 본문 내용 4) XHTML 태그들은 태그들간에 열고 닫는 순서를 지켜야 합니다. 5) XHTML 태그들은 열었으면 꼭 닫아야 합니다. 6) XHTML 태그들은 반드시 소문자여야 합니다. 7) XHTML 태그의 속성이름 또한 소문자여야 합니다. 8) XHTML 태그의 속성값은 "" 쌍따옴표 안에 기입해야 합니다. HTML 문서를 XHTML 문서로 변환하는 순서는 아래와 같습니다. 먼저 XHTML 의 선언..

HTML 자바스크립트 자바스크립트는 HTML 페이지를 동적이면서 상호작용이 가능하도록 구현해 줍니다. HTML 태그 안에 자바스크립트와 같은 사용자 측 (client-side) 스크립트를 담을 수 있습니다. 태그는 그 안에 스크립트를 담을 수도 있고 아니면 외부의 스크립트를 src 속성을 사용하여 위치를 지정할 수도 있습니다. 일반적으로 자바스크립트는 이미지 조작, 입력값 검증, 및 내용의 동적인 변화를 줄때 사용됩니다. 예를 들어 HTML 태그의 id 가 id="id1" 이라고 할 때, 자바스크립트가 실행되면 그곳에 내용을 "안녕하세요. 방문해 주셔서 고맙습니다." 라고 바꾸려고 하면 아래와 같이 스크립트를 작성할 수 있습니다. 여기 클릭해 보세요. 여기에 글자가 바뀔 것입니다. 여기 클릭해 보세요. ..

HTML 색상 TV 및 computer 의 스크린은 세 가지 색상을 조합하여 표현합니다. 적색, 녹색, 청색. 이것은 빛의 삼원색인데, HTML 및 CSS 에서 사용되는 색상중 일부는 색상 이름으로도 설정할 수 있습니다. HTML 에서 RGB 색상 값은 다음 공식에 값을 입력하여 색상을 생성합니다. rgb(red, green, blue) 각 적, 녹, 청 칸에 0 에서 255 까지의 색상 밀도를 입력합니다. 예를 들면, rgb(255,0,0) 라고 하면 적색만 밀도가 있으므로 이는 적색을 의미합니다. 이렇게 하여 각 색상을 혼합하여 새로운 색을 만들수 있습니다. 무채색 즉 회색 계열이 되게 하려면 일반적으로 3가지 빛의 삼원색을 같은 값으로 하면 됩니다. 글자의 뒷 배경을 rgb(128,128,128)로..