[CSS] 배경이미지 다양한 색상표현 | 그레이디언트 | 글꼴 꾸밈

24.03.07 16일차

목차

1. 배경이미지다양한색상표현

2. 그레이디언트 효과

3. 글꼴 꾸밈

 

---

 

1. 배경이미지다양한색상표현

 

1. 바둑판 모양 : 기본으로 배경화면을 설정하면 바둑판모양으로 출력된다

이미지가 화면에 가득차 바둑판모형으로 출력된다

2. 배경화면 반복 중단

반복되던 이미지가 중단되었다

 

3. 이미지 겹치기

콤마를 사용하여 이미지를 나열하기

첫번째 사진의 회색배경을 지운다면 구름위에 있는 캐릭터처럼 보여지게된다

 

4. 배경의 크기 조정

100%로 설정하면 화면 가득 배경이 차게된다

가로반복

repeat-x

사진이 가로로 반복된다

순서대로 가로 세로를 설정해준다

가로는 화면에 꽉 차고 세로는 지정해준 높이가 된다

스크롤바를 내리면 배경도 같이 내려감

 

스크롤바를 내려도 배경 고정

 

 

스크롤에 따라서 크기가 지정

 

background-position : 사진 이동

화면의 가로 80%, 세로 90% 위치에 사진

 

링크에 배경색상 입히기

 

5. opacity와 alpha값

    opacity : 박스전체의 투명도 설정(안개낀 것 처럼 뿌옇게 보이는 것)

box1의 투명도 조절

rgba로 색상과 투명도 한번에 설정

다만 rgba 설정은 박스 전체가 아닌 박스에만 투명도가 설정되기 때문에 글자나 테두리는 투명도가 적용되지 않는다

 

2. 그레이디언트 효과

빛이 들어오는 방향

 

위치 0% : 왼쪽하단모서리

위치 100% : 오른쪽상단모서리

 

ellipse at center : 원형효과

 

 

3. 글꼴 꾸밈

1. 가운데정렬

 

2. 왼쪽정렬

 

3. 글사이 간격

 

글자와 글자 사이의 간격

 

word-spacing : 단어와 단어 사이 간격 조절

 

text-indent : 들여쓰기

 

white-space: pre;  : 편집기에 작성한 그대로 출력 (<br>이 없어도 줄바꾸기가 적용되고 띄어쓰기도 적용된다)