티스토리

아라 메모장

검색하기

블로그 홈

아라 메모장

arajo.tistory.com/m

arajo 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

[HTML] 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그 웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다. 공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이다. tag Description header 헤더를 의미한다 nav 내비게이션을 의미한다 aside 사이드에 위치하는 공간을 의미한다 section 본문의 여러 내용(article)을 포함하는 공간을 의미한다 article 분문의 주내용이 들어가는 공간을 의미한다 footer 푸터를 의.. 공감수 0 댓글수 0 2022. 11. 13.
[HTML] form form form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다. ... form elements (input, checkbox, radio button, submit button...) ... attribute Value Description action URL 입력 데이터(form data)가 전송될 URL 지정 method get / post 입력 데이터(form data) 전달 방식 지정 GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라.. 공감수 0 댓글수 0 2022. 11. 13.
[HTML] img, audio, video 이미지 웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다. attribute Description src 이미지 파일 경로 alt 이미지 파일이 없을 경우 표시되는 문장 width 이미지의 너비 (CSS에서 지정하는 것이 일반적) height 이미지의 높이 (CSS에서 지정하는 것이 일반적) 미디어 audio audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다. attribute Description src 음악 파일 경로 preload 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay 음악 파일을 자동의 재생 개시할 것인지 지정 loop 음악을 반복할 것인지 지정 controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 .. 공감수 0 댓글수 0 2022. 11. 13.
[HTML] ul, ol, li, table 목록(List) 순서없는 목록(Unordered List) ● 생김 순서없는 목록 (Unordered List) Coffee Tea Milk 순서있는 목록(Ordered List) 숫자, 알파벳 등등의 문자가 오름차순으로 생김 순서있는 목록 (Ordered List) Coffee Tea Milk type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다. Value Description “1” 숫자 (기본값) “A” 대문자 알파벳 “a” 소문자 알파벳 “I” 대문자 로마숫자 “i” 소문자 로마숫자 Coffee Tea Milk start 어트리뷰트로 리스트의 시작값을 지정할 수 있다. Coffee Tea Milk reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다. Coffe.. 공감수 0 댓글수 0 2022. 11. 13.
[HTML] Hyperlink HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다. Visit google.com! href 어트리뷰트 href(hyper reference의 약자로 '하이퍼 참조'를 의미한다.) 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를.. 공감수 0 댓글수 0 2022. 11. 13.
[HTML] 텍스트 관련 태그 제목이나 본문, 글자의 형태와 중요도를 나타내는 텍스트에 관련된 태그들 제목 (Headings) 태그 Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다. 시멘틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 글자 형태 (Text Formatting) 태그 b bold체를 지정한다. 제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없다. This text is normal. This text is bold. This te.. 공감수 0 댓글수 0 2022. 11. 12.
[HTML] 웹페이지 구성하는 기본 태그 문서 형식 정의 tag 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같다. html tag html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야한다. 단는 예외이다. 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. html은 글로벌 어트리뷰트를 지원한다. 특히 lang 어트리뷰트를 사용하는 경우가 많다. 다음은 한국어를 주언어로 사용하는 경우의 예이다. head tag head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 .. 공감수 0 댓글수 0 2022. 11. 12.
[HTML] 시맨틱 웹(Semantic Web) 대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google이나 Naver와 같은 검색사이트를 이용한다. “나는 검색된다. 고로 존재한다”는 말이 있을 정도로 웹사이트는 검색엔진에의 노출이 매우 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. 검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다. SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이.. 공감수 0 댓글수 0 2022. 11. 12.
[HTML] HTML 기본 문법 HTML5 HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다. HTML5 는 2014년 10월 28일 확정된 차세대 웹 표준으로 아래와 같은 기능들이 추가되었다. 멀티미디어(Multimedia) : 플래시와 같은 플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원한다. 그래픽(Graphics & Effects) : SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다. 통신(Connectivity) : 지금까지의 HTML은 단방향 통신만이 가능하였으나 HT.. 공감수 0 댓글수 0 2022. 11. 12.
[HTML] SVG svg 요소 svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다. 따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다. 사각형 그리기 다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제이다. 이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다! 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다. 속성 설명 width 도형의 너비를 설정함. hei.. 공감수 1 댓글수 1 2022. 9. 23.
[HTML] Canvas canvas 요소는 웹 페이지에 그래픽을 그려주는 방법을 제공한다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행한다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 한다. canvas 요소의 속성 canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간이다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다. canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 된다. 이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타난다. CSS 좌표 체계 HTML 그래픽 요소에서 사용하는.. 공감수 0 댓글수 1 2022. 9. 23.
[HTML] Canvas vs SVG Canvas vs SVG canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소이다. 어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있다. 작업 환경에 따른 선택의 기준 다음 그림은 화면 크기 및 픽셀 수에 따른 렌더링 시간(rendering time)을 보여준다. 렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킨다. 따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미한다. canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋다. svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우( 공감수 0 댓글수 0 2022. 9. 22.
[HTML] Server Sent Events API Server Sent Events API server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정한다. server sent events 지원 여부 확인 server sent events를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다. if (typeof(EventSource) !== "undefined") { // server sent events를 위한 코드 부분 } else { // server sent events를 지원하지 않는 브라우저를 위한 안내 부분 } 다음 예제는 server sent events를 이용해 3초마다 웹 페이지를 갱신하는 예제이다. server sent events를 이용한 자동 .. 공감수 0 댓글수 0 2022. 9. 21.
[HTML] web worker API web worker API 웹 페이지에서 스크립트가 실행되면, 해당 웹 페이지는 실행 중인 스크립트가 종료될 때까지 응답 불가 상태가 된다. web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트이다. 즉, web worker는 스크립트의 다중 스레드(multi-thread)를 지원한다. 따라서 사용자가 웹 페이지를 이용하면서도, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해준다. web worker 지원 여부 확인 web worker를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다. if (typeof(Worker) !== "undefined") { // web worker를 위한 .. 공감수 1 댓글수 0 2022. 9. 21.
[HTML] Application Cache API application cache API application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해준다. 따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있다. application cache를 사용해서 생기는 장점은 다음과 같다. 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있다. 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있다. 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 된다. cache mainfest 기본 사항 애플리케이션 캐시를 활성화하려면 문서의 태그에 매니페스트 속.. 공감수 0 댓글수 0 2022. 9. 21.
[HTML] Web Storage API 웹 스토리지(web storage) API 웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해준다. HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키(cookie)라는 곳에 그 정보를 저장한다. 하지만 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해준다. 웹 스토리지는 최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않는다. 이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재한다. 오리진(origin)이란 도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자이다. 따라서 하나의 오리진에 속하는 .. 공감수 2 댓글수 2 2022. 9. 21.
[HTML] Drag and Drop 드래그 앤 드롭(drag and drop) API 드래그 앤 드롭 API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그할 수 있도록 설정해준다. HTML5 이전에 이와 같은 기능을 구현하기 위해서는 엄청나게 많고 복잡한 스크립트를 작성해야 했다. 하지만 HTML5에서는 드래그 앤 드롭(drag and drop) 기능이 표준 권고안에 포함되어 간단하게 사용할 수 있게 되었다. 현재 주요 웹 브라우저들은 모두 이 기능을 지원하며, 따라서 웹 페이지 내의 모든 요소는 드래그될 수 있다. 드래그 앤 드롭 이벤트 마우스로 객체(object)를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 된다. 다음 표는 드래그 앤 드롭시 일어나는 이벤트를 순서대로 보여준다. 이벤트 설명 dragstart .. 공감수 0 댓글수 0 2022. 9. 21.
[HTML] Geolocation HTML5 API HTML5에서 새롭게 추가된 API는 모두 자바스크립트로 구현되어 있다. geolocation API geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API다. 사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송된다. 이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있다. 하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있다. getCurrentPosition() 메소드 getCurrentPosition() 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있다. 이 메소드의 첫 번째.. 공감수 0 댓글수 0 2022. 9. 21.
[HTML] 플러그인(Plug-in) 플러그인(Plug-in) HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미한다. 가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등이 있다. 이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가할 수 있다. object 요소 object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용한다. 이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입할 수도 있다. 또한, object 요소는 이미지를 삽입할 때에도 사용할 수 있다. embed 요소 embed 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용한다. embed 요소는 .. 공감수 1 댓글수 1 2022. 9. 21.
[HTML] 오디오(audio) 오디오(audio) 요소 HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안이 없었다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했다. 하지만 HTML5에서는 태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공한다. 오디오 요소의 속성 이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타난다. control 속성은 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다. 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용한다. 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 태그를 지원하지 않을 .. 공감수 1 댓글수 1 2022. 9. 21.
[HTML] 비디오(video) 비디오(video) 요소 HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했다. 하지만 HTML5에서는 태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공한다. 이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타난다. control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성한다. 또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있다. 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소.. 공감수 1 댓글수 1 2022. 9. 21.
[HTML] 멀티미디어 파일 형식(video, audio) 멀티미디어 파일 형식 HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔다. 하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었다. 웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단한다. 만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것이다. 비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장된다. 이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있다. 비디오(video) 파일 형식 대표적인 비디오 파일 형식은 다음과 같다. 파일 형식 파일 확장자 설명 MPEG .m.. 공감수 0 댓글수 0 2022. 9. 21.
[HTML] HTML input 요소의 속성 input 요소의 속성 input 요소는 다양한 속성을 가질 수 있다. HTML에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같다. value readonly disabled maxlength size HTML5 form 요소의 속성 HTML5에서 새롭게 추가된 form 요소의 속성은 다음과 같다. autocomplete novalidate HTML5 input 요소의 속성 HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같다. autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern pl.. 공감수 1 댓글수 1 2022. 9. 21.
[HTML] Input 요소의 타입 form 요소는 다양한 타입의 input 요소를 포함할 수 있다. HTML에서 자주 사용되는 input 요소의 대표적인 타입은 다음과 같다. text password submit radio button checkbox button HTML5에서 추가된 input 요소의 타입 HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다. 숫자 입력(number) 입력 범위 지정(range) 색상 입력(color) 날짜 입력(date) 시간 입력(time) 날짜와 시간 입력(datetime-local) 연도와 월 입력(month) 연도와 주 입력(week) 이메일 입력(email) URL 주소 입력(url) 전화번호 입력(tel) 검색어 입력(search) 숫자 입력(number) 태그의 type 속성.. 공감수 0 댓글수 0 2022. 9. 21.
[HTML] Input 요소 HTML에서는 다양한 타입의 input 요소를 이용하여 사용자로부터 입력을 받을 수 있다. 대표적인 HTML input 요소는 다음과 같다. 텍스트 입력 비밀번호 입력 라디오 버튼 체크박스(check box) 파일 선택 박스 선택(select) 입력(drop-down 리스트) 문장 입력 버튼(button) 입력 전송 버튼(submit) 필드셋(fieldset) HTML5에서 추가된 다양한 타입의 input 요소 HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같다. datalist 요소 keygen 요소 output 요소 datalist 요소 datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소이다. 사용자는 텍스트를 바로 입력해도 되고, 드롭다운.. 공감수 0 댓글수 0 2022. 9. 19.
[HTML] semantic element 의미 요소(semantic element) 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킨다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있다. 하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있다. HTML5에서 추가된 의미 요소 HTML5에서 새롭게 추가된 대표적인 의미 요소는 다음과 같다. header 요소 nav 요소 main 요소 section 요소 article 요소 figure와 figca.. 공감수 0 댓글수 0 2022. 9. 19.
[HTML] HTML5 HTML5 개요 HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다. HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준이다. HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처한다. 따라서 다음과 같은 사항들을 모두 문법적으로 허용한다. 태그 이름에 대문자 사용 속성값에 따옴표 생략 속성값 생략 빈 태그의 종료 태그(/) 생략 HTML5 문서의 기본 구조 HTML5에서는 DOCTYPE 선언이 매우 간단해졌다. 또한, 문자셋(character set)의 선언도 매우 간단해졌다. HTML5에서의 기본 문자 인코딩(character encoding) 방식은 UTF-8이다. HTML5 변경사항 H.. 공감수 0 댓글수 0 2022. 9. 18.
[HTML] HTML과 XHTML XHTML(EXtensible HTML) XHTML은 EXtensible HTML을 의미한다. XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있다. 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있다. 따라서 부정확한 HTML 문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 시작한다. XHTML 문서는 하나의 XML 문서로서 문법적으로 정확하므로, 표준 XML 라이브러리를 이용한 자동화된 처리가 가능해진다. XHTML에서의 변경 사항 문서의 구조적 측면 XHTML DOCTYPE을 반드시 명시해야 한다. 태그의 xmlns 속성을 반드시 명시해야 한다. , , , 태그를 반드시 사용해야 한다. 문서의 요소적 측.. 공감수 0 댓글수 0 2022. 9. 18.
[HTML] HTML과 JavaScript 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다. 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다. script 요소 script 요소는 해당 웹 페이지에 사용할 스크립트(script)를 정의하기 위해 사용한다. script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시하면 된다. noscript 요소 noscript 요소는 스크립트를 지원하.. 공감수 0 댓글수 0 2022. 9. 18.
[HTML] HTML과 CSS CSS란 Cascading Style Sheets의 약자이다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다. HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다. 인라인 스타일(Inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 인라인 스타일(Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다. 인라인 스타일을 이용하여 스.. 공감수 0 댓글수 0 2022. 9. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.