HTML 정리
HTML이란?
HTML은 웹사이트의 구조를 정의하는 마크업 언어이다.
HTML은 콘텐츠를 태그(Tag) 로 감싸서 문서의 구조와 의미를 정의한다.
HTML 기본 형식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<!-- 실제 콘텐츠 -->
</body>
</html>기본 형식은 위 코드와 같다.
head영역은 웹 브라우저에 보이지 않는 데이터와 문서 정보를 정의하는 부분이다.title태그는 웹페이지의 제목을 정의하며 브라우저 탭/창의 제목에 표시된다.
제목 태그(h1~h6)
<h1>가장 큰 제목 (페이지당 하나만 사용 권장)</h1>
<h2>큰 제목</h2>
<h3>중간 제목</h3>
<h4>작은 제목</h4>
<h5>더 작은 제목</h5>
<h6>가장 작은 제목</h6><h1> ~ <h6> 태그는 제목을 지정하는 태그이다.
숫자가 작을수록 글자가 더 크다. 문서 구조에 맞게 적절하게 사용해야 한다.
오타 수정:
<h@>같은 태그는 존재하지 않는다. 제목 태그는h1~h6까지만 있다.
줄바꿈 태그(br)
<br />하이퍼링크(a)
<a href="https://www.google.com">구글로 이동</a><a> 태그는 하이퍼링크 태그이다.
href="..." 안에 이동할 링크를 넣고, 태그 사이에는 링크의 설명(텍스트)을 작성한다.
사용자가 해당 텍스트를 클릭하면 지정한 사이트로 이동한다.
이미지(img)
<img src="images/photo.jpg" alt="사진 설명"><img> 태그는 이미지를 표시하는 태그이다.
src: 이미지 주소(경로)alt: 이미지에 대한 설명
사용자 접근성(Accessibility) 측면에서 alt는 작성해주는 것이 좋다.
목록 태그(ul / ol / li)
순서 없는 목록(ul)
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul><ul> 태그 안에 <li>를 사용한다.
출력 시 ● 같은 모양으로 순서 없이 리스트 형태로 출력된다.
순서 있는 목록(ol)
<ol>
<li>첫 번째 단계</li>
<li>두 번째 단계</li>
<li>세 번째 단계</li>
</ol><ol> 태그는 <ul>과 다르게 순서를 가지고 출력한다.
<li>는 동일하게 사용한다.
<ol type="A">
<li>첫 번째</li>
<li>두 번째</li>
</ol>type="A" 같은 옵션으로 숫자 대신 A, B, C처럼 스타일을 변경할 수 있다.
정의 목록(dl / dt / dd)
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language의 약자</dd>
</dl><dl>안에<dt>,<dd>를 사용한다.- 어떤 개념을 정의할 때 자주 사용된다.
dt: 용어(이름)dd: 설명
테이블(table)
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>30</td>
<td>개발자</td>
</tr>
<tr>
<td>김철수</td>
<td>25</td>
<td>디자이너</td>
</tr>
</tbody>
</table><table> 태그는 표(테이블)를 작성하는 태그이다.
thead/tbody, tr, th/td로 구조를 구성한다.
폼(form)
<form action="/submit" method="post">
<label for="username">사용자명:</label>
<input type="text" id="username" name="username" required>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<button type="submit">제출</button>
</form><form> 태그는 사용자 입력을 서버로 전송하기 위한 영역을 만든다.
로그인, 회원가입, 검색 같은 입력창을 구현할 때 사용되며, 백엔드 개발자에게도 중요한 태그다.
action: 어디로 보낼지(URL)method: 전송 방식 (GET또는POST)
GET 방식
- 데이터를 URL 뒤에 붙여서 전송한다.
POST 방식
- 데이터를 HTTP 요청의 body에 담아서 전송한다.
Node.js / npm / nvm
Node.js
Node.js는 자바스크립트(JavaScript)를 브라우저 밖에서도 실행할 수 있게 만든 런타임 환경이다.
npm
npm(Node Package Manager)은 Node.js에서 사용하는 패키지(라이브러리) 관리 도구이다.
nvm
Node.js는 버전이 다양하기 때문에, 버전 관리를 쉽게 하기 위해 nvm(Node Version Manager) 을 같이 사용한다.
느낀점
오늘은 프론트엔드 쪽을 공부하였다. HTML/CSS는 군대에서 독학으로 살짝 공부해본 경험이 있어서 강의를 쉽게 따라갈 수 있었다.
CSS는 내일 배우고, Node.js는 처음 써봤지만 npm, nvm과 같이 사용하니 쉽게 사용할 수 있어서 좋았다.
