💭 서론
교육 18일차
오전은 어제와 같이 HTML 기초 수업을 했는데 HTML5에서 생긴 태그들을 새롭게 배워서 흥미로웠다!
✔️ HTML5의 문서 구조화
기존 HTML의 한계로 웹 문서 구조를 표현하는 태그가 없었다. <div> 태그나 <table> 태그로 구조화되어 보이게 작성했을 뿐이었다. 때문에 HTML 페이지의 소스를 보면 문서 구조를 파악하기가 불가능 했다.
문서 구조화의 이유
정보 탐색이 중요해진 시대가 되었고 사물인터넷으로 IT 장치들이 스스로 정보 검색하는 시대가 되었다. 따라서 검색 엔진이 좋아하는 웹 페이지 작성의 필요성이 대두되었다.
시맨틱 웹: 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹
기존 태그는 <p>, <div>, <h1> 등의 태그를 사용 했는데 문서의 구조나 의미 전달이 어려웠다. 이후 시맨틱 태그가 탄생 했는데 시맨틱 태그는 문서의 구조와 의미를 전달하는 태그를 말한다. 그 예로 <header>, <section>, <article>, <main> 등이 있다.
✔️ 시맨틱 태그
<header>
– 페이지나 섹션의 머리말 표현
– 페이지 제목, 페이지를 소개하는 간단한 설명
<nav>
– 하이퍼링크들을 모아 놓은 특별한 섹션
– 페이지 내 목차, '메뉴바'를 만드는 용도
<section>
– 문서의 장(chapter, section) 혹은 절을 구성하는 역할
– 일반 문서에 여러 장이 있듯이 웹 페이지에 여러 <section>가능
– 헤딩 태그(<h1>~<h6>)를 사용하여 절 혹은 섹션의 주제 기입
<article>
- 본문과 연관 있지만, 독립적인 콘텐츠를 담는 영역
- 혹은 보조 기사, 블로그 포스트, 댓글 등 기타 독립적인 내용
- <article>에 담는 내용이 많은 경우 여러 <section>을 둘 수 있음
<footer>
– 꼬리말 영역, 주로 저자나 저작권 정보를 기입함
🔗 시맨틱 태그 써보기 실습
아래 html 파일을 시맨틱 태그를 이용해 수정하기
<html>
<head>
<title>Elvis Presley_1</title>
</head>
<body>
<div>
<div id="header">
<h1><a href="https://www.facebook.com/elvis">Elvis Presley</a></h1>
</div>
<div id="container">
<div>
<div id="post-1">
<h2><a href="https://ko.wikipedia.org/wiki/엘비스_프레슬리">
Who is Elvis?</a></h2>
<div class="entry">
<p>엘비스 프레슬리는 20세기 가장 잘 알려진 미국 가수 중 한
명이었다. 하나의 문화 아이콘으로, 엘비스의 음악들은
세계적으로 선풍적인 인기를 끌었으며 "로큰롤의 제왕"으로
불리곤한다. 그는 미시시피 주의 투펄로에서 태어났다.</p>
</div>
</div>
<div id="post-2">
<h2><a href="http://www.biography.com/people/elvis-presley-9446466">
His music and life</a></h2>
<div class="entry">
<p>Presley received his first guitar as a gift
from his mother on his 11th birthday in 1946
and had his first taste of musical success
a few years later when he won a talent show
at Humes High School in Memphis. </p>
</div>
</div>
</div>
<div>
<a href="">« Previous Entries</a>
</div>
</div>
<div id="navigation">
<ul>
<li><h2>Archives</h2>
<ul>
<li><a href="http://www.elvisthemusic.com/">Elvis The Music</a></li>
<li><a href="http://www.graceland.com/">Elvis Home Graceland</a></li>
<li><a href="http://www.last.fm/music/Elvis+Presley">Free Listening, Video</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2015 Elvis</p>
</div>
</div>
</body>
</html>
완성 html
<!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>Elvis Presley_2</title>
</head>
<body>
<header id="header">
<h1>
<a href="https://www.facebook.com/elvis">Elvis Presley</a>
</h1>
</header>
<section>
<article id="post-1">
<h2>
<a href="https://ko.wikipedia.org/wiki/엘비스_프레슬리">
Who is Elvis?
</a>
</h2>
<div class="entry">
<p>
엘비스 프레슬리는 20세기 가장 잘 알려진 미국 가수 중 한
명이었다. 하나의 문화 아이콘으로, 엘비스의 음악들은
세계적으로 선풍적인 인기를 끌었으며 "로큰롤의 제왕"으로
불리곤한다. 그는 미시시피 주의 투펄로에서 태어났다.
</p>
</div>
</article>
<article id="post-2">
<h2>
<a href="http://www.biography.com/people/elvis-presley-9446466">
His music and life
</a>
</h2>
<div class="entry">
<p>Presley received his first guitar as a gift
from his mother on his 11th birthday in 1946
and had his first taste of musical success
a few years later when he won a talent show
at Humes High School in Memphis.
</p>
</div>
</article>
</section>
<nav id="navigation">
<ul>
<li><h2>Archives</h2>
<ul>
<li><a href="http://www.elvisthemusic.com/">Elvis The Music</a></li>
<li><a href="http://www.graceland.com/">Elvis Home Graceland</a></li>
<li><a href="http://www.last.fm/music/Elvis+Presley">Free Listening, Video</a></li>
</ul>
</li>
</ul>
</nav>
<footer id="footer">
<p>Copyright 2015 Elvis</p>
</footer>
</body>
</html>
html5의 header, section, article, nav, footer를 사용해 구조화 하였다. 위와 같이 구조가 나뉘게 된다.
✔️ 시맨틱 태그 사례
1. 시맨틱 블록 태그
<figure>
- 책이나 보고서 등 본문에 삽입하는 사진, 차트, 삽화 등을 통상적으로 '그림'으로 표현한다.
<details>, <summary>
- <details>: 상세 정보를 담음
- <summary>: <details>로 구성되는 블록의 제목을 표현함
<details>
<summary>Q1</summary>
<p>뿅</p>
<p>뿅2</p>
</details>
Q1을 클릭하면 뿅과 뿅2가 보여짐
2. 시맨틱 인라인 태그
<mark>
- 중요한 텍스트임을 표시한다. 형광펜 느낌
<p>시맨틱 인라인 태그 중 mark 태그는 <mark>형광펜 효과</mark>를 합니다.</p>
<time>
- 텍스트의 내용이 시간임을 지정한다.
- datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있다. (표기법)
<p>콘서트는 <time datetime="18:00">오후 6시</time>에 시작됩니다.</p>
<meter>
- 주어진 범위나 데이터량을 표시함
- 어떤 통계에 대한 막대 그래프를 표현하고자 할 때 사용
<label for="level">10%:</label>
<meter id="level" max="100" value="10"></meter><br>
<label for="level">50%:</label>
<meter id="level" max="100" value="50"></meter><br>
<label for="level">70%:</label>
<meter id="level" max="100" value="70"></meter><br>
<label for="level">100%:</label>
<meter id="level" max="100" value="100"></meter>
위 코드에서 min 값은 0이라 작성을 생략하였고 지정한 max 값에 따라 지정한 value 값이 칠해지는(?) 범위가 달라진다.
<progress>
- 진행 정도를 나타냄
- meter 태그는 min 값을 지정할 수 있지만 progress 태그는 min 값은 0으로, 따로 지정할 수 없다.
<progress value="50" max="100"></progress>
💡 meter 태그와 progress 태그
두 태그는 보여지는 기본 디자인만 다를 뿐 비슷해보인다. 차이점이 뭔지, 어떠한 경우에 무슨 태그를 써야하는건지 찾아보았따.
HTML 문서에 따르면 progress 태그는 특정 작업의 "진행상황"을 나타낼 때 가장 적합하고 meter 태그는 디스크 공간이나 메모리 사용량과 같은 작업과 관련 없는 측정에 가장 적합하다고 한다.
✔️ 폼 form 관련 태그
<datalist>
datalis는 input 요소의 옵션을 정의한다. 텍스트보다 사진으로 보면 쉽게 와닿는다.
위처럼 사용자가 어떤 값을 입력할 때 '보기' 같은 요소라고 할 수 있다.
오른쪽 사진처럼 자동완성 기능도 지원한다!
<form action="#">
가고 싶은 나라:
<input type="text" list="contries">
<datalist id="contries">
<option value="미국"></option>
<option value="브라질"></option>
<option value="런던"></option>
<option value="파리"></option>
<option value="파키스탄"></option>
</datalist>
</form>사용하기 위해선 위처럼 input 태그의 list 속성의 값과 연결할 datalist의 id 값을 동일하게 입력해야 한다.
그리고 datalist 태그 안에 option 태그로 값을 정의해주면 된다.
✔️ netlify로 웹 배포하기
html과 css만으로 만들어진 정적 웹 사이트를 손쉽게 배포할 수 있다.
우선 레포지토리를 생성하고, 배포할 페이지 html을 레포지토리에 올린다.
** 레포지토리는 꼭 public이어야한다!
해당 레포지토리의 설정에 들어가서 Pages 탭의 Branch가 처음엔 None으로 설정되어있다. main 브랜치로 바꿔주자.
netlify에 회원가입을 해야하는데 나는 깃허브 계정으로 가입했다.
회원가입 하면서 개인인지 기업인지, 뭐에 쓸건지 등 체크하는게 있는데 빠르게 빠르게 클릭해주자.
회원가입이 완료 됐으면 이런 페이지로 넘어갈텐데 연동할 레포지토리를 선택한다.
잠시 로딩이 되고 이런 모달이 뜬다. Get started를 누른다.
그럼 이렇게 사이트가 생성된게 보인다! 사진 속 썸네일 눌러 이동한다.
이렇게 페이지 정보(?)가 보여지는데 초록색 링크가 배포 완료된 사이트 링크이다.
근데 너무 수상하게 생겼으니... Site settings 버튼을 눌러 url을 바꿔주자.
위 경로로 사이트명이 수정되었다. 뒤에 netlify.app이 붙긴 하지만.. 찾아보니 없앨 수도 있는 것 같기도..?
강사님께서 재밌는 사이트를 알려주신다 ㅎㅎ
✔️ 셀렉터
1. 요소 A > 요소 B
부모 요소 A의 안에 있는 요소 B를 모두 선택한다.
(생략)
<style>
div>p {
color: red;
}
</style>
(생략)
<body>
<div>
<p>안녕하세요?</p>
<strong>selector 예제입니다.</strong>
<p>Hello CSS!!</p>
</div>
<p>Hello HTML5!!</p>
</body>- div 요소가 부모인 모든 p 요소를 선택한다.
2. 요소 A 요소 B
요소 A 안에 있는 모든 요소 B를 선택한다.
(생략)
<style>
div strong {
color: red;
}
div>strong {
color: palevioletred;
}
</style>
(생략)
<body>
<div>
<p>오오</p>
<strong>vellalog</strong>
<p>안녕하세요?</p>
<strong>selector 예제입니다.</strong>
<p>Hello CSS!!</p>
<section>
<p>Hello
<strong>HTML5!!</strong>
</p>
</section>
</div>
</body>- div 요소 안에 있는 모든 strong 요소를 찾아 글씨 색을 red로 바꿔줌
'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글
| 블록체인 비교사례법, 가치평가 실습 (0) | 2023.05.31 |
|---|---|
| 블록체인 세그윗, 월드코인, 계정 추상화 (0) | 2023.05.30 |
| HTML 기초 (2) | 2023.05.25 |
| 솔리디티 기초: 예외처리, 상속, 오버라이드 (0) | 2023.05.23 |
| 솔리디티 기초: 자료형, 변수, 함수, 모디파이어 (0) | 2023.05.22 |
댓글