html
HTML(하이퍼텍스트 마크업 언어)는 웹 개발에서 핵심적으로 사용 됩니다.
다양한 태그를 통해 웹페이지의 내용과 구조를 정의합니다.
웹 페이지의 기본이며 필수적인 요소 입니다.
다음은 HTML에서 자주 쓰이는 몇 가지 태그에 대한 설명입니다.
<html> 태그는 HTML 문서의 시작과 끝을 정의합니다.
모든 HTML 코드는 이 태그 안에 포함되어야 합니다
<!DOCTYPE html> // HTML5 문서임을 나타냅니다.
<html lang="en"> // html 태그 시작
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html> // html 태그 끝<head> 태그는 문서의 헤더를 정의하며,
주로 문서 제목, 스타일 시트, 메타데이터 등을 포함합니다.
<!DOCTYPE html>
<html lang="en">
<head> // head 태그 시작
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> // 문서 제목
</head>// head 태그 끝
<body>
</body>
</html><body> 태그는 웹페이지의 본문을 정의합니다.
여기에는 텍스트, 이미지, 링크 등이 들어갑니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> // body 태그 시작
// 이곳에 본문을 작성 합니다.
</body> // body 태그 끝
</html><h1>부터 <h6>까지의 태그는 제목을 정의합니다.
숫자가 작을수록 제목의 중요도가 높아지며,
숫자가 작을 수록 제목의 크기가 커집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목 입니다.</h1>
<h2>제목 입니다.</h2>
<h3>제목 입니다.</h3>
<h4>제목 입니다.</h4>
<h5>제목 입니다.</h5>
<h6>제목 입니다.</h6>
</body>
</html><p> 태그는 문단(paragraph)을 나타냅니다.
텍스트 단락을 나타내거나 문단을 구분할 때 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>문단</p> // p태그
<p>문단</p>
<p>문단</p>
</body>
</html><a> 태그는 하이퍼링크를 생성합니다.
href 속성에 링크 주소를 지정하여 다른 페이지로 이동하거나
파일을 다운로드할 수 있습니다. 링크를 생성할 때 주로 사용 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://suover.com">SUOVER Blog</a> // a태그 사용
</body>
</html><img> 태그는 이미지를 삽입합니다. src 속성에 이미지 파일 경로를 지정합니다.
alt 속성에 이미지에 대한 대체 텍스트를 삽입 할 수 있습니다.
이미지가 로드 되지 못했을 때, 대체 텍스트가 출력 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="/이미지경로" alt="대체 텍스트"> // img 태그 사용
</body>
</html><ul>과 <li> 태그는 순서가 없는 목록을 정의합니다.
<ul> 안에 여러 <li> 태그를 넣어 사용합니다.
<ol>과 <li> 태그는 순서가 있는 목록을 정의합니다.
<ol> 안에 여러 <li> 태그를 넣어 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul> // ul 태그 시작
<li>리스트 아이템</li> // ul 태그 안에 li 를 여러개 생성합니다.
<li>LIST ITEM</li>
</ul> // ul 태그 끝
<ol> // ol 태그 시작
<li>리스트 아이템</li> // ol 태그 안에 li 를 여러개 생성합니다.
<li>LIST ITEM</li>
</ol> // ol 태그 끝
</body>
</html><div> 태그는 문서를 그룹화하거나 스타일링하기 위해 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div> // div 태그 시작
<p>div 구역 입니다.</p>
</div> // div 태그 끝
</body>
</html>이러한 HTML 태그들은 각각의 역할에 따라 웹페이지를 구조화하고
디자인하는 데 도움을 줍니다.
인터넷 네트워크란? "인터넷(Internet)"이라는 단어는 "인터네트워크(Internetwork)"의 줄임말입니다. 즉, 여러 개의 네트워크가 상호 연결되어 전 세계적으로 하나의…
스프링 빈(Spring Bean)과 IoC 컨테이너 스프링 프레임워크의 핵심 철학은 IoC(Inversion of Control) 컨테이너를 통해 객체(빈,…
스프링 빈이란? 스프링 프레임워크에서 "스프링 빈(Bean)"이란, IoC(Inversion of Control) 컨테이너가 직접 관리하는 객체를 말합니다. @Component,…
의존성 주입(Dependency Injection)이란? 프로그램을 개발하다 보면, 여러 클래스나 객체들은 서로 필요한 기능을 사용하기 위해 관계를…
컴포넌트 스캔이란? 컴포넌트 스캔(Component Scan)은 스프링 프레임워크가 특정 패키지를 탐색하면서, 스캔 대상에 해당하는 클래스를 찾아…
스프링 빈이란? 스프링 빈(Spring Bean)은 스프링 IoC(Inversion of Control) 컨테이너가 관리하는 자바 객체를 의미합니다. 간단히…