📌 0. 대화
📌 0-1. 마크다운과 HTML의 차이
- 마크업 언어: 문서의 구조와 스타일을 표시하기 위한 언어(마치 책의 중요한 내용을 형광펜으로 강조하는 것)
- 마크다운은 간단한 문서작성용 마크업 언어이고 HTML은 웹페이지를 구성하는 고도화된 마크업 언어이다.
- 시작 태그와 끝태그 사이는 하이라이팅과 비슷하고 <> 안의 말은 말머리(돼지꼬리) 같은 역할은 한다.
- html을 화면에 구현하기 위해 웹 표준을 만들고 웹 페이지를 만들었다.
- XML: 데이터를 저장하거나 다른 시스템에 전달하기 위한 것
📌 0-2 레티나 해상도
- 레티나(Retina)는 Apple에서 만든 용어로,
“사람 눈으로는 개별 픽셀이 구분되지 않을 정도로 선명한 화면”**을 뜻함.
📌 0-3. 픽셀 방식 vs 벡터 방식 비교
| 항목 | 픽셀 방식 (Raster) | 벡터 방식 (Vector) |
|---|---|---|
| 정의 | 작은 점(픽셀)들의 집합으로 이미지를 표현 | 수학적인 도형(선, 면 등)으로 이미지를 표현 |
| 확대 시 | 깨짐 (해상도 의존적) | 절대 깨지지 않음 (무제한 확대 가능) |
| 용도 | 사진, 복잡한 이미지 | 로고, 아이콘, 일러스트, 글자 |
| 용량 | 복잡하면 클 수 있음 | 보통 더 가볍고 최적화 가능 |
| 대표 포맷 | .jpg, .png, .gif | .svg, .ai, .eps, .pdf |
📌 1. HTML의 이해
- 메타 데이터: 데이터를 설명하기 위한 데이터 (mp3의 노래를 설명하기 위한 가사, 제목, 가수 등)
- view port: 웹페이지가 사용자에게 보이는 화면의 영역, 웹페이지 해상도를 기기 해상도에 맞추게 설정할 수 있다.
- html 태그는 문서구조 요소, 영역 구성 요소, 문단 구성 요소, 문장 구성 요소, 목록/표 구성 요소, 미디어 및 링크 요소, 입력 요소등이 있다.
📌 1-1. 웹페이지의 기본구조
- lang = "ko" 보다 lang="ko"이렇게 붙여 쓰는게 좋다.
- content="widh = device-width 이거보다 content="widh=device-width 이렇게 붙여쓰는게 낫다. 이럴때 속성값이 올바르게 해석되지 않는다.
- 01-HelloHTML 보다 내부 공백을 줄여주는게 좋다. 01-HelloHTML 이렇게
HTML 기본 문서 구조 태그 설명표
| 태그 / 속성 | 설명 |
|---|---|
<!DOCTYPE html> | 문서가 HTML5 문서임을 선언. 브라우저가 HTML5 방식으로 해석하도록 함. |
<html lang="ko" translate="no"> | 전체 문서의 시작. lang="ko"는 한국어 문서라는 의미. translate="no"는 Google 번역 등 자동 번역을 막음. |
<head> | 웹 페이지의 설정 정보(메타 정보)를 담는 영역. 브라우저에 표시되지 않음. |
<meta charset="UTF-8"> | 문자 인코딩을 UTF-8로 설정. 한글 포함 다양한 언어가 깨지지 않게 함. |
<meta name="google" content="nottranslate"> | Google 번역기에게 이 페이지는 번역하지 말라고 지시함. |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | 반응형 웹을 위한 설정. 디바이스의 화면 너비에 맞추고 확대 배율을 1로 설정. |
<title>01-HelloHTML</title> | 웹 브라우저 탭에 표시될 문서 제목. 즐겨찾기 등록 시에도 사용됨. |
<body> | 실제 브라우저 화면에 표시되는 본문 내용을 담는 부분. 사용자에게 보여지는 모든 요소가 이 안에 들어감. |
<h1>Hello HTML</h1> | 가장 큰 제목을 나타냄. 보통 문서의 대표 제목이나 로고 등에 사용. |
<p>첫번째 웹 페이지 입니다.</p> | 하나의 문단(paragraph)을 나타냄. 일반 텍스트 블록에 사용. |
</태그> | 각각의 태그는 닫는 태그가 있어야 하고, </태그> 형식으로 닫음. HTML5에서는 일부 태그는 생략 가능하지만 명시하는 것이 안전함. |
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="nottranslate">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>01-HelloHTML</title>
</head>
<body>
<h1> Hello HTML </h1>
<p> 첫번째 웹 페이지 입니다. </p>
</body>
</html>기본 템플릿 준비해두기
HTML 템플릿 스니펫 실수 정리표
| 구분 | 실수 내용 | 문제 설명 | 수정 예시 |
|---|---|---|---|
| ✅ 따옴표 위치 | <html lang = "ko translate="no"> | "가 중복되어 문법 오류 발생 | <html lang="ko" translate="no"> |
| ✅ 띄어쓰기 | <html lang = "ko"> | = 앞뒤 공백은 HTML 관례상 지양됨 | <html lang="ko"> |
| ✅ 오타: viewport | widh = device-width, initial-scal=1.0 | width, scale 철자 오타 → 모바일 화면 작동 이상 | width=device-width, initial-scale=1.0 |
| ✅ 오타: title | <tiltle>...</tiltle> | 태그 이름 오류 → 브라우저가 인식 못함 | <title>...</title> |
| ✅ 공백: title 내부 | <title> ${TM_FILENAME_BASE} </title> | ${} 변수 앞뒤 공백은 불필요 | <title>${TM_FILENAME_BASE}</title> |
"HTML 기본 템플릿": {
"prefix": "my_html_template",
"body": [
"<!DOCTYPE html>",
"<html lang=\"ko\" translate=\"no\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"google\" content=\"nottranslate\" />",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>${TM_FILENAME_BASE}</title>",
"</head>",
"<body>",
"$1",
"</body>",
"</html>"
],
"description": "HTML 기본 템플릿"
}📌 1-2. 영역 구성 요소
- 레이아웃: 위치들을 효율적으로 배치하기 위해 설계하는 것
- : 웹 레이아웃 구성에서 각 영역을 표시하는 구분자이다. 아래는 이 div 태그의 여러 종류이다.
- \
: break line -> 줄바꿈을 의미 (문단 안에서 줄바꿈) - \
: 문단을 나누는 것
| 태그 | 역할 / 설명 |
|---|---|
<header> | 페이지나 섹션의 머리말 영역 보통 제목, 로고, 네비게이션 등이 포함됨 |
<nav> | 내비게이션 메뉴 영역 사이트 메뉴, 링크 모음 등을 담는 영역 |
<main> | 문서의 주요 콘텐츠 영역 문서에서 핵심적인 내용만 포함 (하나만 사용 권장) |
<section> | 문서 내의 주제를 구분하는 영역 논리적으로 묶이는 그룹 (예: 소개, 서비스, 문의 등) |
<article> | 독립적으로 완전한 콘텐츠 블록 예: 블로그 글, 뉴스 기사, 사용자 리뷰 등 |
<aside> | 본문 외의 보조 콘텐츠 영역 예: 광고, 관련 링크, 사이드바 등 |
<footer> | 페이지나 섹션의 꼬리말 영역 예: 저작권, 연락처, 사이트 맵 등 |
📌# 1-2-1. 3단 레이아웃
- alt + L, O를 눌러서 live service를 오픈하여 결과를 확인한다.
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="nottranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-3단-레이아웃</title>
</head>
<body>
<div>
사이트 로고 & 메뉴
</div>
<div>
여기는 본문 영역입니다
</div>
<div>
회사 이름 밑 카피라이트 표시
</div>
</body>
</html>📌# 1-2-2. div 세분화
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="nottranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-3단-레이아웃</title>
</head>
<body>
<header>
사이트 로고 & 메뉴
</header>
<main>
여기는 본문 영역입니다
</main>
<footer>
회사 이름 밑 카피라이트 표시
</footer>
</body>
</html>1-2-3. 박스에 디자인 속성
- HTML태그의 style속성 안에 "CSS속성:값;" 형태로 부여하고자 하는 특성을 나열한다
- background-color: 태그 영역의 배경 색상 지정
- padding: 박스 내부의 컨텐츠에 대한 여백 크기를 px 단위로 설정한다. 즉 박스 테두리와 박스 안의 컨텐츠 사이의 공간을 의미하며 px로 절대 크기로 지정하면 그만큼 공백이 늘어나서 박스가 커지는 것처럼 보이는 것이다.
- css속성을 나열하는 것은 순서 상관이 없다. 읽어들일때 속성 단위별로 구분하기 때문이다.
CSS 속성이란?
| 용어 | 설명 | 예시 |
|---|---|---|
| CSS 속성 | HTML 요소의 스타일을 지정하는 이름 | color, font-size, margin |
| 값(Value) | 속성에 적용할 구체적인 수치나 색상 등 | red, 16px, center |
| 구분자 | :는 속성과 값을 연결 / ;는 스타일을 구분 | color: red; |
HEX 코드
- #RRGGBBAA; 16진수 두자리로 빨강, 초록, 파랑, 투명도의 혼합색상을 표현함(00~FF) 투명도는 생략 가능
| 10진수 | 16진수 |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F ✅ |
- 축약해서 사용할때 모든 자리수가 ffaabbaa이런식으로 짝지어져 있으면 faba로 줄일 수 있다.
- 맨뒤에 aa는 투명도인데 생략이 가능하다. 생략할 경우 불투명한 색상 값이 된다. 완전 투명:00,불투명:FF,50% 투명:80
웹페이지에 크기를 지정하는 방법
- 모니터 일반 해상도: 1920 × 1080 픽셀
- 절대단위: 화면 크기나 모니터의 해상도와 무관하게 고정된 크기를 의미한다. (px(점), pt(워드에서 글자크기))
- 하나의 픽셀은 rgb의 혼합색상을 표현한다.
- 상대 단위: 기준에 따라 유동적으로 크기가 변한다.
| 단위 | 기준 설명 | 사용 예 | 의미 |
|---|---|---|---|
% | 부모 요소의 크기 | width: 50%; | 부모 요소 너비의 50% ※ 부모가 없으면 브라우저 너비 기준 |
em | 현재 요소의 폰트 크기 | font-size: 2em; | 현재 글꼴 크기의 2배 |
rem | 루트 요소(html)의 폰트 크기 | font-size: 1.5rem; | 전체 웹 페이지의 기본 글자 크기의 1.5배 |
vw | 뷰포트 너비의 1% | width: 50vw; | 화면 가로 길이의 50% |
vh | 뷰포트 높이의 1% | height: 100vh; | 화면 전체 높이만큼의 높이 |
연습코드
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="nottranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-3단-레이아웃</title>
</head>
<body>
<header style="background-color:#4cca53; padding: 3%">
사이트 로고 & 메뉴
</header>
<main style="background-color: rgb(174, 223, 215); padding: 100px">
여기는 본문 영역입니다
</main>
<footer style="background-color: rgb(201, 162, 114); padding: 150px">
회사 이름 밑 카피라이트 표시
</footer>
</body>
</html>📌 1-3. 영역 구성 요소 (사이드바 레이아웃)
- 원래 div 태그를 연속적으로 쓰면 그냥 세로로 계속 나열될 뿐 별다를게 없다.
- css는 \
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="nottranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-3단-레이아웃</title>
</head>
<body>
<header style="background-color:#4cca53; padding: 3%;">
사이트 로고 & 메뉴
</header>
<div>
<nav style="background-color: rgb(174, 223, 215); padding: 20px;">
사이드바 영역
</nav>
<main style="background-color: firebrick; padding:20px;">
컨텐츠 영역
</main>
</div>
<footer style="background-color: rgb(201, 162, 114); padding: 50px;">
회사 이름 밑 카피라이트 표시
</footer>
</body>
</html>css 활용하여 가로로 배치
- display: flex; Flexbox 레이아웃 컨테이너로 만들어 자식 요소들을 가로로 배치한다.
- 파일마다 live를 새로 열어야 잘 보인다.
- 부모 요소가 Flex 컨테이너가 되면 자식 요소들은 Flex 아이템(Flex Item)이 되어 자동으로 가로 정렬(기본값) + 유연한 정렬이 가능해진다.
- flex-direction을 display 밑에 작성하여 row, row-reverse, column, column-reverse 이렇게 설정 값을 변경할 수 있다.
- justify-content는 가로방향 정렬을 제어한다.
- align-items는 수직방향 정렬을 제어한다.
- 0 0 -> flex-grow: 0, flex-shrink: 부모의 크기가 변했을때 자식이 같이 어떻게 변할지를 설정하는 것
- Flexbox는 "퍼센트"가 아니라 "비율"로 동작한다.
- border는 테두리를 생성하는 것을 의미하고 solid는 끊이지 않는 선인 실선을 의미한다.
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="nottranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-사이드바 레이아웃</title>
<style>
div {
display: flex;
nav {flex: 0 0 200px;
border: 5px solid #fff;
margin: 10px;}
main { flex: 1 1 auto;
border: 5px solid #fff;
margin: 10px;}
}
</style>
</head>
<body>
<header style="background-color:#4cca53; padding: 20px;">
사이트 로고 & 메뉴
</header>
<div>
<nav style="background-color: rgb(174, 223, 215); padding: 20px;">
사이드바 영역
</nav>
<main style="background-color: firebrick; padding:20px;">
컨텐츠 영역
</main>
</div>
<footer style="background-color: rgb(201, 162, 114); padding: 20px;">
회사 이름 밑 카피라이트 표시
</footer>
</body>
</html>📌 1-4. 영역 구성 요소 (그리드 레이아웃)
- 그냥 grid가 일열로 붙어있는 형태이다.
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="nottranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-그리드 레이아웃</title>
<style>
</style>
</head>
<body>
<header style="background-color:rgb(233, 208, 232); padding: 20px;">
사이트 로고 & 메뉴
</header>
<main style="background-color: #585453; padding: 20px;">
<div style="background-color: #c3b7da80; padding: 10px">grind item</div>
<div style="background-color: #c3b7da80; padding: 10px">grind item</div>
<div style="background-color: #c3b7da80; padding: 10px">grind item</div>
<div style="background-color: #c3b7da80; padding: 10px">grind item</div>
<div style="background-color: #c3b7da80; padding: 10px">grind item</div>
<div style="background-color: #c3b7da80; padding: 10px">grind item</div>
<div style="background-color: #c3b7da80; padding: 10px">grind item</div>
<div style="background-color: #c3b7da80; padding: 10px">grind item</div>
</main>
<footer style="background-color: rgb(233, 208, 232); padding: 20px;">
회사 이름 밑 카피라이트 표시
</footer>
</body>
</html>- css를 통하여 개선 아래 css를 추가하여 바둑판구조로 배치
- flex-wrap: wrap: 자식 요소들이 한 줄에 다 안 들어가면 자동으로 다음 줄로 줄 바꿈되도록 설정
- box-sizing: border-box: 요소의 width와 height를 계산할 때 padding, border를 포함시켜 계산함
- calc(25% - 10%): 원래 4개 박스를 가로 한 줄에 넣고 싶어서 25%를 줬는데 margin이나 gap이 있기 때문에 겹침을 피하려고 10%를 빼준 것이다.
<!DOCTYPE html>
<html lang="ko" translate="no">
<head>
<meta charset="UTF-8">
<meta name="google" content="nottranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-그리드 레이아웃</title>
<style>
main{
display: flex;
flex-wrap: wrap;
div{
box-sizing: border-box;
flex: 1 1 calc(25% - 10%);
border: 5px solid #fff;
margin: 5px;
}
}
</style>
</head>
학생