ETC/국비교육
국비 37일차 CSS(position, overflow, float) + javascript 기초
puzzling
2021. 3. 2. 18:21
2021.03.02 국비 37일차
[TOC]
CSS
Position
static
- top, bottom, left, right 속성에 영향을 받지 않음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position static 실습</title>
<style type = "text/css">
div.static{
position : static;
top : 100px; /* 적용안됨 */
left : 100px; /* 적용안됨 */
border : 1px solid green;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any
special way; it is always positioned according to the normal flow of
the page:</p>
<div class = "static">
This div element has position : static
</div>
</body>
</html>relative
- normal position 기준으로 상대적 위치 설정(static일때 자리기준)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position relative 실습</title>
<style type = "text/css">
div.relative{
position : relative;
left : 50px;
border : 1px solid green;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any
special way; it is always positioned according to the normal flow of
the page:</p>
<div class = "relative">
This div element has position : relative
</div>
</body>
</html>fixed
- viewport(브라우저) 기준으로 상대적인 위치가 결정
- 스크롤을 움직여도 항상 같은 위치에 고정된다는 점
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position fixed실습</title>
<style type = "text/css">
div.fixed{
position : fixed;
bottom : 0px;
right : 0px;
width: 300px;
border : 3px solid green;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to
the viewport, which means it always stays in the same place
even if the page is scrolled:</p>
<div class = "fixed">
This div element has position : fixed
</div>
</body>
</html>absoulte
- 가장 가까운 부모요소 기준으로 상대적 위치 결정
- 부모요가 없거나 position설정값이 없으면 body기준으로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position absolute실습</title>
<style type="text/css">
div.relative {
position: relative;
width: 400px;
height: 300px;
border: 3px solid green;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to
the nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed):</p>
<div class="relative">
This div element has position: relative;
<div class="absolute">This div element has position : absolute</div>
</div>
</body>
</html>z-index
- 스택 값 변경(z축 기준 맨앞으로, 맨 뒤로)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position z-index실습</title>
<style type="text/css">
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is Heading</h1>
<img src="../images/001.png" width="100" height="50">
<p>Because the image has a z-index of -1,
it will be placed behind the text.</p>
</body>
</html>overflow
- 영역에서 값이 넘쳐날때 어떻게 처리할 것인지에 대한 속성
visible
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow visible실습</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box</div>
</body>
</html>hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow hidden실습</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box</div>
</body>
</html>scroll
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow scroll실습</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: scroll;
/* overflow-x : scroll */
/* overflow-y : scroll */
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box</div>
</body>
</html>auto
- 스크롤이 필요한 부분만 자동 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow auto실습</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: auto;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want to have
better control of the layout. The overflow property specifies what
happens if content overflows an element's box</div>
</body>
</html>float
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 실습</title>
<style type="text/css">
img {
float: left;
}
</style>
</head>
<body>
<img src="../images/001.png" />
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaa
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaa
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaa</p>
<h1>xxxxxxx</h1>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 실습</title>
<style type="text/css">
.box{
width: 100px;
height : 100px;
background-color : red;
margin : 10px;
padding : 10px;
float : left;
}
.box2{
width: 100px;
height : 100px;
background-color : blue;
margin : 10px;
padding : 10px;
/* float : left; */
clear:both;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box2"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 실습</title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
float: left;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
padding: 10px;
}
#wrap {
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>layout 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layout 실습</title>
</head>
<body>
<div id="container" style="width: 500px">
<div id="header" style="background-color: orange;">Main Title of
Web Page</div>
<div id="menu"
style="background-color: #FFD700; height: 200px; width: 100px; float: left">
<b>Menu</b><br>HTML<br>CSS<br>Javascript
</div>
<div id="content"
style="background-color: white; height: 200px; width: 400px; float: left">
goes here</div>
<div id="footer"
style="background-color: orange; clear: both; text-align: center;"> Copyright
@ W3Schools.com</div>
</div>
</body>
</html>Javascript
기초 문법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>basic</title>
<script type="text/javascript">
//1. 개발자 도구 console에 출력
console.log("Hello world", 100 ,"aaa");
console.log("Hello world2" + 100 +"bbb");
//2. 브라우저에 출력
document.write("<h1>Hello world.document.write</h1>");
</script>
</head>
<body>
hello - body
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>basic</title>
</head>
<body>
hello1
<script type="text/javascript">
//1. 개발자 도구 console에 출력
console.log("Hello world", 100 ,"aaa");
//2. 브라우저에 출력
document.write("<h1>Hello world2</h1>");
</script>
hello3
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>basic</title>
</head>
<body>
<p>Hello body</p>
<script type="text/javascript">
document.write("world1<br>");
document.write("world2");
document.write("A");
document.write("홍");
document.write(10);
document.write(3.14);
document.write(true);
document.write(false);
document.write(undefined);
document.write(NaN);
document.write(null);
document.write('');
document.write("");
//참조데이터
document.write([10, 20, 30]); // 배열
document.write(function(){}); //함수 : function 함수이름(매개변수) {코드}
document.write({"name" : "홍길동"}); // JSON 객체
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>basic</title>
<script type="text/javascript">
console.log("hello\"world"); //"
console.log("hello\'world"); //'
console.log("hello\tworld"); //tab
console.log("hello\nworld"); // 개행
console.log("hello\\world"); //\
</script>
</head>
<body>
<p>Hello body</p>
</body>
</html>DataType
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dataType</title>
<script type="text/javascript">
//변수 선언
var name = "홍길동";
var age = 20;
var array = [1,2,3,4]; //배열의 JSON
var obj = {"username" : "이순신", "age" : 44}; //객체의 JSON
var result = true; //boolean
var xxx; // undefined
var kkk = null; // null
var zzz = function(){}; //함수 객체
////////////////////////////////////////////////////
// NaN(Not a Number)
var xyz = parseInt("123"); //자바에서 Integer.parseInt()
console.log(xyz + 10);
var xyz2 = parseInt("helo"); // NaN
console.log(xyz2);
//////////////////////////////
name = 200;
console.log(name);
console.log(age);
//////////////////////////////
console.log(array); // (4)[1,2,3,4] 배열
console.log(obj); // {"username" : "이순신", "age" : 44}; json object
console.log("obj.username", obj.username, "obj.age", obj.age);
console.log("obj[username]", obj['username']);
//////////////////////////////
console.log(result); //true
console.log(xxx); // undefined
console.log(kkk); // null
console.log("function", zzz); // function 객체 출력
//객체에 없는 프로퍼티 접근은 undefined
var foo = {
"name" : 'sss',
"age" : 20
}
console.log(foo.name + '\t' + foo["name"]);
console.log(foo.age + '\t' + foo["age"]);
console.log(foo[0] + '\t' + foo[1]); //undefined
console.log(foo.address);//undefined
</script>
</head>
<body>
</body>
</html>typeOf
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>typeOf</title>
<script type="text/javascript">
//변수 선언
var name = "홍길동";
var age = 20;
var array = [ 1, 2, 3, 4 ]; //배열의 JSON
var obj = {
"username" : "이순신",
"age" : 44
}; //객체의 JSON
var result = true; //boolean
var xxx; // undefined
var kkk = null; // null
var zzz = function() {
}; //함수 객체
var xyz = parseInt("123");
console.log(typeof name); //string
console.log(typeof age); //number
console.log(typeof array); //object
console.log(typeof obj); // object
console.log(typeof result); //boolean
console.log(typeof xxx); // undefined
console.log(typeof kkk); //object(null)
console.log(typeof zzz); // function
console.log(typeof xyz); // number
console.log(typeof name == 'string'); //true
console.log(typeof age == 'number'); //true
console.log(typeof array == 'object'); //true
console.log(typeof obj == 'object'); // true
console.log(typeof result == 'boolean'); //true
console.log(typeof xxx == 'undefined'); // true
console.log(typeof kkk == 'object'); //true
console.log(typeof zzz == 'function'); // true
</script>
</head>
<body>
</body>
</html>dataTypeConversion
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dataTypeConversion</title>
<script type="text/javascript">
//1. 연결 연산자로 동작됨.
var x1= "10" + 5; //주의// 덧셈은 자동 형변환 되지 않음 // 결과값 : 문자열 105
var x2 = "10" - 5;
var x3 = "10" * 5;
var x4 = "10" / 5;
console.log(x1 + " " + x2 + " " + x3 + " " + x4);
//2.불린값
var y1 = 0; //false
var y2 = ''; //false
var y3 = parseInt("aaa"); //NaN //false
var y4 = null; //false
var y5; //undefined
var name = "hello";
var obj = [];
var newName = new String("hello");
if(newName){
console.log("newName은 true이다.");
}
if(!y1){ //0 -> fasle
console.log("y1은 false이다" + y1); // 0출력
}
if(!y2){
console.log("y2은 false이다" + y2);
}
if(!y3){
console.log("y3은 false이다" + y3);
}
if(!y4){
console.log("y4은 false이다" + y4);
}
if(!y5){
console.log("y5은 false이다" + y5);
}
</script>
</head>
<body>
</body>
</html>instance of
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>instanceOf</title>
<script type="text/javascript">
//변수선언
var name = "홍길동";
var name2 = new String("홍길동");
var age = 20;
var array =[1,2];
var object2 = {};
var a = false;
var b = null;
var c;
var k = function(){};
const T = 123; //자바스크립트 상수 선언 자바의 final, var 대신 const사용
console.log( name instanceof String); // false
console.log( name2 instanceof String); // true
console.log( age instanceof Number); // false
///////////////////////////////////
console.log( array instanceof Array) // true
console.log( object2 instanceof Object) // true
console.log( a instanceof Boolean) // false
console.log( b instanceof Object) // false
console.log( k instanceof Function) // true
</script>
</head>
<body>
</body>
</html>