CSS의 모든것, 문법총정리 적용예시4
Devel/HTML&CSS&JAVASCRIPT2020. 11. 22. 16:36
반응형
#background-color 속성
: 요소의 배경색상을 지정하는 속성이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-color 실습</title>
<style type="text/css">
h1 {
background-color: green;
}
div {
background-color: #00ffff;
}
p {
background-color: rgb(0,200,255);
}
</style>
</head>
<body>
<h1>홍길동</h1>
<div>
이순신
<p>강감찬</p>
background-color 실습
</div>
</body>
</html>
#background-image 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image 실습</title>
<style type="text/css">
body{
background-image:url('../01HTML_CSS/images/BackgroundFront.png');
}
</style>
</head>
<body>
</body>
</html>
#background-image 속성 ( 중첩, CSS3 )
: 요소의 배경에 이미지를 중첩해서 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image 실습</title>
<style type="text/css">
body{
background-image:url('../images/BackgroundFront.png'),url('../images/BackgroundBack.png');
}
</style>
</head>
<body>
</body>
</html>
#background-repeat 속성
: 기본적으로 이미지를 수평 및 수직 반복해서 전체화면에 꽉 차게 보여진다. 이때 수평 또는 수직으로 반복 처리 및 반복 처리하지 않는 경우에 사용 가 능한 속성이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-repeat 실습</title>
<style type="text/css">
body{
background-image:url('../images/bg.jpg');
background-repeat: repeat-x; /*x축으로 반복 */
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-repeat 실습</title>
<style type="text/css">
body{
background-image:url('../images/bg.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
#background-attachment 속성
-그림 고정되어 있음.
-attachment fixed로 고정
#background-position 속성
: 배경 이미지의 위치를 지정하는 속성이다
#css 폰트 속성
: font-family
font-size
font-style
font-weight
#font-family 속성
: -폰트를 지정하는 속성이다.
- CSS에서는 다음과 같은 2가지 기본적인 font family 이름을 사용한다.
가. generic family 비슷하게 보여지는 font family들의 그룹을 의미 ( ‘Serif’ , ‘Monospace’ 등)
나. font family 구체적인 font family를 의미 ( ‘Arial’ , ‘Times New Roman’ 등 )
- 사용자의 컴퓨터에 폰트가 없으면 폰트가 적용되지 않는다.
- 만약을 대비해서 여러 개의 폰트를 연속적으로 입력해서 사용한다. 하지만 웹 페이지를 제공할 경우 사용자에게 어떤 폰트가 있는지 일일이 확인이 불 가능하다. 이러한 경우에는 generic family 폰트를 사용한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font-family 실습</title>
<style type="text/css">
.font-arial{
font-family: '없는 폰트' , sans-serif;
}
.font-roman{
font-family: '없는 폰트' , serif;
}
.font-ansang{
font-family: '굵은안상수체' , sans-serif;
}
</style>
</head>
<body>
<h1 class="font-arial">Lorem ipsum</h1>
<h1 class="font-roman">Lorem ipsum</h1>
<h1 class="font-ansang">Lorem ipsum</h1>
</body>
</html
#font-size 속성
- 폰트의 크기를 지정하는 속성이다.
- 7단계 ( xx-small,x-small,small,medium,large,x-large,xx-large)의 값 또 는 상위 요소에 대한 %, px, em 으로 사용.
- 기본적으로 웹 브라우저의 폰트 사이즈는 16px 이다. (1em 이 16px이다. )
xx-Large와 h1과 크기 같음.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font-size 실습</title>
<style type="text/css">
.a{
font-size: xx-small;
}
.b{
font-size: x-small;
}
.c{
font-size: small;
}
.d{
font-size: medium;
}
.e{
font-size: large;
}
.f{
font-size: x-large;
}
.g{
font-size: xx-large;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h1 class="a">Lorem ipsum</h1>
<h1 class="b">Lorem ipsum</h1>
<h1 class="c">Lorem ipsum</h1>
<h1 class="d">Lorem ipsum</h1>
<h1 class="e">Lorem ipsum</h1>
<h1 class="f">Lorem ipsum</h1>
<h1 class="g">Lorem ipsum</h1>
<h1 class="h">Lorem ipsum</h1>
</body>
</html>
1em=16px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font-size 실습</title>
<style type="text/css">
.a{
font-size: 2em;
}
.b{
font-size: 32px;
}
.c{
font-size: 2.5em; /* 40px/16=2.5em */
}
.d{
font-size: 1.875em; /* 30px/16=1.875em */
}
.e{
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h1 class="a">Lorem ipsum</h1>
<h1 class="b">Lorem ipsum</h1>
<h1 class="c">Lorem ipsum</h1>
<h1 class="d">Lorem ipsum</h1>
<h1 class="e">Lorem ipsum</h1>
</body>
</html>
#font-style 속성과 #font-weight 속성
#글자(text) 속성
:
color, text-align, text-decoration, text-transform, text-indent, letter-spacing, line-height, word-spacing
#text-align 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-align 실습</title>
<style type="text/css">
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
</body>
</html>
#justify
justify 속성값은 모든 라인의 width가 늘어난다. (양쪽 정렬)
#text-decoration 속성
- 글자에 데코레이션을 지정하는 속성이다. ( 밑줄 설정/제거 등 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-decoration 실습</title>
<style type="text/css">
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
a{
text-decoration: none; /* a 태그의 링크 제거 */
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<a href="#">링크</a>
</body>
</html>
#text-transform 속성
- 글자를 대소문자 및 첫 글자 대문자로 지정하는 속성이다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-transform 실습</title>
<style type="text/css">
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
#text-indent 속성
- 첫 라인을 들여쓰기 하는 속성이다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-indent 실습</title>
<style type="text/css">
div{
text-indent: 50px;
}
</style>
</head>
<body>
<div>
In my younger and more vulnerable years my father
gave me some advice that I've been turning over
in my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me, 'just remember that all the people in
this world haven't had the advantages that you've had.'
</div>
</body>
</html>
#letter-spacing 속성
- 글자 간격을 설정할 때 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>letter-spacing 실습</title>
<style type="text/css">
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
#word-spacing 속성
- 단어 간격을 설정할 때 사용한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>word-spacing 실습</title>
<style type="text/css">
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
#line-height 속성
- 라인 간격을 설정할 때 사용한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>line-height 실습</title>
<style type="text/css">
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p>
standard line-height.
standard line-height.
</p>
<p class="small">
smaller line-height.
smaller line-height.
</p>
<p class="big">
bigger line-height.
bigger line-height.
</p>
</body>
</html>
#position 속성
- 태그의 위치 설정 방법을 변경할 때 사용한다
#static
기본값
- 모든 html 태그들은 기본으로 static position으로 위치가 결정된다. - static position은 top, bottom, left, right 속성에 영향 받지 않는다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position static 실습</title>
<style type="text/css">
div.static {
position: static; /* 기본 */
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned
in any special way; it is
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
<div class="static">
2번짼 This div element has position: static;
</div>
</body>
</html>
-position이 static으로 지정되어 있기 때문에, top, left영향을 받지 않는다.
#relative 속성
- normal position 기준으로 부터 상대적인(relative) 위치가 결정된다. - relative position은 top, bottom, left, right 속성과 같이 사용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position relative 실습</title>
<style type="text/css">
div.relative {
position: relative;
left:70px;
top: 20px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned
in any special way; it is
always positioned according to the normal flow of the page:</p>
<div class="relative">
This div element has position: static;
</div>
</body>
</html>
#fixed 속성
- viewport를 기준으로 하는 상대적인(relative) 위치가 결정된다. 따라서 페이지가 scroll 되도 항상 고정된 위치에 보여진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position fixed 실습</title>
<style type="text/css">
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to
the viewport, which means it always stays in the same place
even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
#absolute 속성
- 가장 가까운 부모 요소 기준으로 하는 상대적인(relative) 위치가 결정된다. 만약 부모 요소가 없거나 부모요소에 position 설정값(stati제외)을 설정하지 않으면 body 요소를 기준으로 설정된다. 따라서 scroll하면 움직이게 된다
- 부모 요소안에 자식요소를 absolute 속성을 이용하여 위치시키는 기본 방법
가. 부모요소에 height 속성을 설정한다
나. 부모요소에 relative position을 설정한다.
다. 자식요소에 absolute position을 설정한다.
-absolute의 가까운 부모인 relative을 기준으로 정렬됨.
-바로 위에 부모가 없으면 , body 기준으로, 부모가 있어도 설정값이 없다면, body 기준으로 정렬됨.
-부모 요소가 없을 경우, 찾아 올라가 body를 기준으로 정렬
absolute의 부모인 relative의 기준이 없기때문에 body를 기준으로 정렬됨.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position absolute 실습</title>
<style type="text/css">
div.relative {
/* position: relative; */ /*부모가 relativ가 없으면 자식은 부모를 따라위치하지 않음 */
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative
to the nearest positioned ancestor (instead of positioned relative
to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
#z-index 속성 (Overlapping 요소 처리 )
- 요소가 position 될 때 겹쳐져 보일 수가 있다. 이때 요소의 stack 순서를 변 경할 수 있는 속성이다. ( 기본은 아래 입력한 요소가 위로 올라온다.)
- 큰 값을 입력할 수록 위로 올라온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index 실습</title>
<style type="text/css">
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="../images/001.png" width="100" height="140">
<p>Because the image has a z-index of -1,
it will be placed behind the text.</p>
</body>
</html>
#overflow 속성
- 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할 지 지정하는 속성이다.
#overflow-visible
- 영역이 벗어나도 내부요소가 보여진다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow visible 실습</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want
to have better control of the layout.
The overflow property specifies what happens
if content overflows an element's box.</div>
</body>
</html>
#overflow- hidden
- 영역이 벗어나는 부분을 보이지 않게 처리한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow hidden 실습</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want
to have better control of the layout.
The overflow property specifies what happens
if content overflows an element's box.</div>
</body>
</html>
Colored by Color Scripter
#overflow- scroll
- 무조건 모든 축(x,y)에 스크롤이 생성된다.
- overflow-x , overflow-y 속성을 사용하면 필요한 축에만 설정 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow scroll 실습</title>
<style type="text/css">
div {
width: 200px;
height: 150px;
background-color: #eee;
overflow: scroll;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want
to have better control of the layout.
The overflow property specifies what happens
if content overflows an element's box.</div>
</body>
</html>
#overflow-auto
- Scroll과 비슷하다. 차이점은 필요할 때만 scroll이 추가된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow scroll 실습</title>
<style type="text/css">
div {
width: 200px;
height: 150px;
background-color: #eee;
overflow: auto;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, me
aning that it is not
clipped and it renders outside the element's box:</p>
<div>You can use the overflow property when you want
to have better control of the layout.
The overflow property specifies what happens
if content overflows an element's box.</div>
</body>
</html>
Colored by Color Scripter
#float 속성
- 특정 태그의 주위로 wrap할 수 있도록 left 또는 right로 밀어 넣을 수 있는 방법이다. ( horizontal 만 가능, up과 down은 불가능 )
-float run사용도 함.(float를 없앤다.)
- floating 태그의 before 요소는 영향을 받지 않는다.
- clear 속성으로 해제한다.
- 웹 페이지의 레이아웃을 구성할 때 반드시 사용하는 속성이다.
- 부유하는 대상을 만들 때 사용한다.
-div만들고container 형성, 그 안에 배치할 요소 넣어주고, 정렬 배치 시킬때 많이 사용함.
이미지 태그(이미지 왼쪽으로 태그) 바로 옆에 달라붙어있음.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 실습</title>
<style type="text/css">
img{
/* float:clear; */
float: left;
}
</style>
</head>
<body>
<img src="../images/001.png" />
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaAAAAAAAAAAAAAAA</p>
<h1>xxxxxxxx</h1>
</body>
</html>
clear 사용시
-같은 레벨에 있는 요소에 float 속성을 적용하면 수평 정렬된다.
- 자손에 float 속성을 적용할 경우에는 반드시 부모의 overflow 속성에 hidden으로 설정한다.
box1,2번은 wrap의 자식
box3은 body의 자식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 실습</title>
<style type="text/css">
#wrap {
overflow: hidden;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
float: left;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
#float sample예제
#1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 실습</title>
<style type="text/css">
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="../images/001.png" width="107" height="90">
<img class="thumbnail" src="../images/001.png" width="107" height="80">
<img class="thumbnail" src="../images/001.png" width="116" height="90">
<img class="thumbnail" src="../images/001.png" width="120" height="90">
<img class="thumbnail" src="../images/001.png" width="107" height="90">
<img class="thumbnail" src="../images/001.png" width="107" height="80">
<img class="thumbnail" src="../images/001.png" width="116" height="90">
<img class="thumbnail" src="../images/001.png" width="120" height="90">
</body>
</html>
#2
text_line: clear both로 양쪽의 float 해제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 실습</title>
<style type="text/css">
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="../images/001.png" width="107" height="90">
<img class="thumbnail" src="../images/001.png" width="107" height="80">
<img class="thumbnail" src="../images/001.png" width="116" height="90">
<img class="thumbnail" src="../images/001.png" width="120" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="../images/001.png" width="107" height="90">
<img class="thumbnail" src="../images/001.png" width="107" height="80">
<img class="thumbnail" src="../images/001.png" width="116" height="90">
<img class="thumbnail" src="../images/001.png" width="120" height="90">
</body>
</html>
clear both 주석 처리하면
#3
-workshp예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
margin: 10px;
}
#all{
width:100%;
height:768px;
border:1px solid blue;
}
#top{
width:100%;
height:20%;
background-color: red;
border: 1px solid red;
}
#nav{
width:100%;
height: 5%;
background-color: yellow;
text-align: right;
}
ul{
margin: 0px
}
#nav li{
display: inline;
}
#left{
width:20%;
height: 65%;
background-color:green;
float: left;
}
#center{
width:100%;
height: 65%;
background-color:grey;
float: none;
}
#bottom{
width:100%;
height: 10%;
background-color:yellow;
text-align: right;
float: center;
}
</style>
</head>
<body>
<div id="all">
<div id="top">
</div>
<div id="nav">
<ul>
<li><a href="">로그인</a></li>
<li><a href="">회원가입</a></li>
<li><a href="">게시판</a></li>
</ul>
</div>
<div id="left">
<ul>
<li>Java</li>
<li>Java2</li>
<li>Java3</li>
<li>Java4</li>
</ul>
</div>
<div id="center">
</div>
<div id="bottom">
copyright ~~~~
</div>
</div>
</body>
</html>
width: 모니터 해상도를 적거나, 100%는 화면의 100%쓰겠다.
nav에 있는 li만 설정해야 하기 때문에
nav의 자손, #nav li를 inline으로 바꿈.
'Devel > HTML&CSS&JAVASCRIPT' 카테고리의 다른 글
| input 입력했을때 자동으로 3자리 콤마 , 추가 되는 법(onkeyup활용예제) (0) | 2021.11.24 |
|---|---|
| 금액이나 단위 3자리에 콤마 "," 추가 하는 방법 (0) | 2021.11.24 |
| CSS의 모든것, 문법총정리3(margin,padding 총정리)및 적용예시 (0) | 2020.09.05 |
| CSS의 모든것, 문법총정리2 (0) | 2020.09.05 |
| CSS의 모든것, 문법총정리(선택자, 자식, 자손,형제 개념과 적용예제) (0) | 2020.09.05 |
댓글()
