2017. 2. 22. 20:00ㆍWork/CSS
배경 속성
- background-image : 배경에 넣을 그림 지정
body{background-image: url(ewqe.jpg), url(weare.jpg);}
-> 여러개의 배경을 적용할 경우 왼쪽에서 부터 위로 올라옴
- background-size : 사이즈 조절
body{
background-image: url(weare.jpg);
background-size: 10%; -> 전체 % 치율
background-size: 10% 50px; -> 높낮이 조절 가능
}
body{
background-image: url(ewqe.jpg), url(weare.jpg);
background-size: 10%, 50px; -> 쉼표로 조절할 경우 10%는 왼쪽 50px은 오른쪽 그림에 적용
}
-- contain : 너비를 100%로 적용
-- cover : 높이를 100%로 적용
- background-repeat : 그림 패턴의 기본 키워드
-- repeat : 기본 키워드, 반복해서 가득 채움
body{
background-image: url(weare.jpg);
background-size: 10%;
background-repeat: repeat;
}
-- no-repeat : 반복 없음, 단일 그림
등등
- background-attachment : 이미지를 어떤 방식으로 화면에 붙을 것인지
-- fixed : 고정 시킨다.
body{
background-image: url(weare.jpg);
background-size: 10%;
background-repeat: no-repeat;
background-attachment: fixed;
}
-- scroll : 스크롤시 움직임, background-attachment 기본
등등
- background-position : 전체에 X축 위치와 Y축 위치 적용
body{
background-image: url(weare.jpg);
background-size: 10%;
background-repeat: no-repeat;
background-position: 50% 50%;
}
폰트 속성
- font-size : 글자 크기 조절, 크기 단위 또는 여러 키워드로 설정
div{
font-size: 55px;
font-size: small;
}
- font-family : 글자 폰트 지정, 설치된 것 마다 다름
div{
font-family:cursive; -> 일반적 설정
font-family:'없는 폰트 찾음', Arial; -> 웹에 따라 설치된 것이 없을 수 있는데 그때에 찾아서 설정
font-family:'없는 폰트 찾음', sans-serif; -> 고딕체
font-family:'없는 폰트 찾음', serif; -> 명조체
}
- font-style : 글자 스타일 변경
div{
font-style: italic;
}
- font-weight : 글자 두께 조절, 두께를 지원하지 않는 폰트는 조절 불가
div{
font-weight:900;
font-weight:bold;
}
- line-height : 글자의 높이 지정, 글자를 수직 중앙 정렬시 많이 사용
div{
line-height: 70px; -> 버튼등 애플리케이션 안쪽에서 위치 조절
}
- text-align : 글자의 정렬, span 태그에는 적용되지 않음(why? : span 태그는 inline 형식으로 너비 존재 없음)
div{
text-align: right;
}
- text-decoration : 글자에 밑줄
div{
text-decoration: line-through;
}