CSS

3. 배경 및 텍스트

삼색이삼랑해 2022. 8. 12. 17:41

  배경(Backgorund)

 요소의 배경 효과를 주기 위한 스타일 설정 속성은 background이다.

 

1. background-color : 배경 색상을 지정하는 속성.

 

2. background-image : 배경에 이미지를 지정하는 속성.


3. background-repeat : 배경 이미지의 반복 여부 지정 속성.

  • repeat - x, y 반복(기본값)
  • no-repeat - 반복 없음
  • repeat-x - 가로 방향으로만 반복
  • repeat-y - 세로 방향으로만 반복

4. background-size : 배경 이미지의 크기 지정 속성.

  • 수치(px, % 등)
  • contain : 이미지가 요소 영역 내부에 모두 출력. 공백이 발생할 수 있음.
  • cover : 이미지가 요소 영역을 덮음. 너비 공백은 발생하지 않으나, 높이 공백은 발생할 수 있음.

5. background-attachment : 배경 이미지의 스크롤 여부 결정.

    속성 값 : fixed(고정. 스크롤되지 않음.) / scroll(스크롤됨. 기본값.)

 

6. background-position : 배경 이미지의 위치 결정. 9곳의 위치를 지정.

  • left(왼쪽 세로 중앙), right(오른쪽 세로 중앙), top(위쪽 가로 중앙),
  • bottom(아래쪽 가로 중앙), center(정중앙), left top(왼쪽 상단),
  • right top(오른쪽 상단), left bottom(왼쪽 하단), right bottom(오른쪽 하단)

7. background : 위 개별 속성을 하나로 처리하는 단축 속성. 크기(size)는 제외.

                          순서 : 색상 - 이미지 - 반복여부 - 스크롤여부 - 위치

<head>
    <meta charset="UTF-8">
    <title>배경 처리</title>
    <style>
        body {
            background-image: url("samseak1.jpg");
            height: 1500px;
            background-attachment: fixed;
        }
        div#d1 {
            margin: 20px;
            height: 500px;
            background-image: url("samseak2.gif");
            background-repeat: no-repeat;
            color: white;
            background-size: 300px;
            border: 1px solid black;
            background-position: right bottom;
        }
        #d2 {
            width: 500px;
            height: 400px;
            border: 1px solid red;
            background: url("samseak2.gif") 
                        no-repeat 
                        top right;
            background-size: 100px;
        }
    </style>
</head>

  텍스트(Text)

콘텐츠(내용)에 들어가는 글자(하위요소 포함)에 대한 설정은 다음과 같다.

 

1. color : 글자색
2. text-align : 정렬 방식. left(기본값), center, right, justify(양쪽정렬).
3. vertical-align : 수직 정렬 방식. 이미지 + 텍스트인 경우.

  • top : 이미지와 글자를 윗선에 정렬
  • middle : 가운데(중앙선)에 정렬
  • bottom : 밑선에 정렬(기본값)

4. text-decoration : 글자 장식(선) 설정 및 제거.

  • overline - 윗줄 / underline - 밑줄
  • line-through - 취소선(삭제선). 가운데 줄.
  • none - 줄 제거.

5. direction : 글자 인쇄 방향 설정. unicode-bidi와 함께 사용.

  • ltr : 왼쪽에서 오른쪽으로 인쇄(기본값).
  • rtl : 오른쪽에서 왼쪽으로 인쇄.
  • unicode-bidi 속성 : 유니코드의 방향 설정 보조 속성.

6. text-transform : 글자 변환. 알파벳 기준.

  • uppercase : 소 -> 대문자로 변환.
  • lowercase : 대 -> 소문자로 변환.
  • capitalize : 단어의 첫글자를 대문자로 변환.

7. text-indent : 들여쓰기. 픽셀 단위로 들여쓰는 너비 지정.
8. letter-spacing : 글자 간격. 
9. word-spacing : 단어 간격.
10. text-shadow : 글자에 그림자 효과를 추가. 설정값 = 수평이동수치 - 수직이동수치 - 흐림수치 - 색상

11. white-space : 공백 문자에 대한 처리.

12. font-size : 글자의 크기를 지정. 사용 단위 - px, em