개요
React를 통해 웹 프로젝트를 빠르게 진행해야 하는데 일단 HTML, CSS, JavaScript에 대한 내용을 반드시 알아야한다고 해서 하나씩 정리해보면서 알아갈 계획이다.
책은 얄코의 Too Much 친절한 HTML+CSS+자바 스크립트로 결정했고, 정말 상세하게 설명해주셔서 이해하기가 편했다.
1. HTML이란?
HTML은 HyperText Markup Lanague의 줄임말로 웹 페이지를 만들기 위한 표준 마크업 언어이다.
: HyperText
-> 한 문서에서 다른 문서로 이동할 수 있는 링크를 포함한 텍스트를 의미한다.
-> 웹에서 링크를 클릭했을 때, 다른 페이지로 이동할 수 있는 기능이 바로 하이퍼텍스트의 핵심이다.
: MarkUp
-> 문서의 구조와 의미를 정의하는 태그(tag)를 사용하는 방식이다.
HTML은 텍스트, 이미지, 링크, 비디오, 오디오 등 다양한 요소를 포함할 수 있고 웹 페이지의 구조를 정의하는 뼈대의 역할을 하게 된다.
다음에 정리할 CSS(디자인), JS(동적인 기능)을 함께 적용해 하나의 웹사이트를 구성할 수 있게 된다.
2. HTML 기본 구성 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 기본 구조</title>
</head>
<body>
<h1>안녕하세요, HTML입니다!</h1>
<p>이것은 HTML 문서의 기본 구조입니다.</p>
</body>
</html>
처음 Visual Studio에서 ! + Tab을 입력하면 위의 코드와 같이 HTML 기본적인 세팅이 나타나게 된다.
:<!DOCTYPE html>
-> HTML 문서의 버전을 지정하는 것
:<html>
-> 문서의 루트 요소이고, 모든 HTML 요소를 포함한다.
:<head>
-> 문서의 메타데이터를 포함해, 제목, 인코딩, 스타일시트, 스크립트 등이 여기에서 정의된다.
:<body>
-> 실제 화면에 표시되는 내용이 포함된다.
Visual Studio에 Live Server 플러그인을 통해 확인해보면 다음과 같이 나타난다.
3. HTML 태그
HTML은 마크업 언어이기 때문에 여러 가지 태그를 통해 문서를 구성하는데 하나씩 살펴보자.
3-1. 기본 태그
: <h1> ~ <h6>
-> 제목 요소에 대한 크기를 지정해준다.
<body>
<h1>안녕하세요, HTML입니다!</h1>
<h2>안녕하세요, HTML입니다!</h2>
<h3>안녕하세요, HTML입니다!</h3>
<h4>안녕하세요, HTML입니다!</h4>
<h5>안녕하세요, HTML입니다!</h5>
<h6>안녕하세요, HTML입니다!</h6>
<p>이것은 HTML 문서의 기본 구조입니다.</p>
</body>
h1부터 h6까지 적용했을 때 각 제목의 크기가 달라지는 것을 알 수 있다.
: <p>
-> 문단 태그로 하나의 문단을 나타낸다.
<body>
<p>이것은 HTML 문서의 기본 구조입니다.</p>
<p>P태그를 활용하면</p>
<p>이렇게 문단을 나눌 수 있어요.</p>
</body>
그냥 body안에 원하는 값을 입력하고, Enter로 줄바꿈을 하면 적용되지 않지만, <p> 태그를 활용하면 줄바꿈이 이뤄지게 된다.
: <strong>
-> 굵은 글씨로 강조
: <em>
-> 기울임 글씨로 강조
: <br>
-> 줄바꿈
: <hr>
-> 가로줄 넣기
<body>
<p>이것은 <string>강조되는</string> 문장입니다</p>
<p>이것은 <em>기울임</em> 문장입니다.</p>
<p>줄바꿈 <br> 문장입니다.</p>
<hr>
<p>위의 선은 <hr> 태그를 사용한 결과입니다.</p>
</body>
* 태그 속성
HTML은 태그마다 속성을 가질 수 있는데, 태그의 동작이나 스타일을 지정하는 데 사용된다.
속성은 항상 태그 내에서 정의되고 이름과 값으로 구성된다.
<a href="https://www.example.com" target="_blank">링크</a>
<img src="image.jpg" alt="이미지 설명">
여기서 href, target, src, alt가 태그 속성이 된다.
3-2. 목록 태그
HTML은 여러 가지 태그를 사용해 문서를 구성할 수 있는데 주요 태그로는 <ul>, <ol>, <li>를 기억하면 된다.
: <li>
-> <ul>, <ol> 태그의 자손 태그이다.
* 자손 태그는 어떤 태그가 다른 태그 안에 들어가 있을 때를 자손 태그라 한다.
: <ul>
-> 항목이 순서 없이 나열된다.
<body>
<p>순서 없는 목록들</p>
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
</body>
: <ol>
-> 목록 항목을 순서대로 정렬할 때 사용 된다.
-> type 속성을 활용해 목록 스타일 또한 변경이 가능하다.
<body>
<p>순서 있는 목록들</p>
<ol type="A">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
</body>
ol, ul 안에 또다른 ol, ul을 중첩으로 적용할 수 있다.
<body>
<p>중첩 목록들</p>
<ul>
<li>
과일
<ol>
<li>사과</li>
<li>바나나</li>
</ol>
</li>
<li>
채소
<ol>
<li>당근</li>
<li>브로콜리</li>
</ol>
</li>
</ul>
</body>
3-3. 용어 정의 태그
웹 문서에 용어와 그 정의에 대해 표현할 때 <dl>, <dt>, <dd>를 사용한다.
: <dl>
-> 정의형 목록을 만들기 위해 사용된다.
: <dt>
-> 목록에서 정의할 용어를 나타낸다.
: <dd>
-> 용어의 정의 내용을 작성하는 데 사용한다.
<body>
<p>용어 정의</p>
<dl>
<dt>HTML</dt>
<dd>웹 페이지를 구조화하는 마크업 언어입니다.</dd>
<dt>CSS</dt>
<dd>웹 페이지의 스타일과 레이아웃을 정의하는 스타일시트 언어입니다.</dd>
<dt>JavaScript</dt>
<dd>웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.</dd>
</dl>
</body>
참고
'Language > HTML&CSS' 카테고리의 다른 글
| [CSS] 박스 모델 (0) | 2025.02.18 |
|---|---|
| [CSS] 인라인과 블록 (0) | 2025.02.17 |
| [CSS] CSS 적용 방법, 선택자, 결합자, 가상 클래스 (0) | 2025.02.03 |
| [HTML] form & input 태그 (1) | 2025.02.03 |
| [HTML] 이미지 & 표 & 링크 태그 (0) | 2025.02.03 |
