방통대 컴퓨터과학과 html 웹프로그래밍 정리내용입니다.
배경관련 속성
background-color : 요소의 배경색 지정
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
body {background-color:skyblue; color:#000000}
.color1 {background-color:hsla(240, 100%, 50%, 0.3)}
.color2 {background-color:rgb(255,0,0)}
.color3 {background-color:yellow}
.color4 {background-color:transparent}
</style>
<title>Document</title>
</head>
<body>
<h3 class="color1">배경색상지정</h3>
<p class="color2">배경<span class="color3">색상</span>지정</p>
<p class="color3">배경<span class="color4">색상</span>지정</p>
</body>
</html>
background-image : 요소의 배경으로 사용할 이미지 파일을 지정
background-repeat : 배경이미지의 반복 여부를 지정(no-repeat, repeat-x, repeat-y, repeat, space, round)
background-attachment : 배경 이미지를 콘텐츠 영역과 함께 스크롤 되로록 할 지 결정(scroll, fixed)
background-position : 배경이미지의 시작 위치를 지정(left, right, top, bottom, center)
background-origin : 배경이미지가 시작하는 기준 위치를 설정(padding-box, border-box, content-box)
background-clip : 배경속성이 적용되는 영역을 지정(border-box, padding-box, content-box)
background-size : 배경이미지의 크기 지정(auto, cover, contain(긴 것 기준이라 비율고정)
background : 속성을 일괄적으로 지정
테두리 속성
border-width : 굵기 지정, medium, thin, thick
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div {border: blue solid; background-color: white}
.border1 {border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 20px;
}
.border2 {border-width: thin medium}
.border3 {border-width: thick 15px} <!-- 상하 thick, 좌우 15px를 나타냄-->
</style>
<title>Document</title>
</head>
<body>
<div class="border1">테두리 굵기</div><br/>
<div class="border2">테두리 굵기</div><br/>
<div class="border3">테두리 굵기</div>
</body>
</html>
border-style : 스타일지정, none, hidden, dotted, dashed, solid etc
border-color : 테두리색상
border-radius : 요소 박스의 각 모서리를 둥글게 지정
border 속성 : 테두리의 굵기, 스타일, 색상을 일괄적으로 지정
box-shadow : 박스의 그림자 스타일을 지정(none, <그림자>
'문돌이의 IT > HTML&CSS' 카테고리의 다른 글
| [HTML 웹프로그래밍] CSS 속성 - 목록 속성, 테이블 속성 (0) | 2017.05.12 |
|---|---|
| HTML 입력양식 form, input 속성 (0) | 2017.04.18 |
| HTML에서 멀티미디어 표현 (0) | 2017.04.17 |
| HTML에서 테이블 표현 (0) | 2017.04.16 |
| HTML 이미지삽입, 하이퍼링크삽입, <iframe> 태그 (0) | 2017.04.15 |