block 🆚 inline
block
- 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지
- 언제나 새로운 줄에서 시작
- 이전 / 이후 요소 사이에 줄 바꿈이 일어남
- 블록요소는 인라인 요소 안에 중첩 X / 인라인요소는 블록 요소 안에 중첩 O
<!-- O -->
<div>
블록요소 안
<span>인라인요소 중첩 가능</span>
</div>
<!-- X -->
<span>
인라인요소 안
<div>블록요소 중첩 불가능</div>
</span>
inline
- 항상 블록 레벨 요소 내에 포함
- 컨텐츠에 따라 할당된 공간만 차지
- 새로운 줄을 만들지 않음
- width / height는 크기 지정 X
- padding, border, margin 속성은 사용 O / 상하 margin 속성은 사용 X
inline-block
- 인라인 속성을 따르면서 너비와 높이 조절 가능
◽ 전후 줄바꿈없이 한 줄에 다른 요소들과 나란히 배치
◽ 너비와 높이 지정 및 margin, paddign 상하간격 지정 가능
- button, input, select
block / inline / inline-block 차이
| block | inline | inline-block | |
| 포함할 수 있는 요소 | 인라인 요소 포함 가능 | 블록요소 포함 X (a 태그만 가능) |
인라인 요소 포함 가능 / 블록요소 포함 X (a 태그만 가능) |
| 줄바꿈 여부 | O (세로로 쌓임) | X (가로로 쌓임) | X (가로로 쌓임) |
| width, height 지정가능여부 | O | X | O |
| padding | O | O | O |
| margin | O | △ (left, right만 적용 O / top, bottom 적용 X) |
O |
| border | O | O | O |
div / span
div
- 블록 요소
- 영역을 구분짓거나 무리를 짓는 태그로 광범위하게 사용되는 태그
- 웹사이트의 레이아웃을 만들 때 사용
- SEO, 코드가독성, 접근성 등에 도움을 주는 태그 X
- 공간을 나누는 (정리를 도와주는) 역할
- 스타일 적용을 위한 용도로 사용할 것을 권장함
span
- 인라인 요소
- 스타일을 적용하거나 인라인 요소를 묶을 때 사용
<p>
이건
<span style="background-color: red">span</span> 태그입니다.
</p>
<p>
이런식으로
<span style="font-weight: bold">사용</span> 합니다.
</p>콘텐츠 카테고리
플로우 콘텐츠 (Flow Content)
- 특징
◽ 대부분의 HTML 요소를 포함
◽ 다른 콘텐츠 모델과 혼합 가능
- 예시
◽ <div> / <p> / <a> / <table> / <header> / <footer> / <article> / <section> 등
대화형 콘텐츠 (Interactive Content)
- 특징
◽ 사용자가 상호작용할 수 있는 요소들을 포함
◽ 사용자가 클릭, 입력, 선택 등 상호작용할 수 있는 요소
- 예시
◽ <a> / <button> / <input> / <select> / <textarea> / <details> / <label>
구획 콘텐츠 (Sectioning Content)
- 특징
◽ 문서의 구조를 정의하고, 섹션을 나누는 데 사용
◽ 문서의 아웃라인에 영향을 미친
- 예시
◽ <article> / <aside> / <nav> / <section> / <header> / <footer>
제목 콘텐츠 (Heading Content)
- 특징
◽ 섹션의 제목을 정의
◽ 문서의 구조를 이해하는 데 중요한 역할
- 예시
◽ <h1> / <h2> / <h3> / <h4> / <h5> / <h6>
구문 콘텐츠 (Phrasing Content)
- 특징
◽ 텍스트와 인라인 요소를 포함
◽ 텍스트의 의미와 구조를 정의하는 데 사용
- 예시
◽ <span> / <a> / <em> / <strong> / <img> / <abbr> / <code> /
◽ <kbd> / <mark> / <small> / <sub> / <sup> / <time> / <var>
내장 콘텐츠 (Embedded Content)
- 특징
◽ 외부 소스의 콘텐츠를 포함
◽ 외부 파일이나 리소스를 문서를 포함하는 요소
- 예시
◽ <img> / <audio> / <video> / <iframe> / <embed> / <object> / <source> / <track>
메타데이터 콘텐츠 (Metadata Content)
- 특징
◽ 문서의 메타데이터를 정의하는 요소
◽ 문서의 정보나 설정을 정의 / 보통 <head> 요소 내에 위치
- 예시
◽ <base> / <link> / <meta> / <noscript> / <script> / <style> / <title>
- 메타데이터(Metadata) : 일반적으로 데이터에 관한 구조화된 데이터
이미지
img
<img src="" alt="" />- src에는 경로를 넣고
- alt에는 대체 텍스트로 이미지에 대한 설명을 넣음
◽ src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 내용을 보여줌
◽ 시각장애인을 위한 스크린리더를 지원
◽ 이미지가 단순히 페이지를 꾸미는 용도라면 alt=" "처럼 빈 값으로 둠
area, map
<map name="map">
<area shape="rect" coords="10,20,100,80" href="location1.html" alt="위치 1">
<area shape="circle" coords="200,150,25" href="location2.html" alt="위치 2">
</map>- map은 이미지 맵을 정의하는 태그
- area는 이미지 맵 내의 클릭가능한 영역을 정의하는 태그
figure, figcaption
- 주변 콘텐츠의 이해나 흐름과 관련된 이미지, 그림, 도표, 사진, 코드 목록 또는 기타 관련 콘텐츠 등의 독립된 콘텐츠를 나타내는 시멘틱한 태그
- 콘텐츠가 페이지의 다른 내용과 관련이 있음을 나타내지만, 그 콘텐츠가 없어도 페이지의 주요 흐름에는 영향이 미치지 않음
- <figcaption> 태그를 사용해서 콘텐츠를 참조할 수 있는 캡션(설명) 추가 가능
img 태그만 사용해야 하는 경우
1. 단순히 이미지를 표시할 때 (내용과 관계없는 이미지)
2. 본문의 일부로 이미지가 꼭 필요할 때
이미지 생략이 가능하다면 <figure> 태그를 사용
이미지를 넣어야 한다면 <img> 태그를 사용
[실습] About Me 페이지 만들기
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ABOUT ME:]</title>
</head>
<body>
<h1>HYONNII KIM</h1>
<img src="emoji.png" width="350px" alt="김효원이모지" />
<h2>장점</h2>
<ul>
<li>주어진 일에 열심히 합니다!</li>
<li>분위기에 잘 화합합니다:]</li>
</ul>
</br>
<h2>고쳐야할 점</h2>
<ul>
<li>낯을 많이 가려요.. 하지만 친해지면 그 누구보다 말을 잘 합니다!</li>
<li>한 가지 일에 몰두하면 그 일만 파야하는 습관을 가지고 있어요!</li>
</ul>
</br>
<h2>SNS</h2>
<ul>
<li>
<a href="https://hyoniikim.github.io/hyonii_log/" target="_blank"
>github</a
>
</li>
<li>
<a href="https://hyoddaengzzi.tistory.com/" target="_blank">BLOG</a>
</li>
<li>
<a
href="https://www.notion.so/hxwon10127/bbd98390013e4383b210aa52ea5e2f0b"
target="_blank"
>notion</a
>
</li>
</ul>
</body>
</html>
표 (table)
table
- 테이블을 생성할 때 사용
- <table>은 테이블 데이터의 컨테이너 요소
- <table> </table> 내에는 <tr> / <th> / <td> 태그를 사용
<table>
</table>
th
- table header
- 테이블의 행, 열의 제목을 나타냄
tr
- table row
- 테이블의 행
td
- table data
- 셀 내용
caption
<table>
<caption>설명</caption>
<!-- 생략 -->
</table>- 테이블의 제목이나 설명을 의미
- table의 1번째 자식으로 사용해야 함
thead / tbody / tfoot
- 구역을 나누는 요소
- 선택적 요소 / 코드의 가독성을 위해 명시적으로 사용
- <thead>
◽ 테이블 행 블록 내에 제목 열 그룹으로 구성할 경우 사용
- <tbody>
◽ 테이블 행 블록 내에 테이블 데이터로 구성할 때 사용
- <tfoot>
◽ 테이블 행 블록 내에 열 요약으로 구성할 때 사용
colgroup
- 테이블 열 그룹을 만들고 싶을 때 사용
col
- 테이블 열을 하나 이상 묶을 때 사용
- colgroup 요소 내부에 포함
- 선택적으로 사용
속성값
scope
- <th>태그에 사용하여 테이블의 헤더 셀이 어떤 행이나 열에 속하는지를 명확하게 지정하는 역할
- 접근성 도구 (스크린리더 등)가 테이블의 구조를 더 잘 이해할 수 있게 해줌
- 행(row) 또는 열(col), 행그룹(rowgroup), 열그룹(colgroup)의 속성값으로 셀의 범위를 지정
◽ scope="col" : 열 헤더를 정의
◽ scope="row" : 행 헤더를 정의
◽ scope="colgroup" : 열 그룹 헤더를 정의
◽ scope="rowgroup" : 행 그룹 헤더를 정의
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>scope 보충</title>
<style>
table {
border-collapse: collapse;
border: 3px solid #000;
table-layout: fixed;
width: 100%;
}
caption {
caption-side: bottom;
margin-top: 20px;
}
th,
td {
border: 1px solid #000;
padding: 6px 20px;
}
th {
background-color: #eee;
}
td {
text-align: center;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="colgroup" colspan="4">오르미 강사 개인정보</th>
</tr>
<tr>
<th scope="col">강의 시수 구분</th>
<th scope="col">이름</th>
<th scope="col">나이</th>
<th scope="col">거주지</th>
</tr>
<tr>
<th scope="rowgroup" rowspan="2">보조강사</th>
<td scope="row">Rosy</td>
<td>52</td>
<td>브리즈번</td>
</tr>
<tr>
<td scope="row">ZeeZee</td>
<td>18</td>
<td>제주</td>
</tr>
<tr>
<th scope="rowgroup" rowspan="2">주강사</th>
<td scope="row">Licat</td>
<td>35</td>
<td>도쿄</td>
</tr>
<tr>
<td scope="row">Wade</td>
<td>28</td>
<td>파리</td>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
colspan / rowspan
- 셀 병합 속성
- colspan : 열 병합
- rowspan : 행 병합
[실습] HTML Table 태그 예제
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>HTML Table 태그 예제</h1>
<table>
<caption>
학생 성적표
</caption>
<thead>
<tr>
<th>학생</th>
<th>영어</th>
<th>수학</th>
</tr>
</thead>
<tbody>
<tr>
<td>라이캣</td>
<td>100</td>
<td rowspan="2">90</td>
</tr>
<tr>
<td>로지</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>평균</td>
<td colspan="2">90</td>
</tr>
</tfoot>
</table>
</body>
</html>
[해보기] 표만들기
<!DOCTYPE html>
<html lang="ko-KR">
<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</title>
<style>
table {
border-collapse: collapse;
border: 3px solid #000;
table-layout: fixed;
width: 100%;
}
caption {
caption-side: bottom;
margin-top: 20px;
}
th,
td {
border: 1px solid #000;
padding: 6px 20px;
}
th {
background-color: #eee;
}
td {
text-align: center;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>2023 학년도 대학수능능력시험 성적통지표</caption>
<!--caption부분이 아래에 있다고 아래에 배치 x -> css에서 bottom으로 위치조정-->
<thead>
<tr>
<th>구분</th>
<th scope="col" rowspan="2">한국사 영역</th>
<th scope="col">국어 영역</th>
<th scope="col">수학 영역</th>
<th scope="col" rowspan="2">영어 영역</th>
<th scope="colgroup" colspan="2">탐구 영역</th>
<th scope="col">제 2 외국어</br>/한문 영역</th>
</tr>
<tr>
<th scope="row">선택과목</th>
<th scope="col">화법과 작문</th>
<th scope="col">확률과 통계</th>
<th scope="col">생활과 윤리</th>
<th scope="col">지구과학1</th>
<th scope="col">독일어</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">표준점수</th>
<td rowspan="2"> </td>
<td>131</td>
<td>137</td>
<td rowspan="2"> </td>
<td>53</td>
<td>64</td>
<td rowspan="2"> </td>
</tr>
<tr>
<th scope="row">백분위</th>
<td>93</td>
<td>95</td>
<td>75</td>
<td>93</td>
</tr>
</tbody>
<tfoot>
<th scope="row">등급</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tfoot>
</table>
</body>
</html>
출처 - 위니브(Weniv)
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240611 HTML-05 (0) | 2024.06.25 |
|---|---|
| [EST] 240610 HTML-04 (0) | 2024.06.25 |
| [EST] 240607 HTML-03 (0) | 2024.06.24 |
| [EST] 240604 HTML-01 (0) | 2024.06.24 |
| [EST] 240603 인터넷 VS 웹 (0) | 2024.06.24 |
