개발 메모리

\n\nbody { background-color: lightyellow; }\np { color: red; text-decoration: underline; }"}],["code",{"code":".text-red {\n color: red;\n border: 1px solid #bcbcbc;\n padding: 10px;\n}\n\n.text-red button {\n color: inherit;\n}\n\n.text-red p {\n border: inherit;\n padding: inherit;\n}"}]],"markups":[["a",["href","https://meyerweb.com/eric/tools/css/reset"]],["a",["href","https://necolas.github..

CSS(Cascading Style Sheets)란? CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 스타일 시트 언어로, 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다. HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 하지만, CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다. CSS 기본 구조 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성된다. 선택자는 CSS를 적용하고자 하는 HTML 요소를 가리키며, 선언부는 하나 이상의 선언들을 세미콜론 ; 으로 구분하며 중괄호 { } 를 사용해 전체를 감싼다. 각 선언은 CS..

\n\nbody { background-color: lightyellow; }\np { color: red; text-decoration: underline; }"}],["code",{"code":"p { color: red; font-size: 14px; }"}],["code",{"code":"\n\n body { background-color: lightyellow; } p { color: red; text-decoration: underline; }

\n"}],["code",{"code":"\n\n\n\n\n"}],["code",{"code":"\n\n\n\n\n"}]],"markups":[["code"],["a",["href","http://www.tcpschool.com/html/intro"]],["a",["href","https://poiemaweb.com/"]]],"sections":[[1,"h2",[[0,[],0,"Iframe(inline frame) 요소"]]],[3,"ul",[[[0,[],0,"iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다."]]]],[10,0],[10,1],[1,"h3",[[0,[],0,"테두리 변경"]]],[3,"ul",[[[0,[],0,"iframe ..

HTML 레이아웃(Layout) 방법 과거에는 table 요소를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 의미(semantic) 요소나 div 요소를 사용하여 레이아웃을 구성한다. div 태그는 의미론적으로 의미가 없기 때문에 HTML5에서 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에 따라서 작동하지 않기 때문에 주의가 필요하다. 1. 의미요소를 이용한 레이아웃 HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공하는데 이를 의미(semantic) 요소라고 한다. Header 영역 Nav 영역 Section 영역 Footer 영역 2. 공간 분할 요소를 이용한 레이아웃 div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 ..

그래픽 SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다. Canvas 요소란? canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공한다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행하므로, 실제로 그래픽을 그리기 위해서는 JavaScript 등의 스크립트 언어를 이용해야 한다. canvas 요소의 속성 canvas 요소는 테두리도 콘텐츠도 없는 웹 페이지 내의 단순한 사각형의 공간으로, 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다. 스크립트(script)에서 canvas 요소에 접근하기 위해서는 해당 요소의 id 속성을 이용하면 된다. 이 문장은 사용자의 웹 브라우저가 canvas 요소를..

비디오(video) HTML5 이전에는 웹 페이지에서 비디오를 삽입하기 위해서는 플래시(flash) 같은 외부 플러그인에 의존해야 했지만 HTML5에서는 태그를 이용한 표준화된 방식을 제공한다. HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐이다. HTML5 video 요소 : 비디오와 영화 등 비디오 파일을 명시한다. 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 태그를 지원하지 않을 때만 화면에 표시된다. : 파일 형식에 따라 재생되지 않는 브라우저가 존재하지만 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시하며, 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의..

\n\n 오디오(audio) HTML5 이전에는 웹 페이지에서 오디오를 삽입하기 위해서는 플래시(flash) 같은 외부 플러그인에 의존해야 했지만 HTML5에서는 태그를 이용한 표준화된 방식을 제공한다. HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐이다. HTML5 audio 요소 : 오디오와 음악 등 오디오 파일을 명시한다. 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 태그를 지원하지 않을 때만 화면에 표시된다. : 파일 형식에 따라 재생되지 않는 브라우저가 존재하지만 source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시하며, source 태그 중 위쪽에서부터 순..

이미지 맵(image map) 만들기 이미지 맵이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능이다. 태그의 usemap 속성을 태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정된다. 태그는 버튼 역할을 하는 태그를 하나 이상 가진다. Reference http://www.tcpschool.com/ https://poiemaweb.com/

\n"}],["code",{"code":"\n 멀티미디어 파일 형식 HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리했지만, HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었다. 웹 브라우저는 파일의 타입을 파일의 확장자로 판단하며, 비디오나 사운드와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장된다. HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV이고 오디오 파일 형식은 MP3, WAV, Ogg 뿐이다. 플러그인(Plug-in) HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미하며, 이러한 플러그인은 object 요소나 embed 요..