국비 37일차 CSS(position, overflow, float) + javascript 기초

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>

'ETC > 국비교육' 카테고리의 다른 글

국비 39일차 Javascript 함수 + 응용  (0) 2021.03.04
국비 38일차 Javascript operator  (0) 2021.03.03
국비 36일차 css 정리 2  (0) 2021.02.26
국비 35일차 css 정리  (0) 2021.02.25
국비 34일차 html(colspan, rowspan, ol, li, dl, div, span, form)  (0) 2021.02.24

+ Recent posts

티스토리툴바