본 내용 정리는 구름 에듀 김버그님의 강의를 참고하였습니다.
김버그의 HTML은 재밌다 — 기초부터 실무 레벨까지 - 구름EDU
웹 개발의 시작인 HTML, 탄탄한 개념이해부터 실습까지 한 강의로 끝내기! 실무 가능한 실력으로 😎
edu.goorm.io
<iframe> : src attr값에 해당하는 페이지 삽입 ex) youtube embed share
<abbr> : title attr 값의 약어 => title 값은 해당 단어의 의미를 표시함
<address> : 연락처 정보 마크업(물리적 주소, 링크, 전화번화, 이메일)
<pre> : 내부 작성한 문자열대로 출력
<code> : code 작성
<!DOCTYPE html> : HTML5로 작성된 문서임을 명시
<html>
<head> : 해당 문서에 대한 정보를 포함
<meta>
name= viewport : 디스플레이의 크기
author : 작성자
keywords : 키워드를 통한 검색 보조
description : 페이지에 대한 설명
content= : name attr에 대한 내용
<body> : 제목, 문단이 포함 ( <h>, <p>)
<title> : html 문서의 대제목 - 검색 최적화
! 키워드 단순 나열 x
! 페지이마다 그에 맞게 변경
! 함축적인 설명
<link> : css stylesheet 첨부
<style> : html 문서 내에서 css 코드를 작성할 때 사용
<script>: javaScript 파일을 적용 - js 파일을 서버에서 받아올 경우 오래 걸릴 수 있으므로, head에서 작성할 경우 모든 html 문서가 js 파일이 로드될 때까지 기다리게됨
=> body 내에서 가장 마지막 부분에 선언하는 것이 좋음
<!--미디어 태그 실습
<audio controls>
<source src="./assets/audios/kimbug.mp3" type="audio/mpeg"/>
<source src="./assets/audios/kimbug.wav" type="audio/wav"/>
<source src="./assets/audios/kimbug.ogg" type="audio/ogg"/>
<p>헤헤...</p>
</audio>
<video controls>
<source src="./assets/videos/kimbug.mov" type="video/mp4">
<source src="./assets/videos/kimbug.mp4" type="video/mp4">
</video>
-->
<!--기타 태그 실습
<p>너.. 혹시 <abbr title="Attention Deficit Hyperactivity Disorder">ADHD</abbr>니?</p>
<address>
<h1>
김버그
</h1>
<a href="https://youtube.com/c/kimbug">
</a>
</address>
<pre>
집
가고싶다
</pre>
-->
<!--!DOCTYPE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김버그의 버그 없는 htmll & css</title>
<link href=<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'>>
</head>
<body>
<h1>kimbug</h1>
<script src="./app.js"></script>
</body>
</html>
-->
<!--테이블 태그 심화 실습-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>표 Table (2) - 심화</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1교시</th>
<td rowspan="2">왕초보 HTML & CSS</td>
<td>모각코</td>
<td rowspan="2">왕초보 HTML & CSS</td>
<td>모각코</td>
<td rowspan="2">왕초보 HTML & CSS</td>
</tr>
<tr>
<th scope="row">2교시</th>
<!--<td rowspan="2">왕초보 HTML & CSS</td>-->
<td rowspan="2">JavaScript 스킬업</td>
<!--<td rowspan="2">왕초보 HTML & CSS</td>-->
<td rowspan="2">JavaScript 스킬업</td>
<!--<td rowspan="2">왕초보 HTML & CSS</td>-->
</tr>
<tr>
<th scope="row">3교시</th>
<td>JavaScript 시작반</td>
<!--<td rowspan="2">JavaScript 스킬업</td>-->
<td>JavaScript 시작반</td>
<!--<td rowspan="2">JavaScript 스킬업</td>-->
<td>JavaScript 시작반</td>
</tr>
<tr>
<th colspan="6" scope="row">점심시간</th>
</tr>
<tr>
<th scope="row">4교시</th>
<td>SASS 기초반</td>
<td rowspan="2">HTML & 포트폴리오반</td>
<td rowspan="2">Open Seminar</td>
<td rowspan="2">HTML & 포트폴리오반</td>
<td>SASS 기초반</td>
</tr>
<tr>
<th scope="row">5교시</th>
<td>모각코</td>
<!--<td rowspan="2">HTML & 포트폴리오반</td>-->
<!--<td rowspan="2">Open Seminar</td>-->
<!--<td rowspan="2">HTML & 포트폴리오반</td>-->
<td>모각코</td>
</tr>
</tbody>
</table>
</body>
</html>
style.css
/* 16-table-1 */
/*
* {
margin: 0;
box-sizing: border-box;
letter-spacing: -0.03em;
}
html {
font-family: "SpoqaHanSans";
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
}
table {
border: 1px solid #000;
border-collapse: collapse;
}
td,
th {
white-space: nowrap;
vertical-align: center;
text-align: center;
font-size: 13px;
}
th {
padding: 4px 12px;
}
td {
padding: 12px 24px;
font-size: 12px;
}
thead {
background-color: #000;
color: #fff;
}
tbody th {
background-color: #1f2d3d;
color: #fff;
}
tbody th[colspan="6"] {
padding: 10px;
padding-left: 55px;
background-color: #f9fafc;
color: #1f2d3d;
}
td.html-css-basic {
color: #1fb6ff;
}
td.js-basic {
color: #ffc82c;
}
td.js-skillup {
color: #592dea;
}
td.sass-basic {
color: #ff16d1;
}
td.coding {
color: #ff5216;
}
td.portfolio {
color: #13ce66;
}*/
'Programming > html-css' 카테고리의 다른 글
| CSS 정리 (0) | 2020.06.26 |
|---|---|
| html 작성 tip 정리 (0) | 2020.06.04 |
| html tag 정리 - 1 (0) | 2020.06.03 |
댓글