🎓 HTML Hyper Text Markup Language
<!DOCTYPE html>
<html>
<head>
<title>제목 입력</title>
</head>
<body>
...
</body>
</html>html 기본 문법으로 <head> 태그 안에는 웹 페이지에 직접적으로 나타나지 않는 title, char set, style, scripts 같은 메타 데이터(data about data)를 입력하고, <body> 태그 안에 페이지 안에 직접적으로 드러나는 내용을 작성한다.
🎓 head 태그 안에 들어가는 것들 <head>😚</head>
| <title> | 문서의 제목을 정의 |
| <base> | 페이지의 모든 링크에 대한 default address나 default target을 정의 |
| <link> | html 문서와 외부 resource 간의 관계를 정의 |
| <meta> | html 문서에 대한 메타 데이터를 정의 |
| <script> | cleint-side 자바 스크립트를 정의 |
| <style> | 내부 스타일 시트 |
<title>
<title>페이지의 제목</title>문서의 제목을 정의하는 태그로, html 파일 오픈 시 페이지 탭에 나타나는 제목이 된다. 텍스트만 입력해야 한다.
<style>
<style>
body {background-color: pink;}
<style>현재 html 페이지에 대한 스타일을 지정한다. (내부 스타일 시트)
인라인 스타일 시트: html 문서 안 <body> 태그 안, 각 라인에서 사용
내부 스타일 시트: html 문서 안 <head> 태그 안, <style> 태그 안에서 사용
외부 스타일 시트: css 문서 안에서 정의되어 html 파일에 link 됨
*적용 우선 순위: 인라인 > 내부 > 외부
<link>
<link rel="stylesheet" href="css.css">보통 외부 스타일 시트를 불러오기 위해 사용되어 rel에는 불러온 외부 문서의 역할을, href에는 불러온 외부 문서의 이름(경로)를 명시한다.
🎓 body 태그 안에 들어가는 것들 <body>😚</body>
들어가기 전에!
HTML 태그는 크게 element, start tag, content, end tag로 나뉘고 start tag는 element와, element의 attribute name과 value를 포함한다.
<p class="rom">this is a paragraph</p>- element(요소): <p class="rom">this is a paragraph</p>
- start tag(시작 태그): <p>
- attribute name(속성 이름): class
- attribute value(속성 값): rom
- end tag(종료 태그): </p>
HTML 요소(element)
시작 태그부터 종료 태그까지 전부를 HTML 요소라고 한다. 모든 요소는 속성을 가질 수 있다.
HTML 속성(attribute)
속성은 요소에 대해 추가 정보를 제공하기 위해 사용된다. 항상 시작 태그에 지정되어 일반적으로 attribute name(속성 이름)="attribute value"(속성 값)의 형식으로 사용된다.
🎓 기본적인 HTML 태그들
이번 실습을 진행하면서 자주 사용한 정말 기본적인 태그들을 모아 정리해본다.
| <!-- --> | <!--주석 태그로 여기에 작성하면 웹 페이지에 나타나지 않는다--> |
| <h1>~<h6> | <h1>이 태그는 문서의 제목을 나타낸다 h1이 제일 크고 h6이 제일 작다</h1> |
| <p> | <p>단락 태그로 사용 시 줄바꿈, 행간이 적용된다</p> |
| <br> | 줄바꿈 태그로 닫는 태그 없이 단독 사용 |
| <ol><li> | <ol><li>ordered list </li></ol> |
| <ul><li> | <ul><li>unorderd list</li></ul> |
| <a> | <a href="https://romcanrom.tistory.com/">하이퍼링크를 정의한다</a> |
| <img> | <img src="/rom/img.jpg" alt="이미지"> 형식으로 사용되어 src에 이미지의 경로, alt의 대체 텍스트를 명시한다 |
| <table> | <table>...</table> 하나 이상의 <tr>,<th>,<td>로 구성되어 테이블을 생성한다. |
| <tr> | <tr>테이블의 행(=rows=가로 항목)을 생성한다</tr> |
| <th> | <th>테이블의 제목</th> |
| <td> | <td>tr로 생성된 테이블 행의 각 셀을 생성한다</td> |
| <form> | <form></form> |
| <input> | <input type="text" name="name"> 형식으로 사용되어 type의 속성 값에 따라 text/radio/checkbox 같은 여러 형식을 사용 가능하다. name의 속성값으로 나타내고 있는 것을 명시해준다. |
| <button> | <button>클릭할 수 있는 버튼을 삽입한다</button> |
| <textarea> | <textarea name="name" cols="10" rows="5"></textarea> 형식으로 사용되어 지정된 cols와 rows의 값을 가지는 텍스트 상자를 생성한다. |
| <span> | inline 박스 형식으로 줄바꿈이 되지 않고 width, height 속성도 적용 불가하다 |
여기서는 정말 기본적인 수준의 태그만 숙지하고 넘어가도록 하고, 다른 태그들은 필요할 때마다 찾아볼 수 있는 정리 잘 된 reference를 첨부해 대체한다.
html tag reference 1. (영어)
HTML Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
html tag reference 2. (한국어)
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
🎓 id와 class
id와 class는 html 요소에 시작 태그 안에서 지정되어 사용될 수 있다.
id
<h1 id="may">5월 1일입니다</h1>id는 html 문서 안에서 하나의 유일한 값을 가진다. 즉, 중복을 허용하지 않는다. 이런 이유로 id는 유일해야 하는 속성을 표기할 때 사용된다.
class
<ul>
<li class="fruits">딸기</li>
<li class="fruits">바나나</li>
<li class="fruits">수박</li>
</ul>class는 html 문서 안에서 동일한 기능을 하는 요소들을 묶어줄 때 사용한다. 때문에 후에 css를 적용시킬 때 한번의 선택으로 동일한 기능의 요소들에 같은 스타일을 적용시킬 수 있으므로 편리하다.
'diary > codestates (be39)' 카테고리의 다른 글
| [CSS] 박스 모델 (0) | 2022.05.01 |
|---|---|
| [CSS] CSS Selectors (0) | 2022.05.01 |
| 04/29/22 [pair programming] Oven으로 와이어프레임, HTML과 CSS로 목업 만들어보기 (0) | 2022.04.30 |
| 04/28/22 [HTML/CSS] flexbox로 레이아웃 만들어보기 (0) | 2022.04.28 |
| 04/27/22 [HTML&CSS 찍먹 후기] *** 보노보노는 태어나는 것이 아니라 만들어지는 것이다 (0) | 2022.04.28 |
