-
[CSS] background, font, button, gradiantVScode/CSS 2022. 9. 8. 16:29
배경 속성
-특정 태그의 배경 이미지 또는 색상을 지정하는 스타일 속성
-종류
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>
'VScode > CSS' 카테고리의 다른 글
[CSS] layout (0) 2022.09.08 [CSS] position, display, visibilty, shadow (0) 2022.09.08 [CSS] pseudoclass (0) 2022.09.08 [CSS] border, checked, box model, list (0) 2022.09.08 [CSS] selector (0) 2022.09.08