1. [과제] Table 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table 과제</title>
<style>
table, th, td {
border: 1px solid black; /* 두께, 선종류, 선색상 */
border-collapse: collapse; /* border 붙이기 */
}
th, td {
padding: 15px; /* 셀 안쪽의 컨텐트와 border 사이 여백 */
}
th {
text-align: left;
}
.task01{
border: 5px solid black;
}
</style>
</head>
<body>
<h1>과제 테이블1</h1>
<table style="width: 100%">
<tr>
<td rowspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h1>과제 테이블2</h1>
<table style="width: 100%">
<tr>
<td rowspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h1>과제 테이블3</h1>
<table style="width: 100%">
<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h1>과제 테이블4</h1>
<table class="task01">
<tr class="task01">
<td class="task01" colspan="2" rowspan="2" style="background-color: Tomato;"><br><br><br> </td>
<td class="task01" colspan="2" style="background-color: LemonChiffon"><br><br></td>
</tr>
<tr class="task01">
<td class="task01"><br><br></td>
<td class="task01"></td>
</tr>
<tr class="task01">
<td class="task01" rowspan="2" style="background-color: Black"> </td>
<td class="task01"> </td>
<td class="task01" colspan="2"></td>
</tr>
<tr class="task01">
<td class="task01"> </td>
<td class="task01" colspan="2" style="background-color: Navy"></td>
</tr>
</table>
</body>
</html>
[추가] 쌤이 선택한 학생의 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블 과제</title>
<style>
table, th, td {
border: 5px solid black; /* 두께, 선종류, 선색상 */
border-collapse: collapse; /* border 붙이기 */
height: 150px;
}
th, td {
padding: 30px; /* 셀 안쪽의 컨텐트와 border 사이 여백 */
}
.sq {
height: 1px;
width: 140px;
}
.sq2 {
width: 1px height:100px
}
.sq4 {
width: 1px;
height: 1px
}
#wi {
width: 1px;
}
</style>
</head>
<body>
<table
style="border-top: none; border-left: none; border-right: none; border-bottom: none; background-color: AliceBlue">
<tr>
<th class="sq" id="wi" colspan="2"
style="border-top: none; border-left: none;"></th>
<th class="sq" style="border-top: none;"></th>
<th class="sq" colspan="2"
style="background-color: yellow; border-top: none"></th>
<th class="sq4" rowspan="4"
style="border-top: none; border-right: none;"></th>
</tr>
<tr>
<td class="sq2" id="wi" style="border-left: none"></td>
<td class="sq2" rowspan="2" colspan="2"
style="background-color: #ff4000"></td>
<td class="sq2" colspan="2" style="background-color: yellow"></td>
</tr>
<tr>
<td class="sq2" id="wi" rowspan="2" style="border-left: none"></td>
<td class="sq2"></td>
<td class="sq2"></td>
</tr>
<tr>
<td class="sq" rowspan="2"
style="background-color: black; border-bottom: none"></td>
<td class="sq"></td>
<td class="sq" colspan="2"></td>
</tr>
<tr>
<td class="sq" id="wi"
style="background-color: yellow; border-left: none; border-bottom: none"></td>
<td class="sq" style="border-bottom: none"></td>
<td class="sq" colspan="2"
style="background-color: #000080; border-bottom: none"></td>
<td class="sq4"
style="background-color: #ff4000; border-right: none; border-bottom: none"></td>
</tr>
</table>
</body>
</html>
** 과제를 하면서 배운점과 시도해본것
1) CSS 와 Table에 대해 이해했다.
2) Internel 방식의 CSS 를 직접 사용해봤다.
3) Internel 방식의 CSS를 적용할때 id와 class를 부여하여 작성해봤다.
[추가] 쌤이 선택한 학생의 코드를 보면서 마지막 4번째 테이블의 크기를 조절하지 못해
br과  를 이용했는데 개별적으로 style을 적용하면서 크기 조절 가능함을 알 수 있었다.
2. Html12_List1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>List1</title>
</head>
<!--
<ul> Unordered List
<ol> Ordered List
style 적용시 '어느 element' 에 '어느 style' 을 적용시켜야 하는지 알아야 한다.
list-style-type 의 값은
disc(디폴트) / circle / square / none 이 있다
type 값은
1 숫자 (디폴트)
A 알파벳 대문자
a 알파벳 소문자
I 로무숫자 대문자
i 로마숫자 소문자
-->
<body>
<h2>Unordered List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr>
<h2>Unordered List + 'list-style-type'</h2>
<ul style="list-style-type: square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<hr>
<h2>Ordered List + 'type'</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr>
<h2>Description List</h2>
<dl>
<dt>Coffee</dt> <!-- Data term : 이름 -->
<dd>- black hot drink</dd> <!-- Data Description -->
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<hr>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
3. Html12_List2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>List2</title>
<style type="text/css">
ul {
list-style-type: none; /* disc 모양 없애기 */
background-color: #333333;
overflow: hidden;
}
li {
float: left; /* 줄바꿈 했던 li 를 일렬 + 좌측 정렬 */
}
li a{ /* > : 자식, 한 칸 띄기 : 자손 */
text-decoration: none;
padding: 16px;
color: white;
display: block;
}
li a:hover {
background-color: #111111; /* #000000 : 검정색, #FFFFFF : 흰색 */
}
</style>
</head>
<!-- 오늘날 웹에서 li, ol 은 메뉴 작성에도 많이 사용됨 -->
<body>
<ul>
<li><a href="https://www.naver.com">네이버</a></li>
<li><a href="https://www.daum.net">다음</a></li>
<li><a href="https://www.nate.com">네이트</a></li>
<li><a href="https://www.msn.com">MSN</a></li>
</ul>
</body>
</html>
4. Html13_Block_Inline.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Block & Inline</title>
</head>
<!--
'모~든' HTML elements 들은 display 스타일 값을 가지고 있다.
1. display: block
block 속성 elements 들은 '항상' 새 라인에서 시작하고
가용한 좌우폭을 다 차지한다.
CSS height. width 속성이 적용됨.
디폴트 display 속성이 block 인 element 들.
<div>, <h1> ~ <h6>, <p>, <table>, <ol>, <ul>, ...
2. display: inline
inline 속성 element 들은 새 라인에서 시작하지 않고
필요한 만큼의 좌우폭만 차지한다
CSS height. width 속성이 적용안됨★
디폴트 display 속성이 inline 인 element 들.
<span> <a> <img> <input>
※ 위 3개 정도만 디폴트가 inline 이고 나머지는 block 이라 생각해도 됨.
background-color 나 border 등을 주면 그 element 가 차지하고 있는 영역이 보인다
크롬 등에서 element selector 등을 사용하면 해당 element 가 차지하는 영역이 보인다.
HTML 에서 대표적인 grouping 목적의 태그 두가지
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
3 display : none /* 해당 요소 감추기 */
4 display : inline-block
element 들끼리는 inline 으로 배치되고,
element 는 block 처럼 동작 (width, height 적용됨)
-->
<body>
<div style="background-color: lime; padding: 5px;">
div 요소입니다
<div style="background-color: yellow;">div안의 div 입니다</div>
<div style="background-color: pink;">div안의 div 입니다</div>
<div style="background-color: violet;">div안의 div 입니다</div>
</div>
<br>
<!-- display:block 요소 에는 width, height 가 적용됨 -->
<div style="background-color: lime; padding: 5px; width: 300px; height: 250px;">
div 요소입니다 (300 x 250)
<div style="background-color: yellow; width: 200px; height: 80px">div안의 div 입니다</div>
<div style="background-color: pink; width: 170px; height: 70px">div안의 div 입니다</div>
<div style="background-color: violet; width: 100px; height: 50px">div안의 div 입니다</div>
</div>
<br>
<span style="background-color: lime; padding: 5px;">
span 요소입니다
<span style="background-color: yellow; /* width: 100px; height: 100px */ ">span안의 span</span>
</span>
<br><br>
<div style="background-color: cyan; display: inline;">inline 적용된 div</div>
<br><br>
<span style="background-color: cyan; display: block;">block 적용된 span</span>
</body>
</html>
5. Html14_Id_Class_Name.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>id class name</title>
<style>
p {
font-size: 200%;
}
p#demo { /* id=demo 인 p element */
background-color: cyan;
}
p.c1 { /* class 값이 c1 인 p element */
color: red;
}
p.c2 {
background-color: yellow;
}
</style>
</head>
<!--
HTML 에서 element 를 식별하는 수단 3가지 (attribute)
1. id
: 고유(unique) 한 element 식별용으로 사용
: 사용처: CSS, JavaScript
2. class
: 그룹으로 여러 element에 적용
: 한 element에 복수 class 적용 가능.
: 사용처: CSS, JavaScript
3. name
: 주로 form 관련 element에 적용
: 사용처: JavaScript, 서버프로그래밍(PHP, JSP 등..)
서버에 데이터를 전송할때는 반드시 name 사용!!
-->
<body>
<p id="demo">id = demo</p>
<p class="c1">class="c1"</p>
<p class="c2">class="c2"</p>
<p class="c1 c2">class="c1 c2"</p>
<p id="demo">id = demo 또?<br>css 에서는 구분하지 않아서 동작하나 자바 스크립트는 구분하여 동작 안함 </p>
아이디: <input type="text" name="userid" size="20">
</body>
</html>
6. Html15_Form1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form1</title>
</head>
<!--
<form> 안에 있는 form element 들의 내용들만! 서버로 전달됩니다.
이때 전달되는(받는) 곳은 서버의 특정 페이지가 되며, 이렇게 전달하는 것을
'submit' 한다고 합니다
<form> 에 사용되는 중요한 attribute 는
1. action :
submit 하는 대상 페이지 url
2. method :
form 데이터를 전송하는 방식
get 방식 : url에 모든 데이터 명시, 눈에 보임, 용량제한. 북마크 가능
post 방식 : url에 안보임, 용량제한없슴, 북마크 불가
3. onsubmit :
submit 발생 직전에 수행하는 JavaScript 코드
form 데이터 검증을 위해 쓰임.
4. target :
<a> 에서의 target 과 동일
(_self, _blank, ...)
5. name :
submit 하기 전에 form 데이터 검증을 위해선 필요하게 됨.
특히, 한 페이지 내에 form 이 여러개의 경우
form element 종류에는 아래와 같은 것들이 있다.
1. <input>
2. <select>
3. <textarea>
4. <button>
(이 밖에도 HTML5에 추가된 몇가지가 있으나, 브라우저 지원문제등으로 아직은..)
-->
<body>
<form action="https://www.w3schools.com/action_page.php">
First name:<br>
<!-- name을 설정하지 않으면 값이 서버로 넘어가지 않음(즉, name은 서버로 데이터를 넘기는 용도로 사용) -->
<input type="text" name="firstname" value="미키"/>
<br>
Last name:<br>
<input type="text" name="lastname" value="마우스"/>
<br><br>
<input type="submit" value="제출"/>
</form>
</body>
</html>
7. Html15_Form2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form2</title>
</head>
<!-- 다양한 form element 들 -->
<body>
<form action="https://www.w3schools.com/action_page.php">
<h3><input></h3>
<!-- placeholder는 안드로이드에서는 hint -->
성:<input name="firstname" type="text" size="30" placeholder="성 입력"/><br>
이름:<input name="lastname" type="text" size="20" value="디폴트값"/><br>
<br>
<input type="submit" value="제출">
<br><hr>
<h3><select></h3>
<!-- 서버쪽에서 받은 데이터의 이름(name) 은 cars 이고
받은 값(value) 는 value attribute에 명시된 값임을 주목! -->
<select name="cars">
<option value="volvo">볼보</option>
<option value="saab">사브</option>
<option value="fiat">피아트</option>
<option value="audi">아우디</option>
</select>
<br><hr>
<!-- selected -->
<select name="cars2">
<option value="volvo">볼보</option>
<option value="saab">사브</option>
<option value="fiat" selected>피아트</option>
<option value="audi">아우디</option>
</select>
<br><hr>
<!-- <select> 의 size attribute -->
<select name="cars3" size="3">
<option value="volvo">볼보</option>
<option value="saab">사브</option>
<option value="fiat">피아트</option>
<option value="audi" selected>아우디</option>
</select>
<br><hr>
<!-- <select> 의 multiple selection -->
<!-- 동일한 name 으로 복수개가 전달됨에 주목! -->
<select name="cars4" size="4" multiple>
<option value="volvo">볼보</option>
<option value="saab" selected>사브</option>
<option value="fiat">피아트</option>
<option value="audi" selected>아우디</option>
</select>
<br><hr>
<h3><textarea></h3>
<!-- 한글은 Get 방식 URL로 넘어 갈 수 없다, URL로 인코딩되어 넘어감 -->
<textarea name="message1" rows="10" cols="30">냥냥이를 선택하시겠습니까?</textarea>
<br><br>
<!-- 가급적 아래와 같이 스타일 사용 권장 -->
<textarea style="width: 200px; height: 600px">댕댕이를 선택하시겠습니까?</textarea>
<br><br>
</form>
</body>
</html>
8. Html15_Form3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form3</title>
</head>
<body>
<h3>여러가지 Input Type</h3>
<form action="https://www.w3schools.com/action_page.php">
<!-- hidden -->
<input type="hidden" name='data1' value='alpha'/>
<input type="hidden" name='data2' value='beta'/>
<!-- text -->
First name:<br>
<input type="text" name="firstname">ㅣ
<br>
Last name:<br>
<input type="text" name="lastname">ㅣ
<br><hr>
<!-- 필수요소인 경우 : required, placeholder : 입력 힌트 -->
Id : <br>
<input type="text" name="id" placeholder="id 를 입력하세요" required>
<br><hr>
<!-- disabled, readonly -->
별명:<br>
<input type="text" name="nick" value="건드리면 안되는 값" disabled/><br>
취미:<br>
<input type="text" name="hobby" value="읽기전용" readonly/>
<br><hr>
<!-- number -->
나이:<br>
<input type="number" name="age">
<!-- 브라우저 마다 구현 다름, 크롬에서는 spin 등장, Edge 에서는 submit 차단 -->
<br><hr>
<!-- password -->
User password: <br>
<input type="password" name="pwd">
<br><hr>
<!-- radio -->
<!-- 그룹하는 법, name을 똑같이 설정하면 된다..!! -->
<input type="radio" name="gender" value="male"/>남성<br>
<input type="radio" name="gender" value="female" checked/>여성<br>
<input type="radio" name="gender" value="pet"/>동물<br>
<br><hr>
<!-- checkbox -->
<input type="checkbox" name="vehicle1" value="bike">자전거<br>
<input type="checkbox" name="vehicle2" value="car" checked>자동차
<br><hr>
<!-- button, submit -->
<!-- <button> 도 있고 <input type="button" 도 있다 -->
<!-- submit, 동작함 -->
<input type="submit" value="제출(input type submit)"/>
<!-- button, 동작 안함 -->
<input type="button" value="제출(input type button)"/>
<!-- 기본값, submit로 동작 -->
<button>제출</button>
<!-- button, 동작 안함 -->
<button type="button">제출</button>
<br><hr>
<!-- reset -->
<input type="reset" value="초기화">
</form>
</body>
</html>
9. Html16_Semantic1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Semantic 이전</title>
<!-- HTML5 에 추가된 Semantic 태그들
우선 Semantic 태그가 등장하기 전 버젼의 웹페이지 제작을 보자
-->
<style>
body {
font-family: Verdana, sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
background-color: black;
color: white;
padding: 10px;
}
div#content {
background-color: lightgrey;
margin: 5px;
padding: 10px;
}
div.article {
background-color: white;
margin: 5px;
padding: 10px;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<!-- 우선 페이지의 구조를 설계 -->
<!-- TODO : id, class 부여 -->
<div id="header">
<h1>Monday Times</h1>
</div>
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id="content">
<h2>News Section</h2>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>
<div id="footer">
<p>© 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
10. Html16_Semantic2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Semantic 적용</title>
<!-- HTML5 에 추가된 Semantic 태그들
https://www.w3schools.com/html/html5_semantic_elements.asp
특별한 기능을 하는 것은 아니나, 태그의 의미(semantic) 을 부여하여 작성.
<header> : 헤더
<article> : 본문
<nav> : 메뉴 등 navigation
<aside> : 사이드 요소
<footer> : 푸터
<section> : 문서의 섹션 <summary>
<figcaption>, <figure> : 그림 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_figcaption
<details> : 추가 세부 정보
<main> : 문서의 메인 content
<mark> : 강조 텍스트
<time> : 날짜/시간
HTML5 Semantic 스타일 VS HTML4 스타일 비교
https://www.w3schools.com/html/html5_migration.asp
-->
<style>
body {
font-family: Verdana, sans-serif;
font-size: 0.9em;
}
header, footer {
background-color: black;
color: white;
padding: 10px;
}
section {
background-color: lightgrey;
margin: 5px;
padding: 10px;
}
article {
background-color: white;
margin: 5px;
padding: 10px;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>
11. Html17_iframe.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframes</title>
</head>
<!--
iframe : 웹 페이지 안에 웹페이지 표현
-->
<body>
<h1>Iframes</h1>
<h2>width, height</h2>
<iframe src="Html17_inside1.html" height="200" width="300"></iframe>
<hr>
<h2>style 적용</h2>
<iframe src="Html17_inside1.html" style="height: 200px; width: 300px"></iframe>
<hr>
<h2>테두리 없애기</h2>
<iframe src="Html17_inside1.html" style="border: none"></iframe>
<hr>
<h2>target</h2>
<iframe src="Html17_inside1.html" name="iframe_a"></iframe>
<br>
<a href="Html17_inside2.html" target="iframe_a">[2]</a>
<a href="Html17_inside3.html" target="iframe_a">[3]</a>
<br>
<!-- 아무거나 iframe으로 띄울 수 없음, 네이버나 다음은 iframe 띄우는 것을 방지되어 있어 화면을 띄울 수 없음 -->
<!-- 대부분 자기 서버에 있는 파일을 끌어다 쓸 때 많이 사용함..!! -->
<a href="https://www.naver.com" target="iframe_a">[2]</a>
<a href="https://www.daum.net" target="iframe_a">[3]</a>
<hr>
</body>
</html>
[추가] Html17_inside1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body style="background-color:powderblue">
<h1>iframe 안에 보이는 페이지1</h1>
</body>
</html>
[추가] Html17_inside2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body style="background-color:orange">
<h1>iframe 안에 보이는 페이지2</h1>
</body>
</html>
[추가] Html17_inside3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body style="background-color:pink">
<h1>iframe 안에 보이는 페이지3</h1>
</body>
</html>
12. Html18_Media1.html
[추가] 애플리케이션에 YouTube 플레이어를 삽입하는 방법을 알 수 있는 홈페이지
: https://developers.google.com/youtube/player_parameters
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Youtube</title>
</head>
<body>
<h2>width, height</h2>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
<hr>
<h2>AutoPlay</h2>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1"></iframe>
<hr>
<h2>Loop</h2>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?loop=1"></iframe>
<hr>
<h2>Control</h2>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"></iframe>
</body>
</html>
13. Css001_BoxModel.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BoxModel</title>
<!-- Box Model
https://www.w3schools.com/css/css_boxmodel.asp
모든 HTML elements 들은 사각형 상자 모양으로 구성된다.
CSS에서 말하는 box model 이란 바로 이런것을 말한다.
Content : 텍스트나 이미지가 등장하는 영역
Padding : content 주변을 둘러 싸는 영역. content - border 사이 간격, 투명이다
Border: padding 을 감싸는 테두리
Margin : border 의 바깥 영역 (다른 element 와의 간격)
element 의 '전체 width / height' 구하는 공식
element 의 전체 width =
width + left padding + right padding + left border + right border + left margin + right margin
element 의 전체 height =
height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
-->
<style>
div#demo1 {
background-color: lightgrey; /* content, padding 영역까지 */
width: 300px; /* Content 영역의 너비 */
border: 25px solid green; /* 테두리 */
padding: 25px; /* content ~ border 사이 간격(내부 여백) */
margin: 25px; /* border ~ 다른 element 사이 간격(외부 여백) */
}
div.demo2 {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0px;
}
div#demo3 {
outline: 2px solid red;
}
</style>
</head>
<body>
<h2>Box Model</h2>
<p>CSS box model 은 모든 HTML elements을 구성하는(감싸는) box다. <br> Box model 은 border + padding + margin + content 로 구성됨</p>
<div id="demo1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed eros volutpat, accumsan nisl cursus, facilisis est. Sed quis nunc ut eros ornare auctor sed non lacus. Donec eu neque ut sapien venenatis venenatis sed vel quam. Nulla ut metus et ipsum posuere egestas. Maecenas ac hendrerit risus. Sed ultrices est id nisi congue ultrices. Vestibulum eget velit sed arcu ornare auctor.
</div>
<br><hr>
<h2>Box model 의 크기 계산 </h2>
<img src="https://www.w3schools.com/css/klematis4_big.jpg"
width="350" height="263" alt="Klematis">
<div class="demo2">
위 이미지는 폭이 350px 입니다. 지금 보고 있는 이 div element 의 폭도 350px 입니다, 눈으로 비교해보세요
</div>
<hr><br>
<h2>outline </h2>
<div class="demo2" id="demo3">
<!-- outline 은 보여지기만 할 뿐, 자리를 차지하지는 않는다..!! -->
outline 은 border 의 바깥쪽에 표시되나, width, height 에는 영향을 주지 않는다.
</div>
</body>
</html>
14. Css002_WidthHeight.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Width & Height</title>
<!-- PX과 EM 변환 계산기
https://www.w3schools.com/tags/ref_pxtoemconversion.asp
-->
<style>
.c1 {background-color: powderblue;}
.c2 {background-color: lightpink;}
.c3 {background-color: yellow;}
div#demo11 {
height: 200px; /* 단위 : px, em, % 등이 있다 */
width: 50%;
}
div#demo12 {
height: 100px;
}
div#demo21 {
height: 150px;
max-width: 500px;
}
div#demo22 {
height: 150px;
min-width: 500px;
}
div#demo31 {
max-height: 70px;
overflow: auto; /* content가 넘칠때 처리 방법 */
}
div#demo32 {
min-height: 70px;
}
</style>
</head>
<body>
<h2>width & height</h2>
<!-- width, height
https://www.w3schools.com/css/css_dimension.asp
주의!:
CSS 의 height, width 값은
padding, border, margin 영역은 포함하지 않습니다
padding, border, margin 안쪽영역만 다룬 값입니다.
width 와 height 의 디폴트 값은 : auto <-- 즉, 브라우저가 알아서 계산합니다
-->
<p>아래 div element 는 height 200px / width 50%:</p>
<div class="c1" id="demo11">demo11</div>
<p>아래 div element 는 height 100px:</p>
<div class="c1" id="demo12">demo12</div>
<hr><br>
<h2>max-width & min-width</h2>
<!--
max-width : element의 최대 width 값
"아무리 container가 커져도 max-width 값보다 커지지는 않음
min-width : elemtnt의 최소 width 값
"아무리 container가 작아져도 min-width 보다 작아지지는 않음.
디폴트 값은 none <-- maximum width 값 없슴.
max-width 가 설정되면 기존의 width 값도 오버라이딩 한다.
-->
<p>아래 div element 는 height 150px / max-width 500px </p>
<div class="c2" id="demo21">demo21</div>
<p>아래 div element 는 height 150px / min-width 500px </p>
<div class="c2" id="demo22">
demo22<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed eros volutpat, accumsan nisl cursus, facilisis est. Sed quis nunc ut eros ornare auctor sed non lacus. Donec eu neque ut sapien venenatis venenatis sed vel quam. Nulla ut metus et ipsum posuere egestas. Maecenas ac hendrerit risus. Sed ultrices est id nisi congue ultrices. Vestibulum eget velit sed arcu ornare auctor.</div>
<hr><br>
<h2>max-height & min-height</h2>
<!--
max-height : 아무리 안의 내용물이 넘쳐도. 그 이상 height 가 커지지 않는다
min-height : 아무리 안의 내용물이 줄어도, 그 이하로 height 가 작아지진 않는다
즉 max/min height 는 '내용' 에 대한 크기 이다.
max-height 가 설정되면 기존의 height 값을 오버라이딩 한다.
-->
<p>아래 div element 는 기본값 </p>
<div class="c3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed eros volutpat, accumsan nisl cursus, facilisis est. Sed quis nunc ut eros ornare auctor sed non lacus. Donec eu neque ut sapien venenatis venenatis sed vel quam. Nulla ut metus et ipsum posuere egestas. Maecenas ac hendrerit risus. Sed ultrices est id nisi congue ultrices. Vestibulum eget velit sed arcu ornare auctor.</div>
<p>아래 div element 는 max-height: 70px </p>
<div class="c3" id="demo31">
demo31<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed eros volutpat, accumsan nisl cursus, facilisis est. Sed quis nunc ut eros ornare auctor sed non lacus. Donec eu neque ut sapien venenatis venenatis sed vel quam. Nulla ut metus et ipsum posuere egestas. Maecenas ac hendrerit risus. Sed ultrices est id nisi congue ultrices. Vestibulum eget velit sed arcu ornare auctor.</div>
<p>아래 div element 는 min-height: 70px </p>
<div class="c3" id="demo32">
demo32
</div>
</body>
</html>
15. Css003_Icon.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Icon</title>
<!-- 반드시 아래 viewport 지정 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome 아이콘 -->
<!-- TODO -->
<!-- Google 아이콘 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<!-- fontawesome.com 에서 제공하는 코드 -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- 아이콘(icon)
https://www.w3schools.com/css/css_icons.asp : CSS icon 단원
https://www.w3schools.com/icons/default.asp : Font Awesome5 외
https://www.w3schools.com/icons/icons_reference.asp : FA5 reference
https://fontawesome.com/ : 공식
가급적 Font Awesome 같은 공개된 아이콘 라이브러리를 사용합시다.
일반적으로 <i> 나 <span> 태그에 스타일링 하여 사용합니다.
2019.3 현시점에서 가용한 대표적인 아이콘 라이브러리들
Font Awesome 5.x (★추천★)
Font Awesome 4.x : https://www.w3schools.com/icons/fontawesome_icons_intro.asp
BootStrap3 Glyphicons : https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp
Google 아이콘 (material-icons) : https://www.w3schools.com/icons/google_icons_intro.asp
※ BootStrap4 부터는 자체 아이콘 지원 안함 BootStrap3 아이콘도 호환안됨)
-->
<body>
<p>원래 <i> 태그는 이탤릭 체를 위한 태그(였었습니다)입니다</p>
<h2><a href="https://fontawesome.com/">font-awesome 5.x 아이콘</a></h2>
<!-- Font awesome 5.x 아이콘
fas 클래스 지정 (font awesome solid)
far (font awesome regular)
-->
<h3>Solid vs Reqular</h3>
<i class="fas fa-clock"></i>
<i class="far fa-clock"></i>
<br><br>
<h3>Some Font Awesome icons:</h3>
<!-- i, span 둘다 사용 가능 -->
<i class="fas fa-band-aid"></i>
<span class="fas fa-cat"></span>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<span class="fas fa-clock"></span>
<br><br>
<h3>Styled Font Awesome icons (size, color, and shadow):</h3>
<i class="fas fa-clock" style="font-size:24px;"></i>
<i class="fas fa-clock" style="font-size:36px;"></i>
<i class="fas fa-clock" style="font-size:48px;color:red;"></i>
<i class="fas fa-clock" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i>
<br><br>
<h3>Sizing Icons</h3>
<!--
아래 클래스 사용하여 컨테이너 대비한 아이콘 사이즈 조정 가능
fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x
-->
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>
<br><br>
<h3>List Icons</h3>
<!--
fa-ul 와 fa-li 를 사용하면 list 태그의 기본 심벌(bullets) 를 대체 가능
-->
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul>
<br><br>
<h3>Animated Icons</h3>
<!--
fa-spin : 아이콘 회전
fa-pulse : 8단계로 회전
-->
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>
<br><br>
<h3>Rotated and Flipped Icons</h3>
<!--
fa-rotate-* : 회전
fa-flip-* : 뒤집기
-->
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
<br><br>
<h3>Stacked Icons</h3>
<!--
여러개의 아이콘을 겹쳐서(stacked) 표현 가능
fa-stack : parent 에 명시
fa-stack-1x : 정상 size
fa-stack-2x : 큰 size
fa-inverse : 색상 반전
-->
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span class="fa-stack fa-lg">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle (regular)<br>
<span class="fa-stack fa-lg">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color: red;"></i>
</span>
fa-ban on fa-camera
<br><br>
<h3>Fixed Width Icons</h3>
<!--
아이콘의 너비도 각각 다 다르다. 만약 열의 너비를 맞추어야 하는데,
아이콘의 서로 다른 너비때문에 문제가 된다면
fa-fw 를 사용하여 동일한 너비가 되도록 하자.
-->
<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>
<p>Without Fixed Width:</p>
<div><i class=""></i> Icon 1</div>
<div><i class="fas fa-arrows-alt-v"></i> Icon 1</div>
<div><i class="fas fa-band-aid"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b"></i> Icon 3</div>
<br><br>
<h3>Bordered and Pulled Icons</h3>
<!--
fa-border : 테두리 있는 아이콘
fa-pull-right, fa-pull-left :
-->
<div>
<i class="fas fa-quote-left fa-3x fa-border fa-pull-left"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<br><br>
<hr>
<h2><a href="https://material.io/icons/">Google 아이콘 (material-icons)</a></h2>
<h3>Some Google icons:</h3>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<h3>Styled Google icons (size and color):</h3>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
</body>
</html>'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글
| [2020.04.21] 구글 스토어 앱 출시 완료! (0) | 2020.05.02 |
|---|---|
| 2020.04.29 (0) | 2020.04.29 |
| 2020.04.27 (0) | 2020.04.27 |
| 2020.04.24 (0) | 2020.04.24 |
| 2020.04.23 (0) | 2020.04.23 |