HTML 회고록
2024-05-19 오후 12시 46분
2024-06-19 오후 02시 35분
HTML (Hyper Text MarkUp Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 마크업(Mark-up) 언어입니다.
HTML의 기본구성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<title>Document</title>
</head>
<body>
</body>
</html>
가장 기본적인 구성은 위와 같다. 각각 풀어서 해석해보자.
<!DOCTYPE html>
가장 최신 웹 표준을 지원하는 HTML로 설정한다는 의미.
<html lang="ko">
html의 언어 기본설정을 한국어로 지정하는 내용이다.
기본값인 en으로 되어있는 경우가 많으므로, 항상 주의해둘 것
<meta charset=”UTF-8”>
html 파일의 인코딩을 알려주는 태그이다.
일반적인 경우 UTF-8을 사용한다는 점만 알아두자.
<meta http-equiv=”x-ua-compatible” content=”IE=Edge”>
IE(Internet Explorer)의 최신 표준 모드를 선택하는 문서 모드다.
현 시대에서 일반적으로 IE는 이제 사용되지 않지만, 호환성을 위해 주로 사용한다.
링크 표시하기
링크는 <a> 태그로 표시한다. 해당 태그에는 부가적인 태그가 존재한다.
_blank 새 탭에서 페이지 열기_target 페이지 열기
href 는 원하는 링크를 입력하면 된다. 아래의 예제를 참고하자.
...
<body>
<a href="https://github.com/yoyobar" target="_blank">새탭에서 페이지 열기</a>
<a href="https://github.com/yoyobar" target="_self">페이지 열기</a>
</body>
</html>
여기서 생성하는 href 는 다른 인터넷 링크뿐만아니라,
기존 프로젝트내에서의 이동도 가능하다.
즉 거대한 서비스를 만들고자 한다면 다양한 페이지로 구성해야 될텐데,
그를 위한 초석이라고 생각하면 간단하다.
목록 만들기
목록은 <ol> <ul> 로 구성되며, 내부 데이터는 <li> 로 구성된다.
<ol> 은 Order list의 줄임말로, 순차가 존재하는 데이터를 의미한다.
<ul> 은 Unordered list의 줄임말로, 순차가 존재하지 않는 데이터를 의미한다.
각각의 예시를 확인해보자
//orderList 를 인용한 예시
...
<body>
<ol>
<li> 복숭아 </li>
<li> 사과 </li>
<li> 바나나 </li>
</ol>
</body>
</html>
- 복숭아
- 사과
- 바나나
위에 있는 <ol>의 코드는 번호가 매겨져 나온다.
데이터가 순차적으로 존재하는 것이다.
추가적으로 start , type 속성을 인용하여 시작 번호와, 번호의 종류를 선택할 수 있다.
//unOrderList를 인용한 예시
...
<body>
<ul>
<li> 복숭아 </li>
<li> 사과 </li>
<li> 바나나 </li>
</ul>
</body>
</html>
<ul> 의 코드는 숫자가 아닌, 도트로 표기한 데이터로 나타나게 된다.
표 만들기
표는 열과 행의 대한 개념을 확실히 알고 가는게 좋다.
열(rows)은 세로로 세며 가로 값을 뜻한다. 줄을 뜻한다.
행(cols)은 가로로 세며 세로 값을 뜻한다. 기둥을 뜻한다.
표는 구성하는 요소가 많다.
|
<tr> | 행 생성 태그 |
<th> | 제목 생성 태그 |
<td> | 값 생성 태그 |
<caption> | 타이틀 제목 태그 |
<rowspan> | 가로 병합 |
<colspan> | 세로 병합 |
행, 세로 값을 늘리고자 한다면 <tr> 을 그만큼 늘리면 되는 것이다.
열, 가로 값을 늘리고자 한다면 <tr> 에 원하는 만큼 항목을 생성하면 되는 것이다.
또한, <tr> 은 <thead>, <tbody>, <tfoot> 로도 표기할 수 있는데,
이럴 경우 표를 직관적으로 이해하는데 더 도움을 줄 수 있다.
그리고 <table> 속성에 border 값을 주지 않을경우,
표가 더러워 보이니 외곽선을 잘 넣어주자
...
<body>
<table border="1">
<caption>
오늘의 할일
</caption>
<tr>
<th>제목</th>
<th>해야할 일</th>
<th>완료 여부</th>
</tr>
<tr>
<td>중요한 일</td>
<td>잠자기</td>
<td>X</td>
</tr>
</table>
</body>
</html>
이러한 표로 완성되는 모습을 확인 할 수 있다. 상기 코드에서 <tr> 은
<thead>, <tbody>, <tfoot>, 등 상황에 맞게 직관적인 태그를 달 수 있으니 참고할 것
rowspan과 colspan 으로 셀의 가로, 세로 병합도 가능하니 참고하자.
사용자에게 입력을 받는 태그로 대표적인 html태그는 <input> 태그다.
html이 발전함에 따라 다양한 종류가 늘어나기도 했지만,
각각 사용 방법이 조금씩 다르니 기록해보자.
<input id="id" type="text" placeholder="아이디를 입력하세요." />
<label for="id">아이디</label>
type="text" 의 경우 간단하게 입력하는 창이 나온다.
입력하는 창에 placeholder 를 통해 사용자가 직관적으로 알도록 한다.
label은 for 을 통해 각 데이터에 맞는 값을 입력한다.
|
text | text 타입 입력 | placeholder 사용가능 |
password | password 타입 입력, blind | placeholder 사용가능 |
email | email 타입 입력 | placeholder 사용가능 |
range | 조정 할 수 있는 bar를 생성 | |
checkbox | 체크 할 수 있는 box를 생성 | 다중 선택이 가능, name 태그로 서로 연동해두는게 중요 |
radio | 체크 할 수 있는 radio를 생성 | 다중 선택이 불가, name 태그로 서로 연동해두는게 중요 |
그외 입력태그
|
Select | 다중 확인이 가능한 목록 생성 | 자식 태그로 Option 를 사용하여 데이터를 늘림 |
fieldset | 입력폼을 묶는 상자 생성 | 현재 html에서는 주로 사용되진 않음 |
textarea | 자유롭게 입력할 수 있는 텍스트 box 생성 | 우측 끝을 잡아 사이즈를 수동 조정할 수 있음 |
progress | 진행도를 나타내는 bar 생성 | max 값을 설정하고, value 로 현재 값을 나타낸다. |
시맨틱 태그
HTML이 업데이트 됨에 따라, 협업에 용이하게
각각의 태그의 이름을 구별하기 쉽게 기능적으로 추가되었다.
직접 HTML을 작성할 때 이용한다면 HTML 가독성에 도움이 될 것이라고 판단된다.
<!-- 독립적인 컨텐츠 -->
<article></article>
<!-- 별도의 컨텐츠 -->
<aside></aside>
<!-- 추가 상세정보 -->
<details></details>
<!-- figure의 자막 -->
<figcaption></figcaption>
<!-- 설명이 붙는 독립 컨텐츠 -->
<figure></figure>
<!-- 맺음 말 -->
<footer></footer>
<!-- 머릿 말 -->
<header></header>
<!-- 주된 콘텐츠 -->
<main></main>
<!-- 네비게이션 링크 -->
<nav></nav>
<!-- 콘텐츠의 한 섹션 -->
<section></section>
<!-- detail의 헤더 -->
<summary></summary>
<!-- 강조할 시간 -->
<time></time>
댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.
