데이터 분석을 위한 웹 개발 언어
✔️ HTML 태그
✔️ 서식태그
✔️ HTML 태그
기본적인 HTML 구조
<!DOCTYPE html>: HTML5 문서임을 선언
<html lang="ko">: 페이지의 언어를 한국어로 설정(기본적으로 영어(en)로 설정됨)
<head>: 메타데이터와 외부 파일 연결을 설정하는 공간
<body>: 실제로 브라우저에 보이는 콘텐츠를 담는 공간
HTML태그
웹 브라우저가 웹 문서를 이해하고 표시 가능하도록 콘텐츠를 분류하는 규칙
여는 태그(<태그이름>)
닫는 태그(</태그이름>)
계층 구조 이해
부모 태그와 자식 태그, 조상 태그
태그들 간의 계층 구조를 가짐
부모 태그와 자식 태그, 그리고 더 상위인 조상 태그로 나눌 수 있음
(표를 생성하는 경우 확연히 확인 가능)
<table> : 표 전체를 감싸는 부모 태그
<tr> : 표의 행(row)을 나타내는 자식 태그, <table> 안에 포함
<td> : 표의 셀(data)을 나타내는 태그, <tr>의 자식이며 <table>의 손자 태그
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
시맨틱 태그
HTML5에서 도입된 게념으로 웹사이트의 내용을 명확히 파악하기 위해 영역을 구분하는 태그
<header> : 페이지 상단의 머리말 영역
<nav> : 내비게이션 메뉴
<main> : 주요 콘텐츠 영역
<aside> : 사이드바나 광고 같은 부수적인 내용
<section> : 콘텐츠의 구획
<article> : 독립적인 콘텐츠 (예: 블로그 포스트)
<footer> : 페이지 하단의 바닥글
시멘틱웹에 대한 더 자세한 내용은 해당 페이지를 참고해주시기 바랍니다.
Semantic Web | PoiemaWeb
검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 시맨틱 요소로 구
poiemaweb.com
✔️ 서식태그
제목 태그
웹페이지에서 콘텐츠의 구조를 잡는 역할 수행
<h1> : 가장 큰 글씨의 제목 태그 제공
<h6> : 가장 작은 글씨의 제목 태그 제공
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
문단(내용) 태그
<p> : 단락(paragraph)을 의미하는 태그
웹페이지에 단락 형태로 표시
<p>여는 태그와 닫는 태그 사이에 내용을 입력합니다</p>
모든 태그가 닫는 태그를 필요로 하지는 않음
<br> : 줄바꿈
<hr> : 수평선 표시
<!-- br, hr 과 같은 태그는 닫는 태그가 없음 -->
<br>
<p>여는 태그와 닫는 태그 사이에 내용을 입력합니다</p>
<hr>
그룹화 태그
<div> : 콘텐츠를 그룹화하는 데 사용하는 블록 요소 태그
제목과 문단을 하나의 주제로 묶는 경우 깔끔하게 정리 가능
<div>
<p>요리</p>
</div>
<div>
<p>날씨</p>
</div>
강조태그
특정 단어나 문장을 강조하고 싶을 때 사용
<strong> : 굵게 표시, 의미상 중요
<em> : 기울임, 약한 강조
<b> : 단순 굵게 표시
<i> :단순 기울임
<!-- strong, em 태그 : 특정 문장이나 단어를 강조하고 싶을 때 사용 -->
<strong>강조할 문장1_strong</strong>
<em>강조할 문장2_em</em>
<b>강조할 문장_b</b>
<i>강조할 문장_i</i>
링크 태그
<a> : 다른 웹페이지로 이동하거나 외부 링크를 걸 때 사용
<a herf="url지정" target="타겟지정"></a>
href : 이동할 URL을 지정
target = "_blank" : 링크를 새 탭에서 실행
<!-- 웹페이지에 링크 걸기 : a -->
<a href="https://www.naver.com">네이버</a>
<!-- a 태그의 속성 target -->
<a href="https://www.naver.com" target="_blank">네이버 새창열기</a>
이미지 삽입 태그
<img> : 웹페이지에 이미지를 추가할 때 사용
src : 이미지 파일 경로
alt : 이미지가 로드되지 않을 때 표시될 텍스트
<!-- 이미지 넣기 img-->
<img src="이미지 파일 경로" alt="이미지 설명글" />
<!-- 이미지를 시맨틱 태그를 이용해 넣기 -->
<figure>
<img src="img/너구리사진.jfif" alt="너구리" />
</figure>
<figcaption>너구리가 두 손을 모으고 쳐다보고 있는 사진</figcaption>
SPAN 태그
<span> : 인라인 요소를 그룹화할 때 사용, CSS로 세부 스타일을 적용 용이
HTML은 크게 블록 요소와 인라인 요소로 나누어짐
블록 요소 : <p>, <div>처럼 새로운 줄에서 시작하며 공간을 독립적으로 차지
인라인 요소 : <strong>, <em>, <span>처럼 옆으로 이어져 표시
<span>은 <p>이 문장에서 <span><strong>중요한 부분</strong></span>만 강조할게요.</p>
<strong> 태그와 함께 "중요한 부분"이라는 단어를 감싸며,
나중에 CSS로 이 부분에 색깔이나 스타일을 추가하기 쉽게 만듦
<p>블록요소 1</p>
<p>블록요소 2</p>
<strong>강조</strong> <em>기울임</em> <span>그룹</span>
<span><strong>인라인 요소</strong></span> 안에서 그룹화
이번 내용에서는 HTML에서의
제목, 문단, 강조, 링크, 이미지 등 서식 태그에 대해 공부하였습니다.
HTML을 공부하는 이유는 데이터 분석을 위해서는 데이터 수집을 진행해야 하는데
웹에서 원하는 데이터를 효율적으로 가져오기 위함입니다.
더불어 데이터 분석을 위해서 DB와 SQL을 공부도 필요한데
위 블로그 글 참고해서 공부하면 좋을 것 같습니다.
'BOOTCAMP/SQL(MySQL)' 카테고리의 글 목록
데이터 분석 공부 열심히 하는 중😁
everyonelove.tistory.com
'BOOTCAMP > 웹 개발 언어' 카테고리의 다른 글
| [HTML][CSS]웹 개발 언어_배경과 배치 및 요소의 효과 설정 (0) | 2025.03.10 |
|---|---|
| [HTML][CSS]웹 개발 언어_HTML과 CSS 활용한 폰트/텍스트 변환, 레이아웃 설정 (0) | 2025.03.08 |
| [HTML][CSS]웹 개발 언어_CSS의 복합 셀렉터와 가상 셀렉터 (0) | 2025.03.07 |
| [HTML][CSS]웹 개발 언어_CSS의 태그/아이디/클래스/속성 셀렉터 (0) | 2025.03.07 |
| [HTML] 웹 개발 언어_HTML의 목록, 폼, 오디오와 비디오 태그 활용 (0) | 2025.03.06 |