1. HTML
HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어로, 웹 브라우저가 내용을 구조화하여 표시할 수 있도록 도와준다. HTML은 제목, 단락, 목록, 이미지, 링크 등 다양한 요소를 태그(Tag)를 사용해 정의하며, 웹 페이지의 뼈대 역할을 한다. 단독으로는 디자인이나 동적인 기능은 제공하지 않지만, CSS로 스타일을 적용하고 JavaScript로 기능을 추가함으로써 풍부하고 인터랙티브한 웹 페이지를 구성할 수 있습니다. 웹 개발의 기본이 되는 핵심 언어이다.
■ <!DOCTYPE html>: 이 문서가 HTML5 표준이라는 것을 선언.
■ <html>: 전체 HTML 문서의 루트(root) 요소.
■ lang="ko": 문서의 기본 언어가 한국어임을 나타냄.
접근성, 검색 최적화, 사용자 경험 모두에 영향을 미치는 중요한 요소.
■ <head>: 문서의 메타 정보(문자 인코딩, 제목, 외부 파일 링크 등)를 포함.
■ <meta charset="UTF-8">: 한글을 포함한 다양한 문자가 깨지지 않도록 UTF-8 인코딩을 지정.
■ <meta name="viewport" ...>: 모바일 환경에서도 잘 보이도록 반응형 설정을 도와줌.
■ <title>: 브라우저 탭에 표시될 제목을 정함.
■ <body>: 실제 화면에 표시될 콘텐츠가 들어가는 부분.
√ 주석문
HTML 주석은 코드에 설명이나 메모를 추가할 때 사용하는 기능으로, 브라우저에 표시되지 않으며 코드의 가독성과 유지보수에 도움을 준다. 주석은 <!--로 시작하여 -->로 끝나며, 이 사이에 작성된 내용은 HTML 문서 안에 존재하지만 사용자에게는 보이지 않는다. 예를 들어 <!-- 여기는 헤더 영역입니다 -->와 같이 사용하여 특정 부분의 용도나 수정 사항 등을 표시할 수 있으며, 일시적으로 코드를 비활성화할 때도 활용된다.
2. 텍스트 태그
■ Heading
Heading 태그는 HTML에서 제목을 나타낼 때 사용하는 태그로, <h1>부터 <h6>까지 총 6단계가 있다. <h1>은 가장 중요하고 큰 제목을 의미하며, 숫자가 커질수록 덜 중요한 소제목으로 간주되어 글자 크기도 작아진다. 이 태그는 문서의 구조를 계층적으로 표현하는 데 사용되며, 스크린 리더나 검색 엔진도 이를 참고해 콘텐츠의 중요도나 순서를 파악한다. 일반적으로 한 페이지에 <h1>은 한 번만 사용하고, 그 아래에 <h2>, <h3> 등을 이용해 논리적인 구조를 구성하는 것이 좋다.
■ <p>, <br>
<p> 태그는 HTML에서 문단(paragraph)을 나타내는 블록 요소로, 텍스트 콘텐츠를 구분하여 읽기 쉽고 구조적인 형태로 표현할 때 사용된다. <p> 태그는 한 문단을 의미하며, 자동으로 위아래에 여백(margin)이 적용되어 다른 요소와 시각적으로 구분된다. 줄바꿈을 위해 <br> 태그를 사용하는 것과 달리, <p>는 논리적인 텍스트 단락을 만들기 위한 태그로, 문서의 의미 구조를 구성하는 데 중요한 역할을 한다.
■ <hr>
<hr> 태그는 HTML에서 수평선을 삽입할 때 사용하는 빈 요소(empty element)로, 주로 내용의 구분이나 전환을 시각적으로 나타내는 데 사용된다. 예를 들어, 주제를 나누거나 장면이 바뀌는 경우 등 문서 내에서 구획을 나눌 필요가 있을 때 <hr> 태그를 활용한다. 이 태그는 자체적으로 닫는 태그가 필요 없으며(<hr>만 쓰면 됨), 기본적으로 브라우저는 얇은 회색 선으로 표시한다.
HTML에서 태그는 크게 블록(Block) 태그와 인라인(Inline) 태그로 나뉘며, 이 둘은 화면에 표시되는 방식과 역할이 다릅니다. 아래는 두 태그의 차이를 비교한 표이다.
| 구분 | 블록 태그 (Block Element) | 인라인 태그 (Inline Element) |
| 기본 동작 | 한 줄 전체를 차지하며 줄바꿈이 자동으로 발생함 | 내용만큼만 공간을 차지하며 줄바꿈이 발생하지 않음 |
| 사용 목적 | 레이아웃 구성이나 큰 구조 (문단, 구역 등)를 만들 때 | 문장 내부에서 글자 스타일이나 링크 등을 만들 때 |
| 중첩 가능성 | 블록 태그 안에 인라인 태그, 블록 태그 둘 다 가능 | 인라인 태그 안에는 인라인 태그만 가능 (일반적으로) |
| 예시 태그 | <div>, <p>, <h1>, <h6>, <section>, <ul> 등 | <span>, <a>, <strong>, <img>, <em> 등 |
3. 리스트 태그
■ <ul>
<ul> 태그는 HTML에서 순서 없는 목록(Unordered List)을 만들 때 사용하는 태그로, 보통 항목 앞에 ● 같은 기호가 붙는 리스트를 생성한다. 이 태그는 반드시 하나 이상의 <li>(list item) 태그와 함께 사용되며, <ul>은 리스트 전체를 감싸고, <li>는 각 항목을 나타낸다. 예를 들어, 쇼핑 목록이나 항목의 순서가 중요하지 않은 정보를 나열할 때 유용하다. <ul>은 기본적으로 블록 요소이며, CSS를 사용해 기호 모양이나 들여쓰기를 조절할 수 있습니다. 문서를 구조화하고 가독성을 높이는 데 유용한 태그이다.
■ <ol>
<ol> 태그는 HTML에서 순서 있는 목록(Ordered List)을 만들 때 사용하는 태그로, 항목 앞에 숫자(1, 2, 3...)나 문자(a, b, c...) 등의 순서 표시가 자동으로 붙는다. <ul>과 마찬가지로 <li> 태그와 함께 사용되며, <ol>은 전체 목록을 감싸고 <li>는 각 항목을 나타낸다. 순서가 중요한 절차, 단계, 순위 등을 나열할 때 유용하며, 기본적으로 블록 요소이다.
■ <dl>
<dl> 태그는 HTML에서 설명 목록(Definition List)을 만들 때 사용하는 태그로, 용어와 그에 대한 설명을 짝지어 나타낼 수 있도록 구성된 목록이다. 이 태그는 반드시 <dt>(definition term, 용어)와 <dd>(definition description, 설명) 태그와 함께 사용되며, <dl>이 전체 목록을 감싸고 <dt>와 <dd>가 한 쌍으로 사용된다. 예를 들어, 사전식 정의나 용어 설명, FAQ와 같은 구조를 표현할 때 적합하다. <dl>은 일반적인 순서형 목록(<ol>, <ul>)과는 다르게 내용 간의 관계를 표현할 수 있는 구조화된 태그로, 웹 문서를 의미적으로 풍부하게 만드는 데 유용하다.
4. 링크 및 미디어 태그
■ <img>
<img> 태그는 HTML에서 웹 페이지에 이미지를 삽입할 때 사용하는 태그로, 빈 요소(empty element)이며 닫는 태그 없이 단독으로 사용된다. 이 태그는 src 속성에 이미지 파일의 경로(주소)를, alt 속성에 이미지가 보이지 않을 때 대신 표시할 대체 텍스트를 지정한다. 예를 들어 <img src="logo.png" alt="회사 로고">처럼 작성한다. alt 속성은 접근성 향상과 SEO 최적화에도 중요한 역할을 하며, 이미지를 설명해주는 용도로 사용된다.
아래 압축 파일을 다운받고 위치에 맞게 이미지를 저장한다.
√ 속성
속성은 태그에 추가적인 정보를 제공하여 요소의 동작이나 표현 방식을 제어하는 역할을 한다. 속성은 태그의 시작 태그 안에 작성되며, 일반적으로 이름="값" 형태로 사용된다. 예를 들어 <img src="image.jpg" alt="설명">에서 src는 이미지 파일의 경로를, alt는 이미지에 대한 대체 텍스트를 지정하는 속성이다. 이러한 속성은 HTML 요소의 스타일, 동작, 접근성 등을 조정할 수 있으며, 필요한 설정을 태그마다 다르게 지정할 수 있다.
√ 웹에서 사용 가능한 이미지 포멧
이미지 포맷에는 JPEG, PNG, GIF, SVG, WebP 등이 있으며, 각각의 포맷은 용도와 특성에 따라 다르게 사용된다. JPEG는 사진처럼 색상이 많고 복잡한 이미지를 압축해 저장하는 데 적합하며, PNG는 배경 투명도나 선명한 이미지 표현에 유리하다. GIF는 짧은 애니메이션을 표현할 수 있고, SVG는 확대해도 깨지지 않는 벡터 이미지로 아이콘이나 로고에 적합하다. 최근에는 이미지 품질을 유지하면서도 용량을 줄일 수 있는 WebP 포맷이 많이 권장되며, 빠른 로딩 속도와 최적화 측면에서 현대 웹사이트에서 널리 사용되고 있다.
√ SEO 최적화
SEO 최적화는 Search Engine Optimization, 즉 검색 엔진 최적화를 의미한다. 간단히 말해, 웹사이트나 웹페이지가 검색 결과에서 더 상위에 노출되도록 만드는 모든 작업을 SEO 최적화라고 한다. 색 결과 상위에 노출되면 더 많은 방문자를 얻을 수 있어, 블로그, 쇼핑몰, 회사 홈페이지 모두 SEO가 매우 중요하다.
■ <a>
태그는 HTML에서 하이퍼링크(hyperlink)를 생성할 때 사용하는 태그로, 웹 페이지에서 다른 페이지, 파일, 이메일 주소 또는 같은 페이지 내 특정 위치로 이동할 수 있도록 연결해주는 역할을 한다. href 속성에 이동할 URL 또는 경로를 지정하며, 예를 들어 http://www.naver.com'>네이버로 이동하기와 같이 사용한다. <a>는 기본적으로 인라인 요소이며, 텍스트뿐만 아니라 이미지 등 다른 요소를 감싸 링크로 만들 수도 있다.
아래 압축 파일을 다운받고 위치에 맞게 html문서를 저장한다.
'프론트엔드 > HTML , CSS' 카테고리의 다른 글
| div와 span (0) | 2025.04.15 |
|---|---|
| 테이블 만들기 (1) | 2025.04.14 |
| CSS (0) | 2025.04.14 |
| Visual Studio Code (0) | 2025.04.14 |
| 인터넷과 웹 (0) | 2025.04.13 |