Front-End/HTML

6-2. HTML 확장(XHTML)

1. XHTML(EXtensible HTML) XHTML은 EXtensible HTML을 의미합니다. XHTML은 HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있습니다. 1-1. 좀 더 엄격한 버전인 XHTML을 사용하는 이유 오늘날 웹 콘텐츠는 기존의 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있습니다. 따라서 부정확한 HTML 문법을 지원하는 데 필요한 자원이 부족한 환경이 점차 생겨나기 시작합니다. XHTML 문서는 하나의 XML 문서로서 문법적으로 정확하므로, 표준 XML 라이브러리를 이용한 자동화된 처리가 가능해집니다. 2. XHTML에서의 변경 사항 2-1. 문서의 구조적 측면 XHTML DOCTYPE을 반드시 명시해야 합니다. 태그의 ..

6-1. HTML 확장(JavaScript)

1. 자바스크립트란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다. 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다. 1-1. script 요소 script 요소는 해당 웹 페이지에 사용할 스크립트(script)를 정의하기 위해 사용합니다. script 요소 내부에 직접 스크립트를 작성하거나, 외부 스크립트 파일의 주소를 src 속성값으로 명시하면 됩니다. 1-2. ..

6. HTML 확장(CSS)

1. CSS란? CSS란 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다. 2. CSS 적용 방법 HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다. 인라인 스타일(Inline style) 내부 스타일 시트(Internal style sheet) 외부 스타일 시트(External style sheet) 2-1. 인라인 스타일(Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 C..

5. HTML 입력 양식

1. Form 요소 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다. form 요소는 다음과 같은 문법으로 사용합니다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시합니다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시합니다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다. 1-1. method 속성 method 속성을 통해 명시할 수 있는 form 요소의 전달..

4. HTML 공간 분할

1. HTML 요소의 타입 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 블록(block) 인라인(inline) 2. 블록(block) 타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. p요소는 display 속성값이 블록인 요소입니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 2-1. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다. 요소는 주로..

3. HTML 기본 요소

1.HTML 스타일(Style) HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있습니다. 하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있습니다. 1-1. 배경색 변경 다음 예제는 style 속성을 이용하여 배경색을 변경하는 예제입니다. style 속성을 이용한 배경색 변경 1-2. 글자색 변경 다음 예제는 style 속성을 이용하여 글자색을 변경하는 예제입니다. style 속성을 이용한 글자색 변경 1-3. 글자 크기 변경 다음 예제는 style 속성을 이용하여 글자색을 변경하는 예제입니다. style 속성을 이용한 글자 크기 변경 1-4. 문단 정렬 변경 다음 예제는 style 속성을..

2. HTML 텍스트 요소

1. 제목(Heading) HTML은 제목을 표현할 수 있는 다양한 크기의 태그를 제공합니다. 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있습니다. 제목1의 크기입니다! 제목2의 크기입니다! 제목3의 크기입니다! 제목4의 크기입니다! 제목5의 크기입니다! 제목6의 크기입니다! 태그의 위아래로는 약간의 여백이 자동으로 삽입됩니다. 이런 태그는 제목의 표현이라는 기능 외에도 또 다른 중요한 역할을 하고 있습니다. 여러 검색엔진은 각 웹 사이트의 내용을 바로 이 태그를 이용하여 키워드를 수집하고, 그 내용을 파악합니다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있습니다. HTML 문서의 제목에 해당하는 부분을 태그나 태그..

1. HTML 소개

1. HTML 개요 HTML은 웹 페이지를 만드는 데 사용하는 언어이며 매우 쉽게 배울 수 있습니다. 모든 태그는 미리 정의되어 있으며, 각각의 태그와 속성을 사용하기만 하면 됩니다. 2. HTML 기초 HTML은 HyperText Markup Language의 약자입니다. 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는 데 사용됩니다. 예제 제목 1 제목 2 제목 3 단락 1 단락 2 2-1. HTML 태그(tag) HTML 태그는 태그 이름을 꺾쇠 괄호()로 감싸서 표현합니다. // 시작 태그 // 종료 태그 HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, cl..