1. 텍스트관련 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<title>텍스트 관련 스타일</title>
<style>
#c{
color : yellowgreen;
color : #AA4A39; /* 색 사이트: paletton */
color : #03c75a; /* 16진수의 형태*/
color : rgb(155, 70, 220); /* 0 ~ 255 */
color : rgba(155, 70, 220, 0.2); /* 숫자가 작을수록 투명 */
color : hsl(200, 50%, 50%); /* 색상값(0~360), 채도(%), 명도(%) */
color : hsla(200, 50%, 50%, 0.333);
}
/* text-decoration */
.td1 { text-decoration : underline;}
.td2 { text-decoration : overline;}
.td3 { text-decoration : line-through;}
</style>
</head>
<body>
<h1>텍스트를 이쁘게 이쁘게</h1>
<pre id="c">
[ 표현법 ]
선택자 {
color : 값;
}
</pre>
<hr>
<h3> text-decoration : 텍스트에 줄을 긋거나 지울 때 사용 </h3>
<pre>
[ 표현법 ]
선택자 {
text-decoration : none / underline / overline / line-through;
}
</pre>
<ul>
<li class="td1">underline : 텍스트 아래에 선 긋기</li>
<li class="td2">overline : 텍스트 위에 선 긋기</li>
<li class="td3">line-through : 텍스트 중간에 선 긋기</li>
</ul>
<a href="http://www.naver.com" style="text-decoration:none; color:gray">네이버로~ : 밑줄 없애기</a>
<hr>
<h3> text-align : 텍스트를 정렬할 때 사용 </h3>
<pre>
[ 표현법 ]
선택자 {
text-align : left / right / center / justify(양쪽정렬);
}
</pre>
<h4 style="text-align:right;">
<p>품었기 구할 무엇이 못할 구하기 듣기만 군영과 있다. 역사를 품에 인류의 지혜는 것은 것이다. 위하여, 만천하의 이성은 새가 거친 가는 현저하게 속에 원질이 것이다. 살았으며, 꽃 찬미를 청춘의 청춘의 창공에 충분히 무엇을 것이다. 든 가는 끓는 방황하였으며, 너의 얼음 그리하였는가? 우리는 설레는 가치를 싸인 장식하는 인간이 날카로우나 사막이다. 타오르고 가진 피고, 품었기 것이다. 소리다.이것은 그러므로 천지는 위하여 고행을 현저하게 있는가? 새가 황금시대를 인생을 구하지 위하여 아름다우냐? 이성은 불러 우리 그와 열락의 능히 것이다.</p>
</h4>
<h4 style="text-align:center">
<p>품었기 구할 무엇이 못할 구하기 듣기만 군영과 있다. 역사를 품에 인류의 지혜는 것은 것이다. 위하여, 만천하의 이성은 새가 거친 가는 현저하게 속에 원질이 것이다. 살았으며, 꽃 찬미를 청춘의 청춘의 창공에 충분히 무엇을 것이다. 든 가는 끓는 방황하였으며, 너의 얼음 그리하였는가? 우리는 설레는 가치를 싸인 장식하는 인간이 날카로우나 사막이다. 타오르고 가진 피고, 품었기 것이다. 소리다.이것은 그러므로 천지는 위하여 고행을 현저하게 있는가? 새가 황금시대를 인생을 구하지 위하여 아름다우냐? 이성은 불러 우리 그와 열락의 능히 것이다.</p>
</h4>
<h4 style="text-align:justify">
<p>품었기 구할 무엇이 못할 구하기 듣기만 군영과 있다. 역사를 품에 인류의 지혜는 것은 것이다. 위하여, 만천하의 이성은 새가 거친 가는 현저하게 속에 원질이 것이다. 살았으며, 꽃 찬미를 청춘의 청춘의 창공에 충분히 무엇을 것이다. 든 가는 끓는 방황하였으며, 너의 얼음 그리하였는가? 우리는 설레는 가치를 싸인 장식하는 인간이 날카로우나 사막이다. 타오르고 가진 피고, 품었기 것이다. 소리다.이것은 그러므로 천지는 위하여 고행을 현저하게 있는가? 새가 황금시대를 인생을 구하지 위하여 아름다우냐? 이성은 불러 우리 그와 열락의 능히 것이다.</p>
</h4>
</body>
</html>
2. 목록관련 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<title>목록관련 스타일</title>
<style>
#ul1 {
list-style: none;
}
#ol1 {
list-style: upper-alpha;
}
#ul2 {
list-style-image: url("resources/image/iconsample.png");
list-style-position:inside;
}
</style>
</head>
<body>
<h1>목록관련스타일(list~)</h1>
<h3>list-style-type : 불릿 기호를 변경할 때 사용</h3>
<pre>
[ 표현법 ]
* 순서 없는 목록(ul)
선택자 {
list-style-type : disc / circle / square / none; => 보통 none하기 위해 많이 씀
}
* 순서 있는 목록(ol)
선택자 {
list-style-type : decimal(십진수)
list-style-type : lower-roman / upper-roman => 로마숫자
list-style-type : lower-alpha / upper-alpha => 알파벳
}
</pre>
<h4>순서 없는 목록</h4>
<ul id="ul1">
<li>포터</li>
<li>포니</li>
<li>프라이드</li>
<li>프린스</li>
</ul>
<h4>순서 있는 목록</h4>
<ul id="ol1">
<li>포터</li>
<li>포니</li>
<li>프라이드</li>
<li>프린스</li>
</ul>
<ul id="ul2">
<li>포터</li>
<li>포니</li>
<li>프라이드</li>
<li>프린스</li>
</ul>
</body>
</html>
3. 영역관련 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<title>영역관련스타일</title>
<style>
.test{
background-color:yellowgreen;
height:100px;
width:100px;
border : 10px solid black;
}
#test1 {
padding : 100px;
}
#test2 {
padding-top : 50px;
padding-left : 10px;
}
#test3 {
/* padding : 50px 20px 10px 0px;*/
padding : 50px 20px; /* 위쪽/아래쪽 , 양 옆 */
}
#test4 {
margin : 50px;
}
#test5 {
margin-top : 50px;
margin-left : 100px;
}
#test6 {
/*margin : 50px 20px 10px 0px;*/
/*
margin-left : auto;
margin-right : auto;
*/
margin : auto;
/* margin : auto; 부모요소의 크기가 변해도 좌우 간격을 자동으로 가운데로 맞춰줌 */
}
</style>
</head>
<body>
<h1>매우중요!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
<br><br>
<h1>여백 및 간격 관련 스타일</h1>
<h4>기준 div</h4>
<div class="test">기준div</div>
<p>
영역구분(바깥쪽에서 안쪽으로) <br>
1. margin : 바깥쪽 여백 영역 <br>
2. border : 테두리 영역 => 여기까지가 실제 요소의 크기 <br>
3. padding : 내용물영역과 테두리 영역 사이의 거리(안쪽여백) <br>
4. content : 실제 내용물이 들어있는 영역 <br>
실제 요소의 크기(영역) == content + padding + border
</p>
<hr>
<h3>padding</h3>
<p>
내용물 영역(content)과 테두리 영역(border) 사이의 거리(여백)을 조절하는 속성
</p>
<div class="test" id="test1">컨텐트영역</div>
<p>padding:100px</p>
<div class="test" id="test2">컨텐트영역</div>
<p>padding-top : 50px, padding-left : 10px</p>
<div class="test" id="test3">컨텐트영역</div>
<p>padding : 50px 20px 10px 0px</p>
<hr>
<h3>margin</h3>
<p>
타 요소들 사이에 간격을 조정할 때 사용 <br>
실제 요소의 영역에는 포함되지 않음!!!!!!!!!!!!!!!!!!!!!!!!! <br>
</p>
<div class="test" id="test4">컨텐트영역</div>
<b>margin:50px</b>
<div class="test" id="test5">컨텐트영역</div>
<b>margin-top:50px margin-left:50px</b>
<div class="test" id="test6">컨텐트영역</div>
<b>margin: 50px 20px 10px 0px</b>
</body>
</html>
4. 테두리관련 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<title>나는 테두리를 그릴 수 있어</title>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
}
#test1 {
border-style : dotted;
border-width : 10px;
border-color : tomato;
border-top-style : double;
border-right-color : violet;
border-bottom-width : 1px;
}
#test2 {
/* 테두리의 두께 스타일 색상을 한 번에 지정 */
border : 10px dotted yellowgreen;
border-left-style : solid;
border-top : 5px dashed orangered;
}
#test3 {
border-style : dashed double solid dotted;
/* 12시 방향부터 시계방향으로 적용 */
}
#test3 {
border-style:groove; /* 패인 액자 느낌 */
border-width:10px;
border-top-left-radius: 50px;
}
#test4 {
border-style:ridge; /* 튀어나온 액자 느낌 */
border-width: 10px;
border-bottom-right-radius: 50px;
}
#test5 {
border-style:inset;
border-width:10px;
}
#test6 {
border-style:outset;
border-width:10px;
}
#test7 {
border-radius: 80px;
border : solid;
}
#test8 {
border : solid;
box-shadow : 5px 5px 10px 5px gray;
}
#test9 {
border : 2px solid orangered;
}
#btn{
color : crimson;
border : 2px dashed orangered;
background-color : royalblue;
padding : 30px;
border-radius : 10px;
}
#btn:hover{
cursor:pointer;
color:lightyellow;
background-color: aquamarine;
}
#ts{
font-size : 50px;
font-weight : 800;
color : white;
text-shadow : 0px 0px 4px grey,
0px -5px 4px yellow,
0px -10px 8px orange,
0px -15px 14px orangered,
0px -22px 19px red;
}
</style>
</head>
<body>
<h1>테두리관련스타일(border~)</h1>
<pre>
[ 표현법 ]
선택자 {
* 테두리 스타일
border-위치-style : none / dotted / dashed / solid* /double / groove / ridge / inset / outset
* 테두리 두께
border-위치width : 테두리 두께 px;
* 테두리 색상
border-위치-color : 테두리 색상;
* 테두리 모서리를 동그랗게
border-위치-radius : 숫자 px, %;
=> 위치 생략가능
* 박스에 그림자
box-shadow : 가로(x) 세로(y) 흐림정도 번짐정도 색상;
}
</pre>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
<div id="test6"></div>
<div id="test7"></div>
<div id="test8"></div>
<div id="test9"></div>
<div id="test10"></div>
<br><br><br>
<button id="btn">수업종료버튼</button>
<br><br><br><br>
<div id="ts">야근</div>
</body>
</html>
5. 배경관련 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<title>나는 배경을 띄울 수 있어~</title>
<style>
body {
background-color:paleturquoise;
}
#div-bg{
border:30px solid lightpink;
padding : 20px;
background-color : white;
/* div요소의 content영역의 가로길이를 부모요소의 50%로 지정하겠다는 뜻 */
width : 50%;
box-sizing:border-box;
/* 가로길이를 border영역까지 포함해서 지정하겠다. */
}
.div-test{
border : 10px dashed;
margin : 30px;
padding : 20px;
background-color : lightgreen;
}
#div1{
background-clip : border-box;
}
#div2{
background-clip: padding-box;
}
#div3{
background-clip:content-box;
}
.bg-img{
border : 1px solid red;
width : 70%;
height : 800px;
background-image : url(resources/image/bono.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : 100%; /* contain, cover*/
background-attachment : scroll;
}
</style>
</head>
<body>
<h1>배경관련스타일(background~)</h1>
<h3>background-color / background : 배경색을 지정할 수 있는 스타일 속성</h3>
<div id="div-bg">
이제 언덕 없이 파란 벌써 남은 별 까닭입니다. 멀리 추억과 별 패, 토끼, 까닭입니다. 위에 부끄러운 불러 하나에 이런 하나에 까닭입니다. 언덕 사람들의 벌써 못 비둘기, 하나에 이런 가슴속에 밤이 거외다. 못 내 마디씩 슬퍼하는 까닭이요, 가을 있습니다. 소학교 멀듯이, 아직 하나 별 가슴속에 가득 있습니다. 무성할 하나에 애기 자랑처럼 하나에 쓸쓸함과 까닭입니다. 이름을 동경과 별 프랑시스 잔디가 하나에 때 계십니다. 별 이 자랑처럼 이런 강아지, 소학교 계십니다.
까닭이요, 못 사랑과 내일 어머니 겨울이 버리었습니다. 속의 까닭이요, 하나의 덮어 하늘에는 우는 경, 때 써 있습니다. 멀듯이, 않은 노새, 아스라히 별 별 이름자 거외다. 하나에 사람들의 헤일 이름과, 옥 봅니다. 무성할 써 다 봅니다. 별 내린 그리워 마리아 마디씩 이름과, 나는 헤는 하나 버리었습니다. 내 프랑시스 이런 불러 것은 하늘에는 벌써 말 그러나 봅니다. 어머니, 딴은 봄이 있습니다. 하나에 노새, 불러 아름다운 봅니다. 걱정도 오는 한 못 밤을 소학교 까닭입니다. 이런 이름자를 피어나듯이 나의 속의 하나에 내 계십니다.
</div>
<h3>background-clip : 배경을 적용시키고자 하는 범위를 지정할 때 사용</h3>
<pre>
[ 표현법 ]
선택자 {
background-clip : border-box / padding-box / content-box;
}
</pre>
<div id="div1" class="div-test">
이제 언덕 없이 파란 벌써 남은 별 까닭입니다. 멀리 추억과 별 패, 토끼, 까닭입니다. 위에 부끄러운 불러 하나에 이런 하나에 까닭입니다. 언덕 사람들의 벌써 못 비둘기, 하나에 이런 가슴속에 밤이 거외다. 못 내 마디씩 슬퍼하는 까닭이요, 가을 있습니다. 소학교 멀듯이, 아직 하나 별 가슴속에 가득 있습니다. 무성할 하나에 애기 자랑처럼 하나에 쓸쓸함과 까닭입니다. 이름을 동경과 별 프랑시스 잔디가 하나에 때 계십니다. 별 이 자랑처럼 이런 강아지, 소학교 계십니다.
까닭이요, 못 사랑과 내일 어머니 겨울이 버리었습니다. 속의 까닭이요, 하나의 덮어 하늘에는 우는 경, 때 써 있습니다. 멀듯이, 않은 노새, 아스라히 별 별 이름자 거외다. 하나에 사람들의 헤일 이름과, 옥 봅니다. 무성할 써 다 봅니다. 별 내린 그리워 마리아 마디씩 이름과, 나는 헤는 하나 버리었습니다. 내 프랑시스 이런 불러 것은 하늘에는 벌써 말 그러나 봅니다. 어머니, 딴은 봄이 있습니다. 하나에 노새, 불러 아름다운 봅니다. 걱정도 오는 한 못 밤을 소학교 까닭입니다. 이런 이름자를 피어나듯이 나의 속의 하나에 내 계십니다.
</div>
<div id="div2" class="div-test">
이제 언덕 없이 파란 벌써 남은 별 까닭입니다. 멀리 추억과 별 패, 토끼, 까닭입니다. 위에 부끄러운 불러 하나에 이런 하나에 까닭입니다. 언덕 사람들의 벌써 못 비둘기, 하나에 이런 가슴속에 밤이 거외다. 못 내 마디씩 슬퍼하는 까닭이요, 가을 있습니다. 소학교 멀듯이, 아직 하나 별 가슴속에 가득 있습니다. 무성할 하나에 애기 자랑처럼 하나에 쓸쓸함과 까닭입니다. 이름을 동경과 별 프랑시스 잔디가 하나에 때 계십니다. 별 이 자랑처럼 이런 강아지, 소학교 계십니다.
까닭이요, 못 사랑과 내일 어머니 겨울이 버리었습니다. 속의 까닭이요, 하나의 덮어 하늘에는 우는 경, 때 써 있습니다. 멀듯이, 않은 노새, 아스라히 별 별 이름자 거외다. 하나에 사람들의 헤일 이름과, 옥 봅니다. 무성할 써 다 봅니다. 별 내린 그리워 마리아 마디씩 이름과, 나는 헤는 하나 버리었습니다. 내 프랑시스 이런 불러 것은 하늘에는 벌써 말 그러나 봅니다. 어머니, 딴은 봄이 있습니다. 하나에 노새, 불러 아름다운 봅니다. 걱정도 오는 한 못 밤을 소학교 까닭입니다. 이런 이름자를 피어나듯이 나의 속의 하나에 내 계십니다.
</div>
<div id="div3" class="div-test">
이제 언덕 없이 파란 벌써 남은 별 까닭입니다. 멀리 추억과 별 패, 토끼, 까닭입니다. 위에 부끄러운 불러 하나에 이런 하나에 까닭입니다. 언덕 사람들의 벌써 못 비둘기, 하나에 이런 가슴속에 밤이 거외다. 못 내 마디씩 슬퍼하는 까닭이요, 가을 있습니다. 소학교 멀듯이, 아직 하나 별 가슴속에 가득 있습니다. 무성할 하나에 애기 자랑처럼 하나에 쓸쓸함과 까닭입니다. 이름을 동경과 별 프랑시스 잔디가 하나에 때 계십니다. 별 이 자랑처럼 이런 강아지, 소학교 계십니다.
까닭이요, 못 사랑과 내일 어머니 겨울이 버리었습니다. 속의 까닭이요, 하나의 덮어 하늘에는 우는 경, 때 써 있습니다. 멀듯이, 않은 노새, 아스라히 별 별 이름자 거외다. 하나에 사람들의 헤일 이름과, 옥 봅니다. 무성할 써 다 봅니다. 별 내린 그리워 마리아 마디씩 이름과, 나는 헤는 하나 버리었습니다. 내 프랑시스 이런 불러 것은 하늘에는 벌써 말 그러나 봅니다. 어머니, 딴은 봄이 있습니다. 하나에 노새, 불러 아름다운 봅니다. 걱정도 오는 한 못 밤을 소학교 까닭입니다. 이런 이름자를 피어나듯이 나의 속의 하나에 내 계십니다.
</div>
<hr>
<h3>배경 이미지 테스트</h3>
<pre>
[ 표현법 ]
선택자 {
background-image : url(이미지경로);
background-repeat : repeat / repeat-x / reapeat-y / no-repeat;
background-size : auto / contain / cover / 숫자(px/%);
background-position : left / right / center 중 1
top / bottom / center 중 1
background-attchment : scroll / fixed;
}
</pre>
<div class="bg-img"></div>
</body>
</html>
6. 레이아웃관련 스타일1
<!DOCTYPE html>
<html lang="en">
<head>
<title>레이아웃관련스타일 1번!!!</title>
<style>
.size-test{
border : 10px solid red;
}
#test1{
width : 400px;
height : 200px;
}
#test2{
width : 50%;
height : 150px;
}
.pink{background-color:pink;}
.beige{background-color:beige;}
.cornflowerblue{background-color:cornflowerblue;}
.lavender{background-color:lavender;}
.palegreen{background-color:palegreen;}
/* display-test */
.display-test{
width : 150px;
height : 150px;
border : 1px solid black;
}
.inline{
display : inline;
}
.inline-block{
display : inline-block;
}
.block{
display : block;
}
</style>
</head>
<body>
<!--
블럭 요소 : 한줄 단위로 영역이 잡힘 / 자동으로 줄 바꿈 발생(div, p, pre, h1~h6)
인라인 요소 : content의 크기만큼만 영역이 잡힘 / 옆으로 배치 됨(span, label, input)
-->
<h1>레이아웃 관련 스타일1</h1>
<h3>width, height</h3>
<p>
content영역의 크기를 조절하는 속성
</p>
<h4>고정 크기</h4>
<div id="test1" class="size-test"></div>
<h4>가변 크기</h4>
<div id="test2" class="size-test"></div>
<hr>
<h3>display : 화면 배치 방법 변경 </h3>
<p>
블럭요소와 인라인 요소의 속성을 변경해서 배치 방식을 변경할 수 있음
</p>
<pre>
[ 표현법 ]
선택자 {
display : inline / block / inline-block; (hidden)
}
</pre>
<!-- 기존의 블럭요소인 div를 인라인 요소로 바꿔보기 -->
<h4>display : inline</h4>
<!-- Before -->
<div class="display-test pink">1번째 영역</div>
<div class="display-test beige">2번째 영역</div>
<div class="display-test cornflowerblue">3번째 영역</div>
<div class="display-test lavender">4번째 영역</div>
<div class="display-test palegreen">5번째 영역</div>
<br>
<!-- After -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~🌵공백제거하는 신박한 방법~~~~~~~~~~~~~~~~~~ -->
<div class="display-test inline pink">1번째 영역</div
><div class="display-test inline beige">2번째 영역</div><!--
--><div class="display-test inline cornflowerblue">3번째 영역</div
><div class="display-test inline lavender">4번째 영역</div
><div class="display-test inline palegreen">5번째 영역</div>
<b>display : inline 속성을 부여하면 width, height 속성이 적용 XXX </b>
<br><br><br>
<!-- inline요소로 배치는 하나, width, height 속성을 유지되게끔 하고 싶다. -->
<h4>display : inline-block </h4>
<!-- After -->
<div class="display-test inline-block pink">1번째 영역</div>
<div class="display-test inline-block beige">2번째 영역</div>
<div class="display-test inline-block cornflowerblue">3번째 영역</div>
<div class="display-test inline-block lavender">4번째 영역</div>
<div class="display-test inline-block palegreen">5번째 영역</div>
<!-- 기존의 inline요소인 span요소를 블럭요소로 바꿔보기 -->
<h3>display : block</h3>
<!-- Before -->
<span class="display-test1 pink">1</span>
<span class="display-test2 beige">2</span>
<span class="display-test3 cornflowerblue">3</span>
<span class="display-test4 lavender">4</span>
<span class="display-test5 palegreen">5</span>
<br><br><br>
<span class="display-test1 block pink">1</span>
<span class="display-test2 block beige">2</span>
<span class="display-test3 block cornflowerblue">3</span>
<span class="display-test4 block lavender">4</span>
<span class="display-test5 block palegreen">5</span>
</body>
</html>
7. 레이아웃관련 스타일2
<!DOCTYPE html>
<html lang="en">
<head>
<title>배치관련스타일</title>
<style>
.outer{
border : 1px solid black;
position : relative; /* 나는 기준이다 */
/*
1단계 : 기준이 되는 요소에 position : relative;
2단계 : 이동시킬 요소 position : absolute;
3단계 : 이동시킬 요소에 얼마만큼 이동할건지 명시
*/
}
.positioning{
border : 1px solid skyblue;
}
#first{
width : 300px;
height : 300px;
background : yellowgreen;
}
#second{
width : 200px;
height : 200px;
background : green;
position : absolute; /* 기준점을 기준으로 움직이겠다 */
top : 50px;
left : 80px;
}
#third{
width : 100px;
height : 100px;
background : yellow;
position : absolute;
top : 100px;
left : 130px;
}
/* z-index */
.z-test{
width : 150px;
height : 150px;
border : 1px solid black;
position : absolute;
}
#z1{
background-color : powderblue;
top : 100px;
left : 100px;
z-index : 5;
}
#z2{
background-color : lightpink;
top : 50px;
left : 50px;
z-index : 3;
}
#z3{
background-color : aquamarine;
}
/*
z-index 특징
1. z-index값이 높을수록 위에 쌓임
2. 값의 크기는 상관이 없음
*/
/* visibility */
.vis-test{
width : 100px;
height : 100px;
}
#vis{
/* 요소가 보이지 않음! 단, 공간을 차지함 */
/* visibility : hidden;*/
/* 요소가 보이지 않음! 공간도 차지하지 않음! */
display : none;
}
/* float */
.float-test{
width : 50px;
height : 50px;
border : 1px solid;
float : left;
}
</style>
</head>
<body>
<h1>배치관련 스타일!!</h1>
<h3>position : 절대위치와 상대위치</h3>
<div class="outer">
<div class="positioning" id="first">첫 번째 자식</div>
<div class="positioning" id="second">두 번째 자식</div>
<div class="positioning" id="third">세 번째 자식</div>
</div>
<hr>
<h3> z-index </h3>
<p>
페이지 안의 요소들을 순서대로 위로 쌓는 속성 <br>
'맨 위로 이동!' 처럼 맨 앞쪽으로 요소를 두고 싶을 때 씀!!
</p>
<div class="outer">
<div class="z-test" id="z1">요소1</div>
<div class="z-test" id="z2">요소2</div>
<div class="z-test" id="z3">요소3</div>
</div>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3>visibility</h3>
<div class="vis-test" style="background-color: black;"></div>
<div class="vis-test" style="background-color: lightslategray;" id="vis"></div>
<div class="vis-test" style="background-color: royalblue;"></div>
<hr>
<h3>float</h3>
<p>
페이지 내의 요소들을 화면으로부터 띄워서 왼쪽 또는 오른쪽으로 배치하는 속성
</p>
<div class="float-test">1</div>
<div class="float-test">2</div>
<div class="float-test">3</div>
<div class="float-test">4</div>
<div class="float-test">5</div>
<br clear="both">
<!-- float속성을 해제할 때 사용 -->
<div style="border : 1px solid red">안녕하세용</div>
</body>
</html>
'FrontEnd > CSS' 카테고리의 다른 글
| #37. CSS(화면구조잡기 및 통합) (0) | 2023.08.23 |
|---|