- CSS(Cascading Style Sheets)
03_backGround
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background test</title>
<style>
body {
/* #RGB 로 색상을 넣어도 좋다. */
background-color: #b8d780;
}
h1 {
background-color: rgb(35, 173, 173);
}
div {
background-color: lemonchiffon;
}
</style>
</head>
<body>
<h1>title</h1>
<p>동해물과 백두산이 마르고 닳도록</p>
<!-- div 특정 영역 나타내는 -->
<!-- target="_blank" 새창 열기 -->
<div>
<a href="https://html-color.codes/" target="_blank">html color picker</a>
</div>
</body>
</html>
04_backGroundImg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background Image</title>
<style>
body{
/* 웹url도 괜찮지만 직접 지정하는게 좋다. */
background-image: url("x_repeat.jpg");
/* 반복시 가장 왼쪽 상단이 (0,0)이 된다. */
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello MARIO!!!</h1>
</body>
</html>
05_backGroundimg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-image</title>
<style>
body{
/* 높이를 줘야 포지션이 설정됨 */
height: 600px;
/* 큰 이미지 가정 */
/* background-image: url("img.jpg"); */
/* no-repeat ; 반복 안함 */
/* background-repeat: no-repeat;
background-position: center; */
/* cover ; 최소 사이즈가 있고 윈도우에 따라 크기 자동 조절 */
/* 400px 400px 배경 이미지 사이즈를 지정 */
/* background-size: 400px 400px; */
/* 위의 설정은 한꺼번에 적용할 수 있다. */
background: url("img.jpg") red no-repeat center;
/* 아래 BG 설정은 한번에 쓸 수 있다. */
/* color image position attachment repeat */
}
</style>
</head>
<body>
</body>
</html>
06_textColor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text CSS</title>
<style>
body {
color: royalblue;
}
h1 {
color: darkslateblue;
}
/* p tag & ex class인 색 지정 */
p.ex{
color: red;
}
</style>
</head>
<body>
<h1>HEAD LINE</h1>
<p>폭염이 이번주에 절정에 이를 예정입니다.</p>
<p class="ex">class ex 문단</p>
</body>
</html>
07_textAlign
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text 정렬</title>
<style>
/* text-align ; 문자와 관련된 정렬 */
h1{text-align: center;}
#date {text-align: right;}
/* justify 양쪽 정렬 */
p.verse1 {text-align: justify;}
</style>
</head>
<body>
<h1>애국가 가사</h1>
<p id="date">2021년 07월</p>
<p class="verse">
(1)
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.</p>
<p class="verse">
(2)
남산 위에 저 소나무, 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.</p>
<p class="verse">
(3)
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.</p>
<p>
(4)
이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.</p>
</body>
</html>
08_textFont
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text Font</title>
<style>
/* 폰트가족 하나씩 유무확인해서 적용 없으면 오른쪽으로 */
p.serif {
font-family: 'Times New Roman', Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">Shown in the Times New Roman font</p>
<p class="sansserif"> Shown in the arial font</p>
</body>
</html>
09_textFont2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text Font2</title>
<style>
a {
/* text-decoration: none ; text 밑줄 지우기. 출력화면상 */
text-decoration: none;
}
h1 {
/* overline ; 윗줄 */
text-decoration: overline;
/* letter-spacing ; 글자 간격 설정 */
letter-spacing: -2px;
}
h2 {
/* line-through ; 읽음 표시 */
text-decoration: line-through;
letter-spacing: 2px;
}
h3 {
text-decoration: underline;
letter-spacing: 10px;
}
</style>
</head>
<body>
<p>link to : <a href="http://www.w3schools.com">w3schools.com</a></p>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
10_textFont3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text font3</title>
<style>
/* rem : html 기본 폰트 크기 size 참조 */
/* em : 상위(부모) 태그 기본 크기를 참조. 여기서는 body */
p.normal {
font-style: normal;
/* font-size: 40px; */
/* 기본적으로 설정되어 있는 html 폰트 크기를 기준으로 2.5rem(배) 한다. */
font-size: 2.5rem;
}
p.italic {
font-style: italic;
/* font-size: 16px; */
font-size: 1rem;
}
p.oblique {
font-style: oblique;
/* font-size: 8px; */
font-size: 0.5rem;
}
</style>
</head>
<body>
<!-- 글자 크기 단위 px:절대크기, (em, rem):상대크기 -->
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
11_test
나)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text table</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 10px;
text-align: cneter;
background-color: lightgray;
border-bottom: 3px solid;
}
td.name {
padding: 10px;
text-align: center;
}
td.old {
padding: 10px;
text-align: right;
}
</style>
</head>
<body>
<table style="width: 50%">
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td class="name">홍길동</td>
<td class="old">70</td>
</tr>
<tr>
<td class="name">이순신</td>
<td class="old">100</td>
</tr>
<tr>
<td class="name">이주성</td>
<td class="old">32</td>
</tr>
</table>
</body>
</html>
- Box Model
12_divBox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div box</title>
<style>
div{
background: crimson;
width: 500px;
padding: 10px;
border: 10px solid blueviolet;
/* box 외곽 margin */
margin: 20px;
}
p.verse {
background-color: deeppink;
padding: 10px;
}
</style>
</head>
<body>
<div>
<p class="verse">
(1)
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.</p>
<p class="verse">
(2)
남산 위에 저 소나무, 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.</p>
</div>
</body>
</html>
13_boxModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box model</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,td {
/* 일반적인 설정법 */
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px; */
/* 3단위 시계방향 설정법 ; 12 -> 3 -> 6 -> 9 순서 */
/* padding: 10px 20px 10px 20px ; */
/* 12&6 3&9 묶어서 설정법 */
padding: 10px 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td class="name">홍길동</td>
<td class="old">70</td>
</tr>
<tr>
<td class="name">이순신</td>
<td class="old">100</td>
</tr>
<tr>
<td class="name">이주성</td>
<td class="old">32</td>
</tr>
</table>
</body>
</html>
14_boxModel2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box model2</title>
<style>
img,div {
width: 350px;
padding: 10px;
border: 5px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<img src="img.jpg" width="350" height="350" alt="HTML5 LOGO">
<div>
content : 350px + padding : 10px*2 + border : 5px*2 + margin : 10px*2 == 400px
</div>
</body>
</html>
- Display
Inline - 각 요소도 연결되게 보여주는 형식(옆으로 쌓임)
Block - 요소별로 줄바꿈을 시킨다.(아래로 쌓임. 기본값)
None - 요소 자체를 없애 버린다.(element 자체를 사라지게 한다.)
-Visibility
Hidden - 요소는 있으나 보이지만 않는다.
Visible - 요소가 보임
15_display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
li{
list-style-type: none;
padding: 20px;
background-color: burlywood;
display: block;
}
a:hover{
visibility: visible;
/* [visible | hidden] */
}
#dis{
display: none;
}
</style>
</head>
<body>
<ul>
<!-- # ; 아직 넣을 링크가 없는 경우 -->
<a href="#"><li>HTML</li></a>
<a href="#" id="dis"><li>CSS</li></a>
<a href="#"><li>JavaScript</li></a>
<a href="#"><li>jQuery</li></a>
</ul>
</body>
</html>
16_border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
.one{
border: 5px solid red;
}
.two{
/* dashed ; 점선 */
border-style: dashed;
border-width: thin;
border-color: royalblue;
}
.three{
border-top-style: double;
border-bottom-style: dotted;
border-top-color: seagreen;
border-bottom-color: tan;
}
.four {
/* 12시를 기준으로 시계방향으로 3시간 텀 */
border-style: double solid dashed dotted;
}
</style>
</head>
<body>
<p class="one">컨텐트 입니다.</p>
<p class="two">컨텐트 입니다.</p>
<p class="three">컨텐트 입니다.</p>
<p class="four">컨텐트 입니다.</p>
</body>
</html>
17_max-width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>max width</title>
<style>
div {
border: 3px solid blue;
text-align: center;
/* margin 도 상하좌우 개별설정이 가능하다. */
margin-top: 20px;
height: 50px;
/* 위까지만 하면 세로 가운데 정렬이 안된다. */
/* 줄간격을 이용해 세로 가운데 정렬 효과를 준다. */
line-height: 50px;
}
.ex1 {
width: 500px;
}
.ex2 {
/* 최대값은 보장해주고 윈도우 사이즈를 줄이면 거기에 맞춰 줄어든다. */
max-width: 500px;
}
</style>
</head>
<body>
<div class="ex1">ex1</div>
<div class="ex2">ex2</div>
</body>
</html>
18_position ***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position</title>
<style>
/* div 공통 특성 */
div {
width: 200px;
height: 100px;
text-align: center;
}
div.static {
/* 기본값. 문서의 정상적인 흐름에 따라 배치 */
/* static에서는 top, left 적용되지 않음 */
position: static;
background-color: red;
/* top: 100px;
left: 50px; */
}
div.relative {
position: relative;
background-color: yellow;
/* 정상적인 위치에서 상대적으로 요소가 배치됨 */
top: 50px;
left: 100px;
}
div.absolute {
position: absolute;
background-color: orange;
width: 100px;
height: 100px;
border: 2px solid blue;
top: 20px;
left: 20px;
}
div.fixed {
/* 배치가 고정됨 */
position: fixed;
background-color: green;
top: 10%;
right: 10%;
}
</style>
</head>
<body>
<div class="static">
position : static
</div>
<!-- relative 부모 absolute 자식 공식처럼 여겨진다. -->
<div class="relative">
position : relative
<div class="absolute">
position : absolute
</div>
</div>
<div class="fixed">
position : fixed
</div>
</body>
</html>
19_z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z index</title>
<style>
#bg {
background-color: black;
/* opacity ; 투명도 */
opacity: 50%;
width: 100%;
height: 800px;
/* z-index는 하늘에서 바라본 건물높이 라고 이해하자 */
/* 부모자식간에는 z-index가 적용 안됨 */
/* z-index: 10; */
}
#popup {
background-color: yellow;
/* 가로 가운데 정렬 */
margin:0 auto;
width: 500px;
height: 600px;
text-align: center;
/* z-index: 9; */
}
</style>
</head>
<body>
<div id="bg">
<div id="popup">
<h2>공지사항</h2>
</div>
</div>
</body>
</html>
20_float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
/* float CSS 속성 은 컨테이너의 왼쪽 또는 오른쪽에 요소를
배치하여 텍스트 및 인라인 요소가 주위를 둘러쌀 수 있도록 한다.
글 왼쪽 정렬, 글 오른쪽 정렬 */
img {
float: left;
margin: 0 0 20px 20px;
border: 1px solid red;
}
/* float의 요소 배치를 clear로 해제 시킨다. */
.second {
/* clear: left; */
/* both : 설정된 어느쪽이든 해제 */
clear: both;
}
</style>
</head>
<body>
<img src="img.jpg" alt="html5" width="150" />
<p class="first">
태양계에서 바다가 있을 것으로 추정되는 행성은 지구 외에 목성의 위성 유로파와 가니메데, 칼리스토, 토성의 위성 엔셀라두스와 미마스, 타이탄, 그리고 해왕성의 위성 트리톤, 그리고 왜성 명왕성 등이다.
금성과 화성에는 오래 전 바다가 존재했던 것으로 추정된다.
</p>
<p class="second">
나사는 "카시니 탐사선은 토성에서 위성 엔셀라두스의 얼음층 아래에서 열수성 활동(hydrothermal activity)을 보여주는 해양이 있고, 또다른 위성인 타이탄에서는 액체 메탄 바다가 있다는
것을 발견해내는 많은 발견을 이뤘다"고 밝혔다.
</p>
</body>
</html>
21_float2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float2</title>
<style>
div {
text-align: center;
}
.div1 {
float: left;
width: 100px;
height: 50px;
border: 2px solid yellow;
}
.div2 {
border: 2px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
border: 2px solid orange;
}
.div4 {
border: 2px solid orangered;
clear: both;
}
</style>
</head>
<body>
<h2>일반 float</h2>
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<br />
<br />
<br />
<h2>clear float</h2>
<div class="div3">DIV3</div>
<div class="div4">DIV4</div>
</body>
</html>
22_overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
div {
border: 1px solid red;
/* overflow: auto ; 자동으로 content에 맞게 컨테이너 사이즈 조정 */
/* overflow: auto; */
}
.img {
float: right;
}
#parent {
border: 3px solid black;
height: 80px;
/* hidden ; overflow를 방지하지만 안보이게 한다. */
/* 부모보다 자식이 크기가 큰 경우를 잘라내기 위해서 */
overflow: hidden;
}
.child {
border: 1px soild blue;
/* float 디테일하게 영역을 설정할 수 있다. */
float: left;
/* inline도 정렬이지만 한줄 정렬이므로 float과 같은 효과를 주려면
inline-block을 사용한다. */
/* display: inline; */
/* display: inline-block; */
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>
<img class="img" src="img.jpg" width="150" height="150">
이미지를 담고 있는 컨테이너, 현재 이미지 세로 크기 보다 작다.
</div>
<!--부모 div는 overflow:hidden으로 설정한다.-->
<div id="parent">
<div class="child">자식 DIV</div>
<div class="child">자식 DIV</div>
</div>
</body>
</html>
23_overflow2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow2</title>
<style>
.float-frame {
background: #0f0;
border: 1px solid #f00;
padding: 10px;
overflow: hidden;
/*scroll, auto*/
}
.float-unit {
width: 50px;
height: 50px;
background: #333;
color: #fff;
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 15px;
float: left;
}
/* span을 추가하는 것보다 부모에 overflow:hidden 설정이 간편 */
/* span.clear {
display: block;
height: 20px;
background-color: chocolate;
clear: both;
} */
</style>
<body>
<div class="float-frame">
<div class="float-unit">A</div>
<div class="float-unit">B</div>
<div class="float-unit">C</div>
<div class="float-unit">D</div>
<!-- <span class="clear">span</span> -->
</div>
</body>
</html>
'ICIA 수업일지' 카테고리의 다른 글
| 2021.07.23 수업일지 (0) | 2021.07.24 |
|---|---|
| 2021.07.22 수업일지 (0) | 2021.07.24 |
| 2021.07.20 수업일지 (0) | 2021.07.24 |
| 2021.07.19 수업일지 (0) | 2021.07.24 |
| 2021.07.16 수업일지 (0) | 2021.07.17 |
