CSS & Bootstrap

CSS

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

CSS // Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are
positioned and laid out, what background images or background colors are to be used,
different displays for different devices and screen sizes, and much more!

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

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>

iframe 과 위젯

한국은행 환율표 내 홈페이지에 넣기

https://spot.wooribank.com/pot/Dream?withyou=FXXRT0021#

위 링크는 한국 우리은행 환율표 링크 입니다 혹시 위 링크가 문제가 있다면, 근래 한국 현지 은행들이 통합과정이 많으므로 은행 본 사이트에서 또는 네이버, 구글 에서 찾아 보시는 방법또한 추천 드립니다.

< iframe src=”https://spot.wooribank.com/pot/Dream?withyou=FXCNT0002&rc=0&divType=1&lang=KOR” frameBorder=0 width=600 scrolling=no height=184 topmargin=”0″ name=irate marginWidth=0 marginHeight=0 title=”무료환율표A형” >< /iframe >

날씨 위젯은 어떤가요?

< iframe width=”100%” height=”245″ src=”https://forecast.io/embed/#lat=37.5662&lon=126.9785&name=서울&color=&font=arial&units=si” frameborder=”0″>< /iframe >

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>

직접 각각 코드 컨텐츠에

This is a paragraph.

This is another paragraph.

–> no more support HTML5 ㅜㅜ

2. <head></head> 안에서 각각 ( 단, 1 document only )

코드로 <html></html> 사이 아무대나 ( 하나의 페이지에서만 실행됨 )

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

h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}

p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>

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

–> test color <– | –> myname01.css <–

An external style sheet is used to define the style for many HTML pages
독립적인 파일로 CSS 만들고 각각 필요한 Document(<html></html>) 에서 불러 오기

아래와 같은 내용을 styles.css 이름과 확장자명으로 저장
@charset “utf-8”;
/* CSS Document */
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

그리고, 필요한 도큐먼트의 <head></head> 사이에 아래와 같은 방법으로 불러오기
<link rel=”stylesheet” href=”styles.css”>

***id > class > 코드(태그순 <style> )***
학교종이 땡땡땡 어서 모이자 이름표엔 #

h2 { color: Violet; background-color: gray; }
.class1 { color: blue; background-color: yellow; }
.class2 { color: red; background-color: pink; }
h3.class1 { color: navy; background-color: orange; }

#id1 { color: yellow; background-color: blue; }
#id2 { color: green; background-color: pink; }
h2#id1 { color: navy; background-color: orange; }

</style>
</head>

<body>
<h2>CSS</h2>
<p>class result</p>
<p class=”class1″>Class 1 입니다.</p>
<p class=”class2″>Class 2 입니다.</p>
<h3 class=”class1″>Element+Class Selector</h3>
<br><br>
<p>id result</p>
<p id=”id1″>ID1 선택자</p>
<p id=”id2″>ID2 선택자</p>
<h2 id=”id1″>Element+ID Selector</h2>
<br>
<br>
<p>class</p>
<h2 class=”class1″ id=”id1″>***id > class > 코드(태그순 < s t y l e > )***</h2>

</body>
</html>

*MIME(Multipurpose Internet Mail Extensions)은 원래 전자 메일 전송을 위한 인터넷 표준이었으나
현재는 웹에서 내용 유형(content type)을 말할 때 자주 쓰임

MIME type은 대표적으로,
css 파일의 경우 text/css
js 파일의 경우 text/javascript
이미지 파일의 경우, image/png
Video data or files, such as MP4 movies 경우, video/mp4

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

만약 수업시간에 발생한 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/ ㅜㅜ No more service

https://www.semrush.com/website/top/south-korea/all/

https://pro.similarweb.com/
=============================================
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/>”;
}

?>

<!– 도통 내 손가락들이 타이핑 하는데 방해가 되신다구요 ? –>
그럼 여기를 클릭 하세요 >>>요기<<<

https://www.sinaburo.org/wp-content/uploads/2022/11/PHP_101.pdf