스타일 시트는 HTML 문서가 화면에 어떻게 표시될지를 정의하는 데 사용됩니다. CSS를 활용하면 HTML 요소에 다양한 스타일 속성을 손쉽게 지정할 수 있습니다. 각 속성은 이름과 값으로 구성되며, 두 항목은 콜론(:)으로 구분됩니다.CSS를 적용하는 세 가지 방법HTML 문서에서 CSS를 사용하는 방법은 크게 세 가지로 나눌 수 있습니다.외부 스타일 시트(External Style Sheet) − 별도의 .css 파일에 스타일 규칙을 작성한 뒤, HTML <link> 태그를 사용해 해당 파일을 문서에 연결하
HTML에서는 <h1>부터 <h6>까지 총 6개의 제목(헤딩) 태그를 사용할 수 있습니다. 제목의 정렬을 설정하려면 style 속성을 사용해야 합니다. style 속성은 특정 요소에 인라인 스타일을 직접 지정하는 역할을 하며, HTML 제목 태그와 함께 CSS의 text-align 속성을 조합하여 사용합니다.특히 주의할 점은 HTML5에서는 제목 태그의 align 속성을 더 이상 지원하지 않는다는 것입니다. 따라서 과거 방식인 align 속성 대신 반드시 CSS 스타일을 통해 텍스트 정렬을 지정해야 합니다.st
JavaScript는 <script>...</script> 태그 사이에 작성된 JavaScript 문장들을 통해 구현할 수 있습니다.<script ...> JavaScript code </script>예제다음은 <script> 태그 안에 HTML 주석을 추가한 예제입니다. 이 주석은 선택 사항입니다.<html> <body> <
HTML에서 id 속성에 사용할 수 있는 유효한 값은 HTML4와 HTML5에서 서로 다르게 정의되어 있습니다. 버전별 규칙을 정확히 이해하고 있어야 예기치 않은 오류를 피할 수 있습니다. HTML5에서의 id 속성 규칙 HTML5에서는 id 값에 공백 문자를 포함할 수 없습니다. 또한 값이 비어 있으면 안 되며, 최소 한 글자 이상을 포함해야 합니다. 그 외에는 숫자로 시작하거나 특수문자를 포함하는 것도 허용됩니다. <p id=test>This is demo text.</p> <p id=#test>
웹 개발에서 코드를 체계적으로 관리하려면 자바스크립트를 HTML 파일과 분리하는 것이 좋습니다. 이 글에서는 외부 자바스크립트 파일을 만들고 HTML 문서에 연결하는 방법을 단계별로 알아봅니다.1. 외부 자바스크립트 파일 만들기먼저 확장자가 .js인 외부 자바스크립트 파일을 생성합니다. 파일이 준비되면 HTML 문서의 <script> 태그에 추가하고, src 속성을 사용하여 해당 외부 자바스크립트 파일을 불러옵니다.만약 외부 자바스크립트 파일이 두 개 이상이라면, 같은 웹 페이지에 모두 포함시켜 페이지 성능을 향상시킬 수
HTML5 표준 이벤트란? 사용자가 웹사이트를 방문하면 텍스트나 이미지를 클릭하고, 링크를 따라 이동하며, 특정 요소 위에 마우스 커서를 올리는 등 다양한 행동을 합니다. 이처럼 페이지 안에서 일어나는 모든 상호작용이 바로 자바스크립트(JavaScript)에서 말하는 이벤트(Event)입니다. 개발자는 이벤트 핸들러(event handler)를 자바스크립트 또는 VBScript로 작성할 수 있으며, 작성된 핸들러를 HTML 태그의 이벤트 속성(attribute) 값으로 지정하여 사용합니다. HTML5 명세에는 아래와 같이 매우 다양
HTML 문서는 웹 페이지의 구조를 정의하는 핵심 요소입니다. 하나의 HTML 문서는 크게 두 부분으로 나뉘는데, 바로 head(헤드)와 body(바디)입니다.head 부분에는 문서 자체에 대한 정보가 담기고, body 부분에는 실제로 화면에 표시되는 콘텐츠가 들어갑니다.HTML 문서의 기본 구조HTML 문서를 작성할 때 다음 사항을 기억해야 합니다.head 부분은 반드시 <head>...</head> 태그 안에 작성합니다.body 부분은 <body>...</body> 태그 안에 작성합니다
HTML은 웹 페이지에 제목(헤딩)을 만들기 위해 총 6개의 태그를 제공합니다. 바로 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>입니다.각 헤딩 태그는 서로 다른 크기와 굵기로 제목을 표시하며, 숫자가 작을수록 더 크고 중요한 제목으로 렌더링됩니다. 즉, <h1>은 페이지에서 가장 중요한 최상위 제목을 정의하고, <h6>은 가장 낮은 수준의 부제목을 정의합니다.참고: 헤딩 태그는 반드시 <body>...</body
HTML은 웹 문서에 단락(문단)을 추가하기 위해 <p> 태그를 제공합니다. 이 태그는 시작 태그 <p>와 종료 태그 </p>로 구성되며, 반드시 <body>…</body> 태그 안에 작성해야 합니다.<p> 태그는 블록 레벨 요소이기 때문에 각 단락은 자동으로 새 줄에서 시작되며, 단락 사이에는 기본 여백이 적용됩니다. 또한 하나의 HTML 페이지에서는 <body>…</body> 태그 내부에 여러 개의 <p>…</p> 태그를
HTML을 활용하면 웹 페이지 어디든 손쉽게 링크를 추가할 수 있습니다. 회사 소개, 홈, 문의하기 같은 내부 페이지는 물론, 외부 웹사이트로 연결되는 링크도 간단한 태그 하나로 만들 수 있습니다. HTML에서 링크를 정의할 때 사용하는 것이 바로 <a> 태그입니다. <a> 태그는 링크가 시작되는 지점을, </a> 태그는 링크가 끝나는 지점을 나타냅니다. 이 두 태그 사이에 넣은 텍스트는 모두 클릭 가능한 링크로 동작합니다. 링크의 목적지 주소(URL)는 href 속성에 지정합니다. 즉, <a
HTML 페이지에서는 원하는 위치 어디든 이미지를 손쉽게 삽입할 수 있습니다. 이미지를 삽입하려면 <img> 태그를 사용하며, 이 태그는 닫는 태그가 필요 없는 빈 태그(empty tag)로 속성만으로 구성됩니다.<img> 태그의 기본 규칙<img> 태그는 반드시 <body>...</body> 태그 안에 작성해야 합니다. 주요 속성은 다음과 같습니다.src: 삽입할 이미지의 경로, 즉 이미지 URL을 지정합니다.alt: 이미지가 로드되지 않거나 스크린 리더를 사용할 때 표시되는
HTML에서 두 개의 div 요소를 수평(가로 방향)으로 나란히 정렬하려면 CSS의 float 속성을 사용하면 됩니다. 각 div에 float: left; 값을 지정하면 두 요소가 왼쪽부터 차례대로 가로 방향으로 배치됩니다.예제: float 속성으로 div 수평 정렬하기아래 코드를 실행하면 두 개의 div가 화면에서 좌우로 나란히 정렬되는 것을 확인할 수 있습니다.<!DOCTYPE html> <html> <head> <style> .demo div { float: left;
SAPUI5 컨트롤과 HTML 컨트롤, 어떻게 활용해야 할까?SAPUI5로 애플리케이션을 개발하다 보면 HTML 컨트롤과의 관계에 대해 궁금한 점이 많습니다. 이 글에서는 개발자들이 자주 묻는 네 가지 핵심 질문을 통해 SAPUI5 컨트롤과 HTML 컨트롤의 올바른 사용법과 각각의 장점을 정리해 드립니다.1. SAPUI5와 HTML 컨트롤을 동시에 사용할 수 있나요?가능은 하지만, 가장 좋은 방식은 SAPUI5만 단독으로 사용하는 것입니다. 다만 SAPUI5에서 찾을 수 없는 특정 컨트롤이 필요하다면 그 경우에 한해 HTML 컨트롤
웹 페이지 레이아웃을 작업하다 보면 부모 요소 안에서 자식 요소를 가로 방향 중앙에 배치해야 하는 경우가 매우 자주 발생합니다. 이 글에서는 하나의 HTML 파일과 하나의 CSS 파일(style.css)을 사용하여, 바깥쪽 div(o-div) 안에서 안쪽 div(i-div)를 가로로 가운데 정렬하는 방법을 단계별로 살펴보겠습니다.HTML 예제 코드아래 예제에서 o-div는 바깥쪽 컨테이너 역할을 하고, 그 안에 배치된 i-div가 가운데 정렬될 대상입니다.<html> <head>
HTML에서 div 요소를 가운데 정렬하는 방법은 목적에 따라 두 가지로 나뉩니다. 먼저 div 내부의 텍스트나 인라인 요소를 중앙에 배치하려면 text-align: center 속성을 사용하고, div 요소 자체를 화면 중앙에 배치하려면 margin: 0 auto 속성을 사용합니다.1. 내부 콘텐츠 가운데 정렬 — text-align: centertext-align: center는 div 안에 있는 텍스트, 이미지 등 인라인(inline) 또는 인라인 블록(inline-block) 요소들을 수평 방향으로 중앙에 배치합니다.2. d
네, HTML 폼에는 여러 개의 제출(submit) 버튼을 포함할 수 있습니다. 아래에 간단한 예제를 통해 그 방법을 소개합니다.여기서는 MVC VB.NET을 기준으로 설명하겠습니다. 뷰(View)에서는 이름은 같지만 값(value)이 서로 다른 세 개의 버튼을 배치하고, 컨트롤러(Controller)에서는 문자열 타입의 동일한 이름의 매개변수(cmd)를 받아 버튼의 값(Save, Update, Delete)과 비교하여 어떤 버튼이 클릭되었는지 판별하는 방식입니다.동작 원리폼이 제출될 때 클릭된 제출 버튼의 name과 value가
SAPUI5 애플리케이션을 개발하다 보면 외부 HTML 페이지를 JavaScript 뷰(JS View) 안에 불러와야 하는 경우가 종종 있습니다. 이럴 때 가장 널리 사용되는 방법은 해당 HTML 페이지를 iframe으로 삽입하는 것입니다.iframe을 이용한 HTML 페이지 삽입sap.ui.core.HTML 컨트롤의 content 속성에 iframe 태그를 직접 작성하면, 원하는 위치에 외부 페이지를 손쉽게 표시할 수 있습니다. 아래는 그 예시 코드입니다.new sap.ui.core.HTML({ preferDOM: true
SAPUI5는 개발자가 UI5 컨트롤과 함께 자신만의 정적 HTML 요소를 자유롭게 사용할 수 있도록 지원합니다. SAPUI5는 닫혀 있는(closed) 프레임워크가 아니기 때문에, sap.ui.core.HTML 컨트롤을 활용하면 UI5가 렌더링하는 영역 안에 원하는 만큼의 일반 HTML 코드를 작성할 수 있습니다. 이를 통해 HTML과 UI5 컨트롤을 손쉽게 혼합하여 유연한 화면 구성이 가능합니다.정적 HTML과 동적 HTML의 차이개발자가 직접 작성하는 정적 HTML과 달리, UI5 컨트롤이 생성하는 HTML은 런타임에 동적으로
HTML이란 무엇인가? HTML은 Hyper Text Markup Language(하이퍼텍스트 마크업 언어)의 약자로, 웹 페이지를 개발할 때 가장 널리 사용되는 언어입니다. 브라우저가 화면에 보여주는 모든 웹 문서의 구조와 내용은 HTML을 기반으로 작성됩니다. HTML의 발전 역사 HTML은 1991년 말 팀 버너스 리(Tim Berners-Lee)에 의해 처음 만들어졌습니다. 이후 1995년 첫 표준 규격인 HTML 2.0이 공식 발표되었고, 1999년 말에는 수많은 웹사이트의 기반이 된 HTML 4.01이 등장하며 큰 전환
CDATA란 무엇인가?CDATA(Character Data)는 주로 XML 문서에서 특수문자를 이스케이프(escape) 처리하지 않고 그대로 표현해야 하는 긴 텍스트를 포함할 때 사용되는 인터페이스입니다.일반적으로 XML이나 HTML에서는 <(보다 작음), &(앰퍼샌드) 같은 기호가 마크업 문법으로 해석되기 때문에 반드시 이스케이프해야 합니다. 하지만 CDATA 섹션으로 감싸면 파서가 내부 내용을 마크업으로 인식하지 않고 순수한 문자 데이터로 취급합니다.CDATA의 기본 문법CDATA는 다음과 같은 형식으로 작성합니다.