[CSS] background, font, button, gradiant
배경 속성
-특정 태그의 배경 이미지 또는 색상을 지정하는 스타일 속성
-종류
1) background-image 속성
-배경에 넣을 그림을 지정하는 스타일 속성
-속성에는 URL 단위 또는 그레이디언트를 입력
2) background-size 속성
-그림 크기를 조절할 때 사용하는 스타일 속성이며 CSS3에 추가된 기능
-키워드: contain/cover
-contain: 너비를 100%로 지정한 것과 같은 효과
-cover: 높이를 100%로 지정한 것과 같은 효과
3) background-repeat 속성
-repeat: 이미지가 패턴을 이룸
-키워드: no-repeat/repear/repeat-x/repeat-y/round/space
-repeat-x: x축 방향으로 이미지가 반복
-repeat-y: y축 방향으로 이미지가 반복
4) background-attachment 속성
-배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 스타일 속성
-속성의 기본 키워드: scroll(키워드: fixed/scroll)
-fixed: 스크롤을 이동해도 배경이미지 고정
5) background-position 속성
-background-position: x축 위치;
-background-position: x축 위치 y축 위치;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background.html</title>
<style type="text/css">
body{border:2px dashed red; margin:0px;}
body *{margin:10px; padding:10px; border:1px solid black;}
body{
background-image: url(images/BackgroundFront.png);
background-size:100%;
/* 가로(x축 방향) 또는 세로(y축 방향) 중 먼저 꽉차는 크기 사이즈 조절*/
background-repeat: repeat-x;
background-attachment:fixed;
/* 위치 고정되어 항상 고정된 위치에 나타남*/
background-position:0px 500px;
/* 0px: 왼쪽부터 x축 방향(오른쪽)으로 떨어진 거리, 500px: 위쪽부터 y축 방향(아래)으로 떨어진 거리.
좌표적용 기준점: 이미지의 왼쪽과 위쪽 경계선의 위치*/
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</p>
<h1>Lorem ipsum</h1>
<p>제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</p>
<h1>Lorem ipsum</h1>
<p>제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</p>
</body>
</html>
폰트 속성: 글자와 관련된 스타일 속성
1. font-size 속성
-글자의 크기를 지정하는 스타일 속성.
참고) h1 태그:32px, p 태그: 16px
2. forn-family 속성
-폰트를 지정하는 스타일 속성
-일반적으로 한 단어로 이루어진 폰트는 따옴표를 사용하지 않음.
하지만 두 단어 이상으로 이루어진 단어는 따옴표 반드시 적용
3. font-style 속성
-폰트의 기울기 지정하는 스타일 속성
-키워드: italic 등
4. font-weight 속성
-폰트의 두게를 지정하는 스타일 속성
-키워드: 700/800/900/bold...
-일반 폰트 두께: 400, 두꺼운 폰트 두께: 700
-두께를 지원하지 않는 폰트는 font-weight 속성을 사용해
두께 조절 할 수 없음
5. line-height 속성
-글자의 높이를 지정, 글자를 수직 중앙 정렬할 때 사용
6. text-align 속성: 글자의 정렬과 관련된 스타일 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font.html</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap"
rel="stylesheet">
<style type="text/css">
.font_arial{font-family: Arial, sans-serif;}
.font_roman{font-family:'Times New Roman',serif;}
.font_gulim{font-family: 굴림;}
.font_verdana{font-family: Verdana; font-size:200%;
font-style:italic;}
#box{width:500px; height:200px; border:1px solid black;
font-size:150%;
font-weight:bold; line-height:200px;}
/* line-height 값을 텍스트를 둘러싼 태그의 세로 크기와 똑같이 맞추면
세로 가운데로 위치함. 그보다 더 작으면 위로 더 크면 아래로 위치함 */
.font_google{font-family: 'Gugi', cursive; font-size:200%;}
</style>
</head>
<body>
<h1 class=""font_arial>Lorem ipsum</h1>
<h1 class=""font_roman>Lorem ipsum</h1>
<h1 class=""font_gulim>Lorem ipsum</h1>
<p class="font_verdana">Lorem ipsum</p>
<p class="font_google">구글 폰트 실습</p>
<div id="box">text-align&line-height</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button.html</title>
<style type="text/css">
.button{width:150px; height:70px; background:#FF6A00;
text-align:center; line-height:70px; font-size:200%;
border:10px solid white; box-shadow:5px 5px 5px #555555;
border-radius:30px; text-shadow:2px 2px 2px #333333;}
a{text-decoration:none; color:white; font-weight:bold;}
/* box-shadow: 5px 5px 5px #555555
오른쪽 아래로 5px씩 번짐 정도 5px 정도의 그림자를 회색 계열로 표시
text-decoration:none -> 밑줄 등의 스타일을 없앰. 주로 앵커태그 밑줄 없앨 때 많이 사용함 */
input[type=button]{width:170px; height:90px;
background:#FF6A00; text-align:center;
line-height:70px; font-size:200%;
border:10px solid white; color:white;
box-shadow:5px 5px 5px #555555;
border-radius:30px; text-shadow:2px 2px 2px #333333;
border-radius:30px; font-weight:bold;}
</style>
</head>
<body>
<!-- css로 버튼 생성 -->
<div class="button"><a href="#">Click</a></div>
<br/><hr/><br/>
<input type="button" value="Click"/>
</body>
</html>
gradiant
CSS 그라데이션 사이트
Ultimate CSS Gradient Generator - ColorZilla.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradiant.html</title>
<style type="text/css">
.gradient{height:90px; line-height:90px; text-align:center;
border:1px solid black; font-size:200%; font-weight:bold; width:600px;
/* Permalink - use to edit and share this gradient:
https://colorzilla.com/gradient-editor/ #ff0000+0,ffff00+50,0000ff+100 */
background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(left, #ff0000 0%, #ffff00 50%, #0000ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ff0000 0%,#ffff00 50%,#0000ff 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ff0000 0%,#ffff00 50%,#0000ff 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 );
/* IE6-9 */}
</style>
</head>
<body>
<div class="gradient">CSS3 Gradient</div>
</body>
</html>