실제로 해보기
HTML의 이해
HTML란?
HTML(Hyper Text Markup Language)은 웹 페이지의 구조와 내용을 정의하기 위한 언어
왜 사용하는지?
HTML은 웹 브라우저가 문서를 해석하여 시각적으로 홈페이지의 구조를 표현할 수 있게 하기 때문에 사용합니다.
어떻게 사용하는지?
일반명사 | 꼬리표 |
고유명사 | 웹 페이지의 구조와 내용을 정의하는 요소로 사용 |
HTML의 기본 태그
•
<head>
일반명사 : 머리
고유명사: head 태그는 HTML 문서의 머리 부분을 정의하며, 웹 페이지의 메타데이터, 스크립트, 스타일시트 등의 정보를 포함합니다.
사용 이유: head 태그는 웹 페이지의 정보를 브라우저에게 제공하고, 검색 엔진 등에게 문서의 정보를 알려줍니다.
메타데이터를 포함하여 문서의 제목, 문자 인코딩, 스타일시트 및 스크립트 파일의 경로 등을 설정할 수 있습니다.
또한, 웹 페이지의 스타일, 스크립트, 외부 폰트 등을 설정하고 로딩할 수 있습니다.
•
<body>
일반명사: 몸
고유명사: body 태그는 HTML 문서의 본문 내용을 정의하며, 웹 페이지에 실제로 표시되는 내용을 포함합니다.
사용 이유: body 태그는 웹 페이지의 실제 내용을 구성합니다.
텍스트, 이미지, 링크, 동영상 등 다양한 컨텐츠를 포함할 수 있습니다.
사용자에게 보여지는 웹 페이지의 주요 내용을 body 태그 안에 작성하게 됩니다.
또한, body 태그 내에서 스타일 및 레이아웃을 조정하고, JavaScript를 사용하여 상호작용성을 추가할 수 있습니다.
웹 페이지의 실제 컨텐츠를 body 태그를 통해 구성하고 표시할 수 있습니다.
<html>
<head>
html의 기본적인 설정이 들어간다.
</head>
<body>
유저에게 보여지는 컨텐츠의 내용이 들어간다.
</body>
</html>
HTML
복사
자주쓰이는 태그
•
div
◦
정의: div 태그는 구획을 나누거나 그룹화하기 위한 블록 요소로, 스타일을 적용하거나 스크립트를 적용하기 위해 사용됩니다.
◦
사용 이유: div 태그는 웹 페이지의 구조를 나누고 요소들을 그룹화하는 데 사용됩니다. 스타일시트를 적용하여 레이아웃을 조정하거나 스크립트를 적용하여 특정 기능을 구현할 수 있습니다. 또한, div 요소를 중첩하여 복잡한 구조를 생성하거나 클래스와 ID 속성을 활용하여 스타일 및 동작을 개별적으로 제어할 수 있습니다.
•
h1~5
◦
정의: h1부터 h5까지의 제목 태그는 각기 다른 수준의 제목을 정의하며, 문서 구조와 정보의 중요도를 나타냅니다.
◦
사용 이유: 제목 태그는 웹 페이지의 구조를 나타내고 제목의 계층 구조를 형성합니다.
검색 엔진은 제목 태그를 통해 페이지의 핵심 주제를 파악하고 사용자에게 표시합니다. 또한, 시각적으로 제목의 크기와 스타일을 구분하여 사용자에게 정보를 전달하는 역할을 합니다.
•
p
◦
정의: p 태그는 문단을 정의하는 블록 요소로, 텍스트의 단락을 구분하여 표시합니다.
◦
사용 이유: p 태그를 사용하여 텍스트를 문단 단위로 그룹화하여 읽기 쉽게 표시할 수 있습니다. 스타일시트를 통해 문단 간격을 조정하거나 텍스트의 스타일을 적용할 수 있습니다. 또한, 웹 접근성을 향상시키기 위해 스크린 리더 사용자에게 문단의 의미를 전달할 수 있습니다.
•
br
◦
정의: br 태그는 줄 바꿈을 나타내는 빈 요소로, 단순히 줄을 바꿀 때 사용됩니다.
◦
사용 이유: br 태그를 사용하여 간단한 줄 바꿈을 표현할 수 있습니다. 주소나 시간 등 줄 바꿈이 필요한 경우에 유용합니다. 일반적으로 단락을 구분하기 위해서는 p 태그를 사용하며, br 태그는 특수한 상황에서 줄 바꿈이 필요할 때 사용됩니다.
<html>
<head>
<meta charset="UTF-8">
<title>웹 페이지</title>
</head>
<body>
<div>
<h1>웹 페이지 예시</h1>
<div>
<h2>섹션 1</h2>
<div>
<h3>소제목 1</h3>
<div>
<h4>소제목 2</h4>
<div>
<h5>소제목 3</h5>
<p>이곳은 단락 내용입니다.</p>
<br>
<p>다음 단락입니다.</p>
</div>
</div>
</div>
</div>
<div>
<h2>섹션 2</h2>
<p>이곳은 섹션 2의 내용입니다.</p>
</div>
</div>
</body>
</html>
JavaScript
복사
태그의 속성과 속성 값
•
속성이란?
요소의 성질, 요소에 특정한 값을 지정해주는 것이다.
→ 추가적인 특성을 부여하고 동작을 제어하는데 사용
•
각각의 태그 마다 추가적인 정보를 넣어 줄 수 있다.
•
태그마다 사용 가능한 속성이 있으니 정확하게 사용하는게 중요하다.
•
형식)
<!--
<tagname>: HTML 요소의 태그 이름입니다. 각 요소마다 고유한 태그 이름을 가지고 있습니다.
attribute: 속성의 이름입니다. 속성은 해당 요소에 대한 추가 정보를 제공하고 동작을 제어합니다.
"value": 속성에 대한 설정값입니다. 속성 값은 해당 속성의 동작이나 스타일을 구체적으로 정의합니다.
-->
<tagname attribute="value"></tagname>
HTML
복사
•
예시)
◦
a 태그
<!--
<a> 태그는 하이퍼링크를 정의하는 태그입니다.
href 속성은 클릭 시 이동할 링크의 주소를 지정합니다.
"https://www.example.com"은 href 속성의 값으로, 이 링크 주소로 이동합니다.
-->
<a href="https://www.example.com">링크</a>
HTML
복사
◦
img 태그
<!--
<img> 태그는 이미지를 표시하는 태그입니다.
src 속성은 이미지 파일의 경로를 지정합니다.
"image.jpg"은 src 속성의 값으로, image.jpg라는 이미지 파일을 표시합니다.
alt 속성은 이미지에 대한 대체 텍스트를 제공합니다.
"이미지"는 alt 속성의 값으로, 이미지를 표시할 수 없는 경우 대체 텍스트로 표시됩니다.
-->
<img src="image.jpg" alt="이미지">
HTML
복사
◦
input 태그
<!--
type 속성은 입력 필드의 유형을 정의합니다.
이 예시에서 type="text"는 텍스트를 입력할 수 있는 입력 필드를 생성합니다.
-->
<input type="text" name="username">
HTML
복사
미니퀘스트
