JavaScript를 사용해 <select> 목록 항목을 미리 선택(preselect)하려면 selectedIndex 속성을 활용하면 됩니다. 이 속성에 미리 선택하고 싶은 항목의 인덱스 번호를 지정하기만 하면 됩니다.selectedIndex 속성의 기본 문법<script> 태그 안에서 add_select_id는 <select> 태그의 id 값이고, add_item_index는 숫자 형태의 인덱스입니다. 이 인덱스는 목록 항목의 순서 번호로, 미리 선택하려는 항목에 해당하는 번호를 지정해 주면 됩니다
HTML에서는 폼(form)을 통해 사용자 입력을 받을 때 간단한 드롭다운 목록을 손쉽게 만들 수 있습니다. 이때 사용하는 것이 바로 <select> 요소로, 흔히 셀렉트 박스(select box) 또는 드롭다운 박스(drop-down box)라고 부르며, 목록 형태로 여러 항목을 표시할 수 있습니다.기본값(디폴트 값) 설정하기드롭다운 목록에서 특정 항목을 미리 선택된 상태로 표시하고 싶다면, 해당 항목의 <option> 태그에 selected 속성을 추가하면 됩니다. 이렇게 하면 페이지가 로드될 때 지정한 옵
HTML <iframe> 태그란? <iframe>(inline frame) 태그는 현재 문서 안에 또 다른 문서를 삽입할 때 사용하는 인라인 프레임을 정의합니다. 이를 활용하면 외부 웹페이지, 지도, 동영상 등 다양한 콘텐츠를 하나의 페이지에 손쉽게 포함시킬 수 있습니다. 인라인 프레임은 몇 줄의 코드만으로 만들 수 있어 매우 간단하며, HTML 문서 어디에나 배치할 수 있다는 장점이 있습니다. <iframe> 태그의 주요 속성 <iframe> 태그에는 아래와 같은 주요 속성이 있습니다.
HTML은 웹사이트에서 콘텐츠 서식 지정, 제목 작성, 텍스트 정렬, 섹션 추가 등 다양한 작업을 수행할 수 있도록 여러 태그를 제공합니다. 그중에서도 HTML 문서를 구성하는 데 반드시 필요한 핵심 태그는 doctype, <html>, <head>, <title>, <body>입니다. 1. doctype — 문서 유형 선언 doctype은 문서 유형 선언(DOCTYPE Declaration)으로, 해당 문서가 어떤 버전의 HTML을 사용하는지 브라우저에 알려주는 역할을 합니다. HTML
HTML 문서를 구성하는 가장 중요한 태그HTML에는 콘텐츠 서식 지정, 제목 작성, 정렬 설정, 섹션 추가 등 웹사이트를 구성하기 위한 다양한 태그가 존재합니다. 그중에서도 HTML 문서를 성립시키는 데 반드시 필요한 핵심 태그는 다음 네 가지입니다.<!DOCTYPE> — 문서 유형 선언<html> — 문서의 최상위 루트 요소<head> — 문서 정보 영역<body> — 화면에 표시되는 본문 영역1. doctype (문서 유형 선언)doctype은 문서 유형 선언(Document Type
HTML 문서의 제목을 설정하려면 <title> 태그를 사용합니다. 이 태그는 반드시 <head>와 </head> 태그 사이에 위치해야 하며, 여기에 작성된 제목은 웹 브라우저의 탭이나 제목 표시줄에 그대로 나타납니다.<title> 태그는 검색 엔진 최적화(SEO) 측면에서도 매우 중요한 역할을 합니다. 구글 등 검색 결과 페이지에 노출되는 문서 제목이 바로 이 태그의 내용이기 때문에, 적절한 제목 작성은 사이트 방문자 유입에 직접적인 영향을 줍니다.title 태그 사용 예제아래 코드를 웹
HTML의 <style> 태그는 HTML 문서의 <head> 영역 안에서 스타일시트를 선언하는 데 사용됩니다. 이처럼 HTML 문서 내부에 직접 CSS를 작성하는 방식을 내부 CSS(Internal CSS)라고 부릅니다.내부 CSS란?CSS를 HTML에 적용하는 방법은 여러 가지가 있으며, 그중 하나가 바로 <style> 태그를 활용한 내부 CSS 방식입니다. 내부 CSS는 하나의 HTML 페이지에만 스타일을 적용할 때 유용하며, 별도의 외부 CSS 파일을 만들 필요 없이 해당 문서 안에서 모든 스타
HTML 문서는 웹 페이지 그 자체로, 웹사이트에 콘텐츠를 표시하는 역할을 합니다. HTML은 여러 개의 태그(tag)로 구성되며, 대부분의 태그는 여는 태그와 닫는 태그가 한 쌍을 이룹니다. 다만 일부 태그는 닫는 태그 없이 단독으로 사용되기도 합니다. HTML 문서가 올바르게 동작하려면 아래에서 소개하는 기본 최소 구조의 필수 태그들을 반드시 포함해야 합니다.HTML 문서의 기본 최소 구조 요소1. DOCTYPE 선언모든 HTML 문서는 <!DOCTYPE html> 선언으로 시작합니다. 이 선언은 브라우저에게 해당 문
HTML 문서를 작성할 때 일반적으로 선언, <html>, <head>, <body> 태그가 필수 요소라고 알려져 있습니다. 하지만 흥미롭게도 <head> 요소가 없어도 유효한(valid) HTML 문서를 만들 수 있습니다.DOCTYPE 선언의 역할가장 중요한 것은 DOCTYPE 선언입니다. 은 항상 문서 최상단에 위치해야 하며, 브라우저에게 이 문서가 어떤 표준에 따라 작성된 HTML 페이지인지 알려주는 역할을 합니다. 이 선언이 있으면 브라우저가 표준 모드(Standards Mode)
<link> 태그란 무엇인가?HTML에서 <link> 태그는 현재 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 가장 대표적인 용도는 외부 스타일시트(CSS 파일)를 문서에 연결하는 것입니다.<link> 태그는 반드시 <head> ... </head> 태그 사이에 작성해야 하며, 닫는 태그가 없는 빈(void) 요소입니다. 이 태그 안에서 연결하려는 외부 CSS 파일을 정의합니다.href 속성으로 CSS 파일 연결하기별도로 작성한 CSS 파일에는 모든 스타일 코드가 들
HTML <script> 태그는 HTML 문서 안에 스크립트를 선언할 때 사용하는 요소입니다. 이 태그를 활용하면 브라우저에서 직접 실행되는 클라이언트 사이드 JavaScript를 정의할 수 있습니다. <script> 태그는 단순히 코드를 삽입하는 것 외에도 다양한 속성을 통해 스크립트의 로딩 방식과 동작을 세밀하게 제어할 수 있습니다. <script> 태그의 주요 속성 속성값설명 asyncasync스크립트를 비동기적으로 실행하도록 지정합니다. 스크립트 다운로드와 페이지 렌더링이 동시에 진행됩
HTML의 <script> 태그는 HTML 문서 안에서 스크립트를 선언할 때 사용됩니다. 이를 통해 클라이언트 측 JavaScript를 정의할 수 있습니다. 그렇다면 외부 JavaScript 파일을 HTML 페이지에 추가하려면 어떻게 해야 할까요? 다행히 <script> 태그의 src 속성을 사용하면 아주 간단하게 처리할 수 있습니다.먼저 <script> 태그에서 사용할 수 있는 주요 속성을 살펴보겠습니다.속성값설명asyncasync스크립트가 비동기적으로 실행되도록 지정합니다. 다운로드와 실행이 페이
JavaScript에서 현재 날짜와 시간을 가져오려면 Date 객체를 사용하면 됩니다. Date 객체는 자바스크립트에 기본으로 내장되어 있어 별도의 라이브러리 없이도 코드 한 줄로 현재 시스템의 날짜와 시간 정보를 손쉽게 확인할 수 있습니다. 기본 사용 예제 아래 코드를 실행하면 현재 날짜와 시간이 화면에 표시됩니다. <!DOCTYPE html> <html> <body> <p id="currentDate"><
JavaScript에서 객체 배열을 화면에 출력하려면 JSON.stringify() 메서드를 사용하는 것이 가장 간단하고 효과적인 방법입니다. 이 메서드는 자바스크립트 객체나 배열을 문자열 형태의 JSON으로 변환해 주기 때문에, 복잡한 데이터 구조도 손쉽게 확인할 수 있습니다. JSON.stringify() 기본 문법 JSON.stringify() 메서드는 세 가지 매개변수를 받을 수 있습니다. value: 문자열로 변환할 객체 또는 배열 (필수) replacer: 특정 속성만 필터링하거나 값을 변환하는 함수 또는 배열 (선택
JavaScript에서 현재 연도 구하기 JavaScript에서 현재 연도를 가져오려면 getFullYear() 메서드를 사용하면 됩니다. 이 메서드는 Date 객체의 기본 제공 메서드로, 현지 시간 기준으로 연도(예: 2025)를 네 자리 숫자로 반환합니다. 사용 방법은 매우 간단합니다. 먼저 new Date()로 현재 날짜 객체를 생성한 후, 해당 객체에서 getFullYear()를 호출하면 현재 연도를 손쉽게 얻을 수 있습니다. 예제 코드 아래 예제는 버튼을 클릭하면 현재 연도가 화면에 표시되는 코드입니다. 직접 실행해 결과를
자바스크립트에서 조건문을 다루다 보면 0 == false와 if(0)의 평가 결과가 서로 다르게 느껴져 혼란스러울 수 있습니다. 그 이유는 두 경우에 적용되는 평가 방식이 완전히 다르기 때문입니다. 하나씩 살펴보겠습니다. 1. 0 == false의 평가 과정 — 타입 강제 변환(type coercion) 동등 연산자(==)는 비교를 수행하기 전에 피연산자의 타입을 암묵적으로 변환합니다. ECMAScript 명세에는 다음과 같은 규칙이 정의되어 있습니다. If Type(y) is Boolean, return the result of
# 문자로 구성된 삼각형을 출력하려면 중첩 for 루프(nested for loop)를 활용해야 합니다. 바깥쪽 루프는 삼각형의 행(row) 수를 제어하고, 안쪽 루프는 각 행에 출력될 # 문자의 개수를 결정합니다.예제 코드아래 코드를 실행하면 #으로 이루어진 삼각형이 화면에 출력됩니다.<html> <head> <body> &
자바스크립트와 객체 지향 프로그래밍자바스크립트(JavaScript)는 객체 지향 프로그래밍(Object Oriented Programming, OOP) 언어입니다. 프로그래밍 언어가 객체 지향 언어라고 불리려면, 개발자에게 다음 네 가지 기본 기능을 제공해야 합니다.1. 캡슐화(Encapsulation)캡슐화는 데이터나 메서드 같은 관련 정보를 하나의 객체 안에 함께 저장할 수 있는 능력입니다. 이를 통해 데이터의 무결성을 보호하고 코드의 응집도를 높일 수 있습니다.2. 집합화(Aggregation)집합화는 하나의 객체를 다른 객체
자바스크립트에서 객체(Object)를 생성하려면 new 연산자를 사용하여 객체의 인스턴스를 만들 수 있습니다. new 연산자 뒤에는 생성자 메서드가 따라옵니다.생성자(Constructor)는 객체를 생성하고 초기화하는 함수입니다. 자바스크립트는 객체를 만들기 위해 Object()라는 특별한 내장 생성자 함수를 제공합니다. 이때 Object() 생성자의 반환값은 변수에 할당됩니다.이 변수에는 새로 생성된 객체에 대한 참조가 저장됩니다. 한 가지 주의할 점은, 객체에 할당되는 속성(property)들은 일반적인 변수가 아니므로 var
HTML의 defer 속성은 외부 스크립트 파일이 페이지 렌더링을 방해하지 않도록 스크립트 실행 시점을 지연시키는 데 사용됩니다. 이 속성은 오직 외부 스크립트(src 속성이 있는 경우)에만 적용되며, 값을 따로 지정하지 않는 불리언(boolean) 속성입니다.defer 속성의 작동 원리defer가 설정된 스크립트는 다음과 같은 순서로 동작합니다.1. 브라우저가 HTML을 파싱하는 동안 스크립트 파일을 병렬로 다운로드합니다.2. HTML 문서 파싱이 완료된 후에야 스크립트가 실행됩니다.3. 스크립트는 DOMContentLoaded