[FE 기초]HTML 태그
백엔드 개발자 이지만 웹의 기초 중에 기초인 HTML,CSS, JS 가 어떤 식으로 동작하고 구성되는지 아는 것도 필요하다고 생각되었고 지금 듣는 KDT 과정에서도 일부 내용이 포함되어 있어 사전에 정리를 해보고자 한다
.
웹이 무엇인지 그리고 HTML 코드에 대한 내용은 다른 포스팅에서 정리했지만 이번 정리는 강의를 듣고 핵심 요소만 추려 새롭게 시리즈로 정리를 해보겠다.
웹(Web)과 HTML
웹(Web)과 HTML 백엔드, 프론트엔드 할 것 없이 웹개발 분야의 세부적인 개발 분야이다. 그렇기 때문에 웹의 이해 그리고 웹의 표준에 대해서 정리하고 HTML이 무엇인지 어떻게 사용하는지를 정리하
developer-dodo.tistory.com
1. 글꼴 태그
◼ <h1> ~ <h6>
Heading 이란 의미를 가지며 웹 페이지의 제목 또는 부제목에 사용
숫자가 작을수록 큰 제목을 의미한다.
◼ <p>
Paragraph 로 하나의 문단을 표시할 때 사용한다.
◼ <hr>
Horizontal Rule 이라는 뜻으로 가로로 선을 긋는 태그이며 종료 태그는 없다.
◼ <br>
Break 로 줄바꿈 태그이다. HTML 에서 개행의 의미를 가진다.
개행이기 때문에 문단인 <p> 와는 엄연히 다른 역할을 가지며 종료 태그는없다
◼ <i>
Italic 이라는 의미로 텍스트를 이텔릭체로 표시할 떄 사용한다.
◼ <em>
Emphasis로 이텔렉체로 텍스트를 강조 할때 사용한다.
이텔릭체로 하는 것은 <i> 와 동일하지만 강조를 한다는 점에서 다르게 사용
◼ <b>
Bold의 의미로 진하게 표시할때 사용한다.
◼ <strong>
Strong이란 의미로 텍스트를 진하게 강조 할때 사용한다
.
그럼 이텔릭체 사용/강조, 볼드 사용/강조의 차이가 무엇인지 한번 알아보자
👉 <b> vs <string> / <i> vs <em> 차이점
b태그와 strong 태그 모두 진하게 표시할 때 사용한며, i태그 em 태그 모두 결과는 동일하다.
하지만 중요한 것은 두 개의 사용 용도 이다.
b 태그와 i 태그는 단순하게 텍스트를 볼드 또는 이텔릭으로 표시하는 역할만 한다.
하지만 strong 태그와 em 태그는 실제로 페이지 내의 중요한 부분을 강조할 때 사용한다.
strong 태그와 em 태그를 용도에 맞게 사용하는 것이 웹 접근성에서 큰 기여를 가져온다.
예를 들어서 브라우저의 스크린 리더를 사용하는 경우 음성 합성 도구가 페이지를 읽어서 해석 시
strong 태그의 억양을 통해서 실제로 말할 때 강조하듯이 재구성이 가능하다.
즉 강조의 역할을 단순하게 텍스트 이외의 정보 또는 개발자가 코드를 볼떄 강조하고 싶은 부분 이었구나 등 그 용도의 의미를 전달할 수 있는 것이다.
스크린 리더란 시각 장애인이 컴퓨터를 사용할 때 정보들을 음성으로 출력하는 낭독 프로그램
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Font Tag</title>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<hr />
<h1>김치볶음밥</h1>
<p>
김치볶음밥은 한국의 대중적인 요리의 하나이자 볶음밥의 일종으로서 김치와
밥을 주재료로 프라이팬 등에서 볶은 요리다. 조리하기 편하고 간단하여,
한국의 음식점인 분식점에서 대부분 팔고 있는 음식이다.<br />
김치볶음밥은 김치와 밥을 주재료로 프라이팬 등에서 볶은 요리다.
</p>
<hr />
<h1>애국가</h1>
<h4>1절</h4>
<i>동해 </i><em>물과 백두산</em>이 마르고 닳도록<br />
하느님이 보우하사 우리나라 만세. <br />
무궁화삼천리 화려 강산 대한 사람, <br />
대한으로 길이 보전하세.<br />
<h4>2절</h4>
<b>남산</b> 위에 저 <strong>소나무</strong>, 철갑을 두른 듯<br />
바람 서리 불변함은 우리 기상일세<br />
무궁화 삼천리 화려 강산 대한 사람,<br />
대한으로 길이 보전하세.
<h4>3절</h4>
가을 하늘 공활한데 높고 구름 없이<br />
밝은 달은 우리 가슴 일편단심일세.<br />
무궁화 삼천리 화려 강산 대한 사람,<br />
대한으로 길이 보전하세.
<h4>4절</h4>
이 기상과 이 맘으로 충성을 다하여<br />
괴로우나 즐거우나 나라 사랑하세.<br />
무궁화 삼천리 화려 강산 대한 사람,<br />
대한으로 길이 보전하세.
</body>
</html>위 예시처럼 배운 다양한 태그를 사용하는 예시 코드인데 한번 VS code 와 같은 IDE로 실행시켜 보며 어떻게 확인 되는지 알아보자
2. 목록 태그
◼ <ol>
Ordered List 라는 의미
순서가 존재하는 목록을 사용할 때 숫자가 작을수록 큰 제목을 의미한다.
◼ <ul>
Unordered Lists
순서가 없는 목록을 표현할때 사용한다.
◼ <li>
목록의 하위 항목으로 사용되며 <ul> / <ol> 태그 하위에 위치한다.
◼ <dl>
Defintion List 로 정의 목록의 약자로 사전처럼 용어를 설명하는 목록을 만듭니다.
예) A는 C이다. 와 같은 Key, Value 구조에서 용이
◼ <dt>
Defintion Term 용어 정의 약자로, 정의되는 용어의 제목을 넣을 때 사용한다.
◼ <dd>
Defintion Description 정의 설명의 약자로, 용어를 설명하는데 사용
⛔ 주의사항
<dl> 태그는 하나 이상의 <dt>-<dd> 쌍을 가지고 있어야한다.
그러나 <dt>-<dd> 가 반드시 하나의 짝은 아니다.
예) <dt> 두개 <dd> 한개 구조도 가능하다.
<li> <dt>-<dd> 태그는 밖에서 독립적으로 사용 불가<ul> 태그 하위 요소로는 <li> 태그가 위치해야한다.
샘플코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List Tag</title>
</head>
<body>
<h1>계란후라이</h1>
<ol>
<li>개요</li>
<li>특징</li>
<li>조리법</li>
<li>영양소</li>
<li>각 국가의 계란 프라이</li>
<li>곁들여 먹기</li>
<li>매체</li>
<li>기타</li>
</ol>
<hr />
<h1>헬스 3대 운동</h1>
<ul>
<li>벤치프레스</li>
<li>데드리프트</li>
<li>스쿼트</li>
</ul>
<hr />
<h1>웹 개발 입문 과목</h1>
<dl>
<dt>HTML</dt>
<dt>Markup 언어</dt>
<dd>
Hyper Text Markup Language의<br />약자로 웹 문서를 만들기 위한
<strong>마크업 언어이다</strong>
</dd>
<dt>CSS</dt>
<dd>
Cascading Stype Sheet의 <br />약자로 HTML을 꾸미는 스타일 시트이다.
</dd>
<dt>JavaScript</dt>
<dd>
웹 페이지를 생동감 있게 동작 시키는 <br /><b>프로그래밍 언어</b> 이다.
</dd>
</dl>
</body>
</html>3. 표태그
table은 흔히 아는 아래 표와 같은형태를 의미한다.
| 이름 | 국어 | 수학 | 컴퓨터 |
| 홍길동 | 100 | 72 | 88 |
| 김도도 | 85 | 90 | 99 |
이 표 만드는 태그를 의미한다.
세로줄을 열 또는 컬럼, 가로줄을 행 또는 로우 라고 한다.
<table>, <tr> , <td> 3개의 태그를 가지며 각각 테이블, 행, 열을 의미한다.
👉 테이블 태그
◼ <table>
table로 표를 만드는 태그이다. 표전체를 감싸는데 사용된다
◼ <caption>
표의 제목이나 설명을 작성하는 태그
◼ <tr>
표의 행을 의미하는 태그, 자식으로 <th>나 <td> 태그가 반드시 있어야한다.
◼ <th>
표의 제목열을 의미하는 태그, 부모 태그인 <tr> 태그 안에 있어야함
◼ <td>
표의 일반열을 의미하는태그, 부모인 <tr> 태그 내부에 있어야함
👉 테이블 그룹 관련 태그
◼ <colgroup>
이름그대로 col 컬럼별로 묶는 태그이다.
즉 열을 그룹으로 묶을 수 있다.
◼ <col>
<colgroup> 태그이 자식 태그로 열 단위를 나눌 수 있다.
span 속성을 통해서 열을 그룹으로 묶을지 설정한다.
예) <col span = "3"> 이라면 3개의 열을 하나의 그룹으로 한다.
◼ <thead>
표의 제목열들을 묶는 그룹 태그
◼ <tbody>
표의 일반적인 데이터들을 묶는 그룹 태그
기본적으로 행 그룹 태글르 사용하지 않으면 크롬에서 자동으로 tbodt로 태그 묶어줌
◼ <tfoot>
표의 하단 영역을 묶는 태그 그룹
👉 테이블 태그 관련 속성
◼<table> 태그 속성
- border : 테이블이 갖고 있는 테이블과 셀 모두 선을 표시한다. 웹표준❌
- width : 테이블의 가로 너비 설정 웹표준❌
- cellpadding : 셀의 안족 여백으로 셀과 콘텐츠의 간격 설정 웹표준❌
- cellspacing : 셀의 바깥쪽 여백으로 셀과 셀간의 간격을 조절 웹표준❌
✅ table의 태그 속성은 XHTML1.0에서는 표준이자만 HTML5에서는 웹 표준이 아니다 → CSS 로 사용
◼<th> 태그 속성
- scope: 웹 접근성 관련 속성으로 스크린 리더가 데이터를 인식하는 순서를 결정
- th가 열에 쓰이는 경우 col로 지정 (<th scope = "col">)
- th가 행에 쓰이는 경우는 row로 지정 (<th scope = "row">)
◼<th>,<td> 공통
- colspan: 열을 병합하는 속성 → <td colspan="2">
- rowspan : 행을 병학하는 속성 → <td rowspan ="2">
✅ 여기서 병합을 할때 만약 tbody에서 병합하면 head, foot에는 적용 안된다, 즉 같은 영역에 있는 것에만 적용
◼<col>
- width : 열의 가로 너비를 지정 웹표준❌
- span : 열을 그룹화 → <col span ="3"> 3개의 열을 묶는다
예시 샘플
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Table tag</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 12px;
}
.col1 {
width: 80px;
}
.col2 {
background-color: bisque;
}
</style>
</head>
<body>
<h1>Table 기본</h1>
<table>
<caption>
프로필 테이블
</caption>
<tr>
<th>이름</th>
<th>취미</th>
<th>특기</th>
</tr>
<tr>
<th>홍길동</th>
<th>축구</th>
<th>농구</th>
</tr>
<tr>
<th>김도도</th>
<th>요리</th>
<th>코딩</th>
</tr>
</table>
<hr />
<h1>테이블 그룹 태그</h1>
<table>
<caption>
학습 점수
</caption>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
</colgroup>
<thead>
<tr>
<th>반</th>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
<th>코딩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1반</td>
<td>홍길동</td>
<td>90</td>
<td>80</td>
<td>70</td>
<td>60</td>
</tr>
<tr>
<td>김도도</td>
<td>95</td>
<td>85</td>
<td>75</td>
<td>65</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">평균</td>
<!-- <td>평균</td> -->
<td>92.5</td>
<td>82.5</td>
<td>72.5</td>
<td>62.5</td>
</tr>
</tfoot>
</table>
</body>
</html>
'FrontEnd' 카테고리의 다른 글
| [FE기초]CSS 다루기 (0) | 2024.04.25 |
|---|---|
| [FE기초] CSS 기초 (0) | 2024.04.25 |
| [FE기초] Head 태그 (0) | 2024.04.25 |
| [FE기초] Form 태그 (0) | 2024.04.24 |
| [FE기초]HTML 시맨틱 태그 (1) | 2024.04.19 |
