HTML
- 텍스트표시 (body 속성)
- 단락 생성 (p)
- 강제 줄바꿈 태그 (br)
- 헤딩 (h1, h2, h3......)
- 주석 생성 (<.!-- -->)
- 수평선 (hr)
- 특수문자 (&.nbsp, &.lt, &.gt, &.quot, &.amp)
- 리스트 (ul, li. ol)
- 텍스트 서식 (b, i, strong, em, code, sup, sub)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>web 커피 메뉴</h1>
<h2>아메리카노 5000원</h2>
<p>에스프레소 물 추가</p>
<br>
<h2>카페오레</h2>
</body>
</html>- 정의리스트 : 항목들과 함께 항목들의 정의가 표시되는 리스트 (dl, dt, dd)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>커피 리스트
<dt>에스프레소</dt>
<dd>원액</dd>
<dt>아메리카노</dt>
<dd>물탐</dd>
</dl>
</body>
</html>- 이미지 <.img src ="cat.png", width="300" height="300" alt = "No image">
- alt: 이미지가 표시되지않는 경우 화면에 표시되는 텍스트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>고양이</h2>
<img border="0" src="고양이.jpeg" alt ="고양이 이미지">
<img border="0" width="300" height="400" src="고양이.jpeg" alt ="고양이 이미지">
</body>
</html>블록요소 인라인요소
- 블록요소 : 한 줄을 다 차지
- 인라인 요소 : 한 줄에 차례대로 표시
ex) 이미지
출처: data-flair HTML Block and Inline Elements
이미지 처리방법
- client --http Request----> "web server"
- clinet <--http Response-- "web server"
이미지의 종류
- jpeg : 손실 압축방식 사용
- png : 무손실 압축방식 사용
- gif : 투명 배경, 애니메이션을 지원
경로
- _blank : 새로운 탭
- _self : 현재 탭(기본값)에서 링크를 엽니다.
- _top : 최상위 프레임에서 링크를 엽니다. 모든 프레임을 벗어나 전체 창에서 표시합니다.
- _parent : 현재 프레임의 부모 프레임에서 링크를 엽니다. (프레임 구조일 때 사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">구글로 이동</a>
<p>target 속성이 _blank이므로 링크는 새로운 탭에서 열립니다.</p>
</body>
</html>- 상대경로 : 웹사이트 안에서 다른 페이지 (현재 문서 기준)
- 절대경로 : 다른 웹사이트의 페이지 (https:// 포함)
- 내부파일 : 현재 페이지 안의 특정 위치(anchor)
id 속성
- id태그 : 내부 탭에서 다른 위치로 이동
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>id 속성 예제</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
section {
height: 700px; /* 각 구역을 길게 만들어서 스크롤이 생기게 함 */
padding: 40px;
border: 1px solid #ccc;
margin-bottom: 30px;
}
#section1 {
background-color: #f0f8ff;
}
#section2 {
background-color: #fff5e1;
}
nav {
position: fixed;
top: 10px;
right: 20px;
background-color: #eee;
padding: 10px;
border-radius: 8px;
}
</style>
</head>
<body>
<nav>
<a href="#section1">Section 1</a> |
<a href="#section2">Section 2</a>
</nav>
<h1>id 속성으로 구역 이동하기</h1>
<p>아래 링크나 오른쪽 상단 메뉴를 눌러서 각 구역으로 이동할 수 있습니다.</p>
<section id="section1">
<h2>Section 1</h2>
<p>이곳은 첫 번째 섹션입니다. id="section1"을 가지고 있습니다.</p>
<p>이 구역은 배경색이 연한 파란색으로 설정되어 있습니다.</p>
<p>스크롤이 충분히 생기도록 내용을 길게 작성했습니다.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>이곳은 두 번째 섹션입니다. id="section2"을 가지고 있습니다.</p>
<p>이 구역은 배경색이 연한 주황색으로 설정되어 있습니다.</p>
<a href="#section1">맨 위로 이동</a>
</section>
</body>
</html>썸네일
- 썸네일과 이미지 다른 점
| 구분 | 이미지(Image) | 썸네일(Thumbnail) |
| ----------- | ------------------ | ----------------- ------ |
| **의미** | 실제 표시용 원본 이미지 | 원본을 축소한 미리보기 이미지 |
| **목적** | 콘텐츠 내용을 직접 보여줌 | 클릭 유도 및 빠른 미리보기 제공 |
| **크기** | 큼 (고해상도) | 작음 (저해상도) |
| **파일 용량** | 큼 | 작음 |
| **사용 위치** | 본문, 상세 페이지 | 목록, 미리보기, 갤러리 등 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>고양이 이미지와 썸네일</title>
<style>
.thumbnail {
width: 150px; /* 썸네일 크기 */
height: auto;
border: 2px solid #ccc;
border-radius: 10px;
margin-top: 20px;
cursor: pointer; /* 클릭 가능한 손가락 모양 */
}
</style>
</head>
<body>
<h2>고양이</h2>
<!-- 원본 이미지 -->
<img src="고양이.jpeg" alt="고양이 이미지" width="400" height="400" style="border:0;">
<p>아래 이미지는 썸네일(미리보기)입니다. 클릭하면 원본 이미지가 새 탭에서 열립니다.</p>
<!-- 썸네일 이미지 -->
<a href="고양이.jpeg" target="_blank">
<img src="고양이.jpeg" alt="고양이 썸네일" class="thumbnail">
</a>
</body>
</html>
이미지랑 썸네일이랑 다른 점이 무엇인지 이해가 안 갔는데, 직접 실습을 해 보니(챗지피티의 도움을 받았다.)
많은 차이를 느꼈다.
이렇게 있는데 위는 이미지고 밑은 썸네일인데, 밑에 썸네일은 클릭이 가능하다. 클릭을 하면
이런식으로 사진으로 이동이 가능하다.
테이블
- 표 형태의 데이터를 표시하는 데 사용.
- 행 : tr
- 컬럼: td
이것에 대한 예제는 아까 위에 올린 이미지와 썸네일에 대한
테이블 정보를 html로 만드는 것을 만들었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 vs 썸네일 비교표</title>
</head>
<body>
<table border="1">
<caption>이미지(Image)와 썸네일(Thumbnail) 비교</caption>
<tr>
<th>구분</th>
<th>이미지(Image)</th>
<th>썸네일(Thumbnail)</th>
</tr>
<tr>
<td>의미</td>
<td>실제 표시용 원본 이미지</td>
<td>원본을 축소한 미리보기 이미지</td>
</tr>
<tr>
<td>목적</td>
<td>콘텐츠 내용을 직접 보여줌</td>
<td>클릭 유도 및 빠른 미리보기 제공</td>
</tr>
<tr>
<td>크기</td>
<td>큼 (고해상도)</td>
<td>작음 (저해상도)</td>
</tr>
<tr>
<td>파일 용량</td>
<td>큼</td>
<td>작음</td>
</tr>
<tr>
<td>사용 위치</td>
<td>본문, 상세 페이지</td>
<td>목록, 미리보기, 갤러리 등</td>
</tr>
</table>
</body>
</html>이것을 실행하면 다음과 같이 나온다.
두번째 날에 대한 회고
도메인과 이미지의 종류, 다양한 태그의 사용 방법 등 기초적인 내용을 다시 다질 수 있어서 의미 있는 시간이었습니다.
단순히 HTML만 배우는 것이 아니라 앞으로 학습할 장고와도 연결되는 내용이었기 때문에 오늘 배운 부분을 꼭 기억해야겠다는 생각이 들었습니다.
또한 강의 중간중간 직접 코드를 작성하며 진행되어 대학생 때 들었던 수업보다 훨씬 덜 지루했고, IT 대표님의 시각에서 어떤 점이 중요한지, 어떤 기초를 탄탄히 다져야 하는지를 들을 수 있어서 더욱 뜻깊은 시간이었습니다.
저작권 문제를 방지하기 위해 실제 수업에서 사용한 코드는 포함하지 않았으며, 일부 내용을 보완하거나 수정하여 ChatGPT를 활용해 직접 작성하였습니다.
본 포스트의 내용은 수업에서 다룬 주요 목차를 정리한 수준입니다.
정도를 걷는 엔지니어