CSS 2차시, JAVA SCRIPT 1차시 - position, 게시판완성

-position

 

<div id="sidebar">

 <p id="sidetext">허브는 약용식물이다</p>

 <p id="sidetext">허브는 향기식물이다</p>

 <p id="sidetext">허브는 채소이다</p>

 <p id="sidetext">허브는 향신료이다</p>

 <p id="sidetext">허브는 미인을 만든다</p>

</div>

 

 

**position

-static : 기본값으로 일반적인 내용물의 흐름

-relative : 내용물의 흐름, top, left 거리를 지정

-absolute : 자신의 위치가 상대에게 영향을 줌

-fixed : 스크롤이 일어나도 항상 화면상의 지정된 위치에 있음

 

3-5-9

        .rel{

                        width : 300px;

                        height : 100px;

                        background : yellow;

                        top : 200px;

                        left : 100px;

                        position : absolute;

                }

3-5-10

기준을 부모로 바꿀 수 있다.

.abs{

                                width: 300px;

                                height: 100px;

                                background: aqua;

                                top : 20px;

                                left : 30px;

                                position: absolute;

                        }

                        

                        div {

                                width: 400px;

                                height :200px;

                                background: green;

                                position: relative;

                        }

3-5-11

 

부모 : relative

자식 : absolute

margin : 자신의 영역 밖에서의 공백

padding : 자신의 영역 안에서의 공백

                        div{

                        

                                width: 1000px;

                                height: 200px;

                                background: green;

                                position: relative;

                                

                        }

                        

                        .abs{

                                font-size: 10px;

                                width: 200px;

                                height: 70px;

                                background: aqua;

                                position: absolute;

                                bottom : 0px;

                                right : 0px;

                                margin: 0px;

                        }

 

 

**overflow 

**clear

**clip

**visibility

    -display : 화면에서 숨기고 면적도 차지하지 않도록 하기 위해 사용

**index

 

 

 

$$전체게시판만들기

CSS-layout2폴더-images-layout.html

css-layout_basic

 

@CHARSET "UTF-8";

#wrapper{

        background: url("../images/common/wrap_bg.jpg")no-repeat top center ;

        

}

#header{

        width: 940px;

        height: 105px;

        background: url("../images/common/bg_menubox.png")no-repeat 0 0;

                

}

#infoMenu{

        text-align: right;

        margin-right: 77px;

        padding: 8px 0px 7px 0px;

        font-size: 0.9em;

}

#infoMenu li{

        display: inline;        

        padding: 0px 3px 0px 8px;

        background: url("../images/common/topnavi_bar.gif")no-repeat 0 0;       

}

#infoMenu li.first-item{

        background: none;       

}

.logo{

        position: absolute;

        top: 35px;

        left: 60px;     

}

/* navigation */

#navigation{

        width: 842px;

        height: 43px;

        background: url("../images/common/sitemenu_bg.gif")no-repeat 0 0;

        margin-left: 20px;

}

#navigation li{

        float: left;

}

#navigation li.first{

        margin-left: 217px;

}

#navigation li ul{

        position: absolute;

        top: 77px;

}

#navigation li ul a{

        padding: 7px 10px;

}

/* contents */

#contents{

        width: 940px;

        height: 400px;  

        background: url("../images/common/contents_box.png")no-repeat 0 0;

}

#subWrap{

        width: 215px;

        height: 200px;

        float: left;

        background: url("../images/common/subwrap_bg.gif")no-repeat 0 0;

}

#contentsWrap{

        width: 590px;

        float: left;

}

#quick{

        width: 50px;

        float: right;

}

 

 

**bootstrap

부트스트랩을 이용하면 예쁜뷰를 만들 수 있다.

CSS/JS

**집가서 부트스트랩 사용해보기 

기본 1로우 -> 12등분

---

 

---

 

**JAVA Script (자바가 아닌 새로운 언어이다)

 

http://blog.naver.com/njw1204/221654918683

웹이라는 환경에서 브라우저 지원

서버와 클라이언트 개발프로그램이 달라서 JSON이용하는데 스크립트는 둘 다 가능

FINAL 후에 node수업

인터프리터 언어(컴파일과절x) - 인터프리터에 의해 번역되어짐, 문법적으로 느슨해질 수 밖에 없음

데이터타입이 엄격하지 않음. int형에 string넣어도 에러가 안뜸.

편리하지만 버그가 많음.

디버깅 툴을 이용하고 나서 스크립언어의 장점을 많이 활용하기 시작 -> 함수형(람다식)

확장성이 좋고ㅡ 유연함

자바스크립트 -> AJAX, NODE, LIBRAIRY, JQUERY

 

**

<script type="text/javascript">

        //document.write("first JavaScript!!");

        function kosta(){

                document.write("<b>KOSTA</b>");

                console.log("kosta");

        }

 

<form>

                <input type="button" value="버튼" onclick="kosta2()">

        </form>

 

<script type="text/javascript" src = "common.js"></script>

function kosta2(){

                document.write("<b>KOSTA</b>");

                console.log("kosta2");

        }

 

 

**JavaScript 자료형

-문자형(String)

-숫자형(Number)

-논리형(Boolean)

-빈 데이터(Undefined)

 

변수명 첫글자로 가능한 것 : $, _(언더바), 영문자 -> 대소문자 구분해야 함.

 

 

 

/* JavaScript 자료형 */

        

        //숫자형(number) : 데이터 값을 넘는순간 데이터타입이 지정됨.

        var intNum = 10;

        var floatNum = 3.14;

        

        console.log(typeof intNum);

        console.log(typeof floatNum);

        

        //문자열(string)

        var shiS = 'single';

        var doubleS = 'double';

        

        console.log(typeof shiS);

        console.log(typeof doubleS);

        //논리형(boolean)

        var boolVar = true;

        console.log(typeof boolVar);

        

        //undefined/ Null => opject

        var emptyVar;

        var nullVar = null;

        

        console.log(typeof emptyVar);

        console.log(typeof nullVar);

        

        //함수(function)

        var func = function(){}

        console.log(typeof func);

 

        //형변환

        intNum = "안녕";

        console.log(typeof intNum);

        

        //"123" => 123

        //eval(): 문자열을 객체로 변환, Number(), parseInt() : 변환할수 있는것까지 판별        해서 변환해줌

        //: 문자열 => 숫자형

        var num = "123";

        num = eval(num);

        var num2 = num + 10;

        console.log(num2);

        

        var num3 = "15";

        

        if(num3 === 15){ //형변환까지 해주고 비교함 ===데이터타입까지도 검사하겠다.

                alert("같다");

        }else{

                alert("다르다");

        }

                

                //전역변수 vs 지역변수

          var myVar="전역변수";

         

          function myFunc() {

            var myVar="지역변수";

            document.write("지역변수:"+myVar+"<br>");

            document.write("전역변수:"+this.myVar+"<br>");  //일반함수 안에서 this는 윈도우객체(window써도됨)=>전역변수 범위를 나타냄, 이름이 같아서 this써준 것임.

          

        }

          myFunc();

 

 

   

★함수

★객체

★내장객체

★이벤트

★Dom Script - JQuery

★AJAX

 

         var name = prompt("당신의 이름은?","");

          var height = prompt("당신의 신장은","0");

          var weight = prompt("당신의 몸무게는?","0");

         

          var normal = (height-100)*0.9;

          var result = weight>normal-5 && weight<=normal+5;

          result = result? "적정 체중입니다." : "적정 체중이 아닙니다.";

          document.write(name + "님은" +result+ "<br>");

        document.write(name + "님의 적정 체중은" + normal + "입니다.");

 

 

        var num = 1;

        var t = "<table border = 1>";

        

        for(var i=1; i<=5;i++){

                t+="<tr>";

                

                for(var k=1; k<=5;k++){

                        t+="<td>"+num+"</td>";

                        num++;

                }

                t+="</tr>";

                

        }

        

        t+="</table>";

        console.log(t);

        document.write(t);