CSS3 04

2017. 2. 22. 20:00Study/CSS

728x90

배경 속성

- 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; 

        }

728x90

'Study > CSS' 카테고리의 다른 글

CSS3 06  (0) 2017.02.23
CSS3 05  (0) 2017.02.23
CSS3 04  (0) 2017.02.22
CSS3 03  (0) 2017.02.22
CSS3 02  (0) 2017.02.21
CSS3 01  (0) 2017.02.18
1 ··· 3 4 5 6 7 8 9 10