<style>
/*
배경이미지
속성 설명
background-image 배경이미지 지정
background-repeat 배경이미지 반복 방식 지정
background-attachment 배경이미지 고정/스크롤 여부
background-position 배경이미지 위치 지정
background-size 배경이미지 사이즈 지정(넓이,높이)
일괄 지정
backgorund:color image repeat attachment position
*/
body{
/* 일반적으로 사용하는 배경 이미지 처리, 배경 이미지 반복 */
background-image:url(../files/landscape.jpg);
/* 사이즈 지정 background-size:150px(넓이) 250px(높이);*/
/* 넓이만 지정할 경우 높이를 비율에 맞추어 자동 지정 */
/* background-size:150px; */
/* 가로로만 반복 */
/* background-repeat:repeat-x; */
/* 미반복 */
background-repeat:no-repeat;
/* 배경 이미지 위치 설정하기 */
/* background-position:100px 100px; */
/* 배경 이미지가 스크롤 되지 않게 하기 */
background-attachment: fixed;
background-position:center center;
}
</style>
풀 스크린 배경 이미지 만들기
<style>
html{
/* 사용하는 이미지에 따라 중앙 부분만 보여질 수 있기 때문에 상단이 보여져야 할 경우 center center 제거*/
background:url('../files/landscape.jpg') no-repeat center center fixed;
/* 배경이미지 크기를 대상 요소(html, 즉 웹문서)에 가득 차게 표시 */
background-size:cover;
}
</style>
박스 모델
<style>
/*
태그의 테두리 밖 여백
margin:속성값 4 (상 우 하 좌)
3 (상 좌우 하)
2 (상하 좌우)
1 (상우하좌)
방향 표시
margin-top, margin-bottom, margin-left, margin-right
태그의 테두리 안 여백
padding:속성값 4 (상 우 하 좌)
3 (상 좌우 하)
2 (상하 좌우)
1 (상우하좌)
방향 표시
padding-top, padding-bottom, padding-left, padding-right
테두리(border)
border-style 박스 테두리의 스타일 지정
속성값
none : 테두리를 표시하지 않음
hidden : 테두리를 숨김
dotted : 점
dashed : 점선
solid : 실선
double : 두 줄
groove : 테두리를 오른쪽 아래에서 빛을 받은 스타일로 지정
ridge : 테두리를 왼쪽 위에서 빛을 받은 스타일로 지정
outset : 테두리를 밖으로 나온 스타일로 지정
inset : 테두리를 안으로 파인 스타일로 지정
border-width : 박스 테두리의 굵기 지정
thin, medium, thick
border-color : 박스 테두리의 색상 지정
방향별로
border-top-
border-right-
border-bottom-
border-left-
일괄 지정
border:style width color
*/
ul{
list-style:none; /* 리스트의 점 아이콘 제거 */
background:green;
/* 상단 오른쪽 하단 왼쪽 */
margin:10px 5px 5px 10px;/* 테두리 밖 여백 */
padding:10px;/* 테두리 안 여백 */
}
li{
color:red;
background:yellow;
margin:10px;
padding:10px;
}
li.withborder{
border-style:dashed;/* 점선 */
border-width:medium;/* 테두리의 두께를 중간으로 설정 */
border-color:black;/* 테두리 색깔 */
}
</style>
<style>
div.gallery figure {
position:absolute;
}
/*
z-index : 요소를 쌓는 순서를 정함
z-index:숫자 -> 숫자가 클 수록 앞에 표시
*/
#f1{
left:0;
top:0;
z-index:3;
}
#f2{
left:150px;
top:50px;
z-index:2;
}
#f3{
left:300px;
top:100px;
z-index:1;
}
</style>
Overflow
<style>
/* overflow 속성
값 설명
visible 오버플로우된 항목을 잘라내지 않는다.(기본값)
hidden 오버플로우된 부분을 감춤
scroll 오버플로우 속성에 강제로 스크롤 바를 생성
auto 오버플로우되면 자동적으로 스크롤 바가 생성됨 */
.div01{
background-color:yellow;
width:200px;
height:100px;
overflow:hidden;/* 내용이 정해진 크기를 벗어날 때 어떻게 지정할지 */
}
.div02{
background-color:pink;
width:200px;
height:100px;
overflow:auto;
}
</style>
Resize
<style>
.resize{
font-size:11pt;
position:absolute;
left:50px;
top:20px;
width:200px;
height:50px;
padding:5px;
border:1px solid #06F;
overflow:hidden;
/* 가로 방향, 세로 방향 모두 사이즈 변경 가능 */
resize:both;
}
</style>
마우스 커서 모양 제어
<style>
a{
/* n-resize, e-resize, crosshair, text, wait, help, move, pointer */
cursor:help;
}
h1{
/*
url 명시 후에 이미지를 불러오지 못 했을 때 auto 또는 기본적으로 지원하는 커서값을 넣어야 함
또는 기본 이미지를 명시하지 않았을 때 이미지를 못 불러오더라도 브라우저가 기본적인 커서를 표시함.
*/
cursor: url('../files/cursor-01.png') 20 20, crosshair;
}
span{
cursor:pointer;
}
</style>
Float
<style>
/*
float : 요소를 떠있게 처리, 세로로 배치되어 있는 요소를 가로로 배치해서 사용
*/
div#a {
width:75%;
background:pink;
float:left;
}
div#b {
width:25%;
background:green;
float:left;
}
</style>
<style>
/*
skew(각도,각도) : 첫 번째 각도는 x축상의 왜곡을 가리키고, 두 번째 각도는 y축상에서의 왜곡 각도임.
두 번째 값이 주어지지 않으면 y축에 각도를 0으로 간주하여 y축으로는 왜곡이 일어나지 않음
skewX(각도) : x축을 따라 주어진 각도만큼 왜곡
skewY(각도) : y축을 따라 주어진 각도만큼 왜곡
*/
.my-photo{
position:absolute;
left:50px;
top:50px;
transform:skew(10deg,10deg);
}
</style>
Translate
<style>
/*
translate(tx,ty) : x축으로 tx만큼, y축으로 ty만큼 이동.
ty값이 주어지지 않으면 0으로 간주
translateX(tx) : x축방향으로 tx값만큼 이동
translateY(ty) : y축방향으로 ty값만큼 이동
*/
.my-photo{
transform:translate(200px,100px);
}
</style>
