CSS & Bootstrap

CSS 

6ht Hand-Out download ==> CSS & Bootstrap Class


*old version download ==> CSS and Div

===================

1. <table><tr> <td>hello~! Table code</td> </tr></table>
2. <meta name=”Keywords” content=”raramiko, disperse dye, painting, fineart” />
<meta name=”Description” content=”raramiko world is using disperse dye~~” />

각각의 Device 폭에 맞춤형 넓이 지정
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

3.< iframe sandbox >
<iframe> 사용시 외부파일 보안 문제 차단 하기 – HTML5부터 sandbox 라는 속성 도입(자바스크립
트나 폼태그와 같이 위험할 가능성이 있는 기술들은 불러올 때 원천적으로 차단)

—index.html(no block JS) //
<html>
<head>
<title> iframe </title>
</head>
<body>
<iframe src=”test.html” width=”560”
frameborder=”0″ allowfullscreen>
</iframe>
</body>
</html>

—test.html//
<html>
<head>
<title> iframe </title>
</head>
<body>
<h2>Hello</h2>
<script>
alert(“pop up open, but dangerous this”);
</script>
</body>
</html>

—index.html (block JS with sandbox)//
<html>
<head>
<title> iframe sandbox </title>
</head>
<body>
<iframe src=”test.html” width=”560 frameborder=”0″  allowfullscreen  sandbox>
</iframe>
</body>
</html>

4. CSS [ class 와 id 의 차이점]
같은 class 여러개를 한문서에 사용할 수 있지만 id 는 고유성을 가지므로 한 문서에 한번만 같은 이름의 id 를 사용할 수 있습니다.// 그런데- ~~ 테스트 해보세용~~ 결국 class 안에서 id 사용함.

홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 class 의 사용이 필수적이며, 실무에서도 class 와 id 사용은 빈번하게 이루어지고 있습니다.
외부 CSS 파일을 이용하는 것이 문서 전체의 일관성은 물론 스타일 변경시에도 작업의 효율성을 높여줍니다.

외부 CSS 파일 불러 오기
<link rel=”stylesheet” type=”text/css” href=”CascadingStyleSheets.css”>

class 는 CSS 에서 . 이구요,  id 는 CSS 에서 # 입니다.

==class in CSS   .
<html>
<head>
<title> CSS class</title>
<style type=”text/css”>
   .class_m {  color: #F00;
                        font-weight: bold;
                        background:#CF0;
                        width:200px;
                       }
</style>
</head>
<body>
<p class=”class_m“>css class 설명</p> </body>
</html>

== id in CSS #
<html>
<head>
<title> CSS id </title>
<style type=”text/css”>
#id_w {  color: #fff;
                 font-weight: bold;
                 background:#f00;
                 width:160px;
              }
</style>
</head>
<body>
<p id=”id_w”>css id 설명</p> </body>
</html>

=========================================

CSS  사용방법 3가지 방법

1. <body></body> 안에서 각각의 code 마다 ~~
<p align=”center” title=”raramiko” style=”color:#F00″ > hello </p>

2. <head></head> 안에서 각각 ( 단, 1 document only )
<style type=”text/css”>
         name01 { color:#6F6;
           font-size:24px;
           text-align:center;
                            }
</style>

<!– ”  ”  바로 이것 때문에 ( 따옴표 “”)  수업시 문제 발생됨 , 손수  하나하나 따옴표는  드림위버 안에서 직접–>

3. CSS 문서불러 오기 <link rel=”stylesheet” type=”text/css” href=”myname01.css”>
<body> </body>
<p class=”name01″>welcome</p>
<p class=”name02″>welcome</p>

<!–  ”  ”  바로 이것 때문에 ( 따옴표 “ ” )  수업시 문제 발생됨 손수  하나하나 따옴표는  드림위버 안에서 직접–>

만약  수업시간에 발생한  class   CSS 문제를 Apple 노트북 광고 팀이  알았다면  ㅎㅎ
다른 PC 게열은 안되고  ㅋㅋ   엄청난 광고거꺼리 제공 ~~ ㅎㅎ ㅋㅋ

수업중 아무도 ”  ”  (따옴표) 에 문제가 있었다는것을 알아채지 못함 ~~

—–mycss01.css——
@charset “utf-8”;
/* CSS Document */
.name01 { color:#6F6;
                   font-size:24px;
                    text-align:center;
                  }
.name02 { color:#F00;
                    font-size:24px;
                    text-align:center;
                  }

=================================
=================================
Bootstrap

https://getbootstrap.com/
http://bootstrapk.com/
*** google keyword ==     [free bootstrap themes]
https://startbootstrap.com/

============================================
gmail account ~ What Shall I do ?
https://www.google.com/intl/en/business/ ===>  What is this?  //   need more?==Trend ?

============================================
How about Amazon?
https://www.amazon.com
https://camelcamelcamel.com/

==> https://www.junglescout.com/estimate-amazon-sales/

www.alexa.com/siteinfo/    
=============================================
dhgate.com
aliexpress.com
alibaba.com
www.import-express.com

etc., … …

in Korea ?? http://gobizkorea.com ??? >>> Amazon seller documents deny ??

PHP ???


< ? php echo “Hello world”; ? >
=============================


<?php

echo “<h1>Ex. 구구단 출력하기</h1>”;

for($i=2;$i<=9;$i++){
echo $i.”단 입니다.<br/>”;
for($j=1;$j<=9;$j++){
echo $i.” X “.$j.” = “.($i*$j).”<br/>”;
}
echo “<br/>”;
}

?>



Source Code PDF Download >>>>> click here <<<<<

 


sinaburoSCIENCE IN NATURE ART
AND BUSINESS WEB
EDUCATION ROUNDTABLE
Charity is a registered 501(c)(3) nonprofit Status.