- CSS(cascading style sheets) review
24_flaotEx & 20_float review
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float EX</title>
<style>
#wrap {
/* 자식이 float 설정시 */
/* overflow: hidden; */
/* display: table; 이용시 overflow:hidden;이 필요가 없어짐 */
/* 자식요소에 display: table-cell을 사용하기 위해 */
display: table; /* 부모요소 */
padding: 10px;
border: 1px solid red;
height: 200px;
width: 800px;
}
.floating-box {
/* display: inline-block; */
/* float: left; */
/* 부모요소에 꽉 채워 나열한다. */
display: table-cell;
/* table-cell 사용시 여러줄 문자를 세로 가운데 정렬시 사용 */
vertical-align: middle;
text-align: center;
border: 2px solid orangered;
}
</style>
</head>
<body>
<h2>The New Way - using inline-block</h2>
<!-- wrap ; 일반적으로 많이 씀 하위 div를 wrap 하고 있음을 의미 -->
<div id="wrap">
<div class="floating-box">Floating box1</div>
<div class="floating-box">Floating box2</div>
<div class="floating-box">Floating box3</div>
<div class="floating-box">Floating box4</div>
<div class="floating-box">Floating box5</div>
<div class="floating-box">Floating box6</div>
<div class="floating-box">Floating box7</div>
<div class="floating-box">Floating box8</div>
</div>
</body>
</html>
※ 참고 Semantic tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>참고</title>
</head>
<body>
<!-- 일반적으로 사용되는 Semantics tag -->
<header> 웹 페이지 상단 영역</header>
<nav>웹 페이지 제목</nav>
<section>본문 영역
<article> 기사 </article>
</section>
<aside>광고</aside>
<footer>회사 정보</footer>
</body>
</html>https://www.w3schools.com/html/html5_semantic_elements.asp
HTML Semantic Elements
HTML Semantic Elements Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content
www.w3schools.com
25_layoutTest
나
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout Test</title>
<style>
header,
nav,
div,
section,
article,
aside,
footer {
border: 1px solid blue;
}
#wrapmain {
height: 800px;
width: 600px;
margin: 0 auto;
padding: 5px;
overflow: hidden;
}
#wraphead,
footer {
height: 100px;
text-align: center;
line-height: 100px;
margin: 0px auto;
}
#wraphead {
margin-bottom: 5px;
}
div.navhead{
border: none;
margin: 15px;
}
#wrapnav {
height: 100px;
width: auto;
text-align: center;
margin: 0px auto;
padding: 40px;
overflow: hidden;
}
div.nav {
border: 1px solid gray;
float: left;
height: 40px;
width: 100px;
line-height: 40px;
overflow: hidden;
}
section {
height: 385px;
margin: 5px 0px 5px 0px;
padding: 5px;
text-align: center;
overflow: hidden;
}
article {
height: 100%;
width: 70%;
float: left;
}
aside {
height: 100%;
width: 28%;
float: right;
}
</style>
</head>
<body>
<div id="wrapmain">
<!-- head -->
<header id="wraphead"> HEADER</header>
<!-- menu -->
<nav id="wrapnav">
<div class="navhead">NAVIGATION</div>
<div class="nav">html</div>
<div class="nav">css</div>
<div class="nav">java script</div>
<div class="nav">jquery</div>
<div class="nav">java</div>
</nav>
<!-- contents -->
<section>
<article> content </article>
<aside>Banner <br> 퀵메뉴 <br></aside>
</section>
<!-- footer -->
<footer>FOOTER</footer>
</div>
</body>
</html>
내 결과물
선생님
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div,
header,
nav,
section,
article,
aside,
footer {
border: 1px solid blue;
padding: 5px;
margin: 5px;
text-align: center;
}
#total_wrap {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
header {
width: 780px;
height: 100px;
line-height: 100px;
}
nav {
width: 780px;
height: 150px;
}
nav ul li {
float: left;
width: 138px;
height: 50px;
line-height: 50px;
text-align: center;
list-style: none;
border: 1px solid #dddddd;
}
/* #content_wrap {
width: 780px;
overflow: hidden;
} */
section {
width: 600px;
height: 300px;
overflow: hidden;
float: left;
}
article {
margin: 10px auto;
width: 550px;
height: 100px;
}
aside {
margin: 5px auto;
width: 162px;
height: 300px;
float: left;
}
footer {
width: 780px;
height: 100px;
line-height: 100px;
clear: both;
/*section과 aside가 같은부모div에 쌓여 있다면 생략가능*/
}
</style>
</head>
<body>
<div id="total_wrap">
<header>
HEADER
</header>
<nav>
<p>NAVIGATION</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>j-Query</li>
<li>Java</li>
</ul>
</nav>
<!-- <div id="content_wrap"> -->
<section>
SECTION
<article>
article1
</article>
<article>
article2
</article>
</section>
<aside>
ASIDE<br>
BANNER<br>퀵메뉴
</aside>
<!-- </div> -->
<footer>
FOOTER
</footer>
</div>
</body></html>
선생님 결과물
- Java script *****
1. html 문서 내의 객체를 핸들링 할 수 있다.
2. html 문서 내의 css 요소를 핸들링 할 수 있다.
3. 서버와 통신 하여 얻은 response를 동적으로 표현해 준다.(Ajax)
4. 자바스크립트 객체 형태의 데이터를 서버와 주고 받을 수 있다.(Json)
5. 자바스크립트를 이용한 라이브러리 들이 계속적으로 나타나고 있다.
(node.js(서버 구현), jQuery, SPA(angular, vue.js, react) )
- 문서 내에 직접 설정 - 웹이 시작하자마자 필요한 요소가 아니면 body 하위에서 실행 할 것.
01_test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript test</title>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A paragraph</p>
<button type="button" onclick="myFuntion()">클릭</button>
<script>
function myFuntion() {
// document ; 현재 파일
// getElementById("X") ; id가 X인 요소를 가지고 와라
// innerHTML = "Y" ; 가지고 온 요소를 Y로 대체하라.
// document.getElementById("demo").innerHTML="pragraph changed"
// var ; 변수 지정
// console.log(Z); 변수 Z의 로그를 콘솔에 보여줘라.
var obj = document.getElementById("demo");
obj.innerHTML = "paracraph changed";
console.log(obj);
}
</script>
</body>
</html>
위의 펑션을 mySript.js 파일로 따로 저장해도 된다.
function myFuntion() {
document.getElementById("demo").innerHTML="pragraph changed"
}
01_test.html 은 다음과 같이 수정한다.
외부에서 mySript.js를 가지고 올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript test</title>
<script src="myScript.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A paragraph</p>
<button type="button" onclick="myFuntion()">클릭</button>
</body>
</html>
위와 같은 예제를 통해서 html이 절차대로 실행됨을 알 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript test</title>
<script src="mySript.js"></script>
<script>
alert("Welcome");
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A paragraph</p>
<button type="button" onclick="myFuntion()">클릭</button>
<script>
alert("Have a nice day");
</script>
</body>
</html>ㄴ "welcome" alert가 실행된 후 "Have a nice day" alert가 실행된다.
- 변수(Variable) 선언
02_variable
// 최근에는 let을 많이 쓴다.
// let 변수명 = 변수안에 들어갈 값;
const pi=3.14;
var x=5;
var y=6;
var z=x+y;
// number
var length=16;
// String
var lastname="johnson";
// Array
var cars = ["Saab","volvo","bmw"];
// object
var x = {firstname:"john",lastname:"doe"}
// boolean
var y = false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>variable</title>
</head>
<body>
<script>
// 자바스크립트에서 변수는 모든 값을 수용한다.
// var, let, const이 자바에서 object와 같은 역할을 한다.
var intNum = 1;
var floatNum = 1.1;
var result = (intNum / floatNum);
var str = "java script";
var boolean = false;
// 출력시 console.log() 함수 사용
// 웹 페이지 F12(개발자 도구) console창에서 확인가능
console.log("문자열 출력 확인")
console.log(intNum);
console.log(floatNum);
console.log(result);
console.log(str);
console.log(boolean);
</script>
</body>
<div id="id">ABC</div>id를 출력하고 싶을때 아래와 같이 스크립트에 입력한다.
var obj = document.getElementById("id");
console.log(obj);
// diretory ; 계층구조를 확인하고 싶을때 사용
// element의 정보를 트리구조로 보고 싶을때 사용
console.dir(obj);
console.log(obj.innerHTML);
- 연산자(operator)
03_operator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>operator</title>
</head>
<body>
<script>
var x=10;
var y=9;
var z=x/y;
var bo=true;
// log내 연산과 출력
console.log("z = "+z);
console.log("나머지는 "+10%9);
// 불값 출력
console.log("bo = "+bo); //불값이 문자열로 변환
console.log("bo =",bo); //불값이 불값으로 출력
console.log(true);
// 자료형 변환 및 수학함수
console.log(parseInt(z)); // 정수변환
console.log(Math.sqrt(z)); // square root 제곱근
console.log(z.toFixed(2)); // 소수점 둘째자리까지
console.log(Math.abs(y-x)); // absolute 절대값
// 3항 연산자
var now = new Date();
var greeting = now.getHours()>12 ?"오후":"오전";
console.log(greeting);
</script>
</body>
</html>
04_condition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var num = 10;
if (num < 0)
str = "음수";
else if (num > 0)
str = "양수";
else
str = "제로";
console.log("str = " + str);
var grade = "B";
switch (grade) {
case "A":
case "a":
str = "75inch tv";
break;
case "B":
case "b":
str = "Refrigerator";
break;
case "C":
case "c":
str = "aircondioner";
break;
default:
str = "toilet paper";
}
console.log(str);
var grade = "A";
var str="";
switch (grade) {
case "A":
case "a":
str += "75inch tv, ";
case "B":
case "b":
str += "Refrigerator, ";
case "C":
case "c":
str += "aircondioner, ";
default:
str += "toilet paper";
}
console.log(str);
</script>
</body>
</html>
05_loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var i = 1, sum=0;
while (sum < 100) {
console.log(i);
sum+=i;
i++;
}
console.log("i = "+(i-1)+", sum ="+sum)
var dan=5;
for(var i=1;i<10;i++){
console.log(dan+"X"+i+"="+dan*i);
}
</script>
</body>
</html>
06_breakNcontinue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>break & continue</title>
</head>
<body>
<h2>BREAK</h2>
<p id="break"></p>
<h2>CONTINUE</h2>
<p id="continue"></p>
<script>
var text="";
var text2="";
var i;
for(i=0;i<10;i++){
if(i===3){
break;
}
text += "The number is "+i+"<br>";
}
document.getElementById("break").innerHTML=text;
for(i=0;i<10;i++){
if(i===3){ //=== ; 정확한 비교
continue;
}
text2 += "The number is "+i+"<br>";
}
document.getElementById("continue").innerHTML=text2;
</script>
</body>
</html>
07_dowhile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>do while</title>
</head>
<body>
<script>
var i=1;
do{
console.log(i);
i++;
}while(i<=10);
</script>
</body>
</html>'ICIA 수업일지' 카테고리의 다른 글
| 2021.07.26 수업일지 (0) | 2021.07.31 |
|---|---|
| 2021.07.23 수업일지 (0) | 2021.07.24 |
| 2021.07.21 수업일지 (0) | 2021.07.24 |
| 2021.07.20 수업일지 (0) | 2021.07.24 |
| 2021.07.19 수업일지 (0) | 2021.07.24 |
