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 태그들은 각각의 역할에 따라 웹페이지를 구조화하고
디자인하는 데 도움을 줍니다.
들어가며 소프트웨어가 처리해야 하는 데이터 양이 늘어날수록, 단순히 기능 구현만으로는 성능과 효율을 보장하기 어렵습니다. 특히…
들어가며 소프트웨어를 구현할 때 성능 최적화나 안정성을 높이려면, 단순히 고수준 코드만 신경 쓰는 것을 넘어…
들어가며 소프트웨어가 복잡해질수록, 단순히 알고리즘의 시간복잡도만으로는 모든 문제를 해결할 수 없습니다. 특히 운영체제 수준에서는 다중…
들어가며 복잡한 소프트웨어가 원활히 동작하려면 단순히 코드만 잘 짜는 것으로는 부족합니다. 트랜잭션 처리나 대규모 데이터…
들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…
들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…