Web/HTML & CSS

[CSS] CSS3 (2) : 그림자 효과, 배경, 테두리, 텍스트, 웹 글꼴

728x90

 

CSS3 그림자 효과

> text-shadow 속성

text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값;

- 그림자가 시작할 x축과 y축과 상대 위치를 명시하고, blur값으로 그림자의 흐린 정도를 명시

- (예) 다양한 그림자 효과

<style>
    #shadow_01 { text-shadow: 2px 2px; }
    #shadow_02 { text-shadow: 2px 2px orange; }
    #shadow_03 { text-shadow: 2px 2px 5px; }
    #shadow_04 { text-shadow: 0 0 3px red; }
    #shadow_05 { text-shadow: 1px 1px 2px black, 0 0 20px purple, 0 0 5px maroon; }
</style>

 

> box-shadow 속성

- 해당 HTML 요소에 그림자 효과 적용

box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값;

 

 

 

 

 

CSS3 배경

- 배경의 크기뿐 아니라 위치까지 설정 가능

- 하나의 HTML 요소에 여러 개의 배경 이미지 적용 가능

- CSS2의 background 속성 : background-color, background-image, background-repeat, background-position, background-attachment

- CSS3에서 새로 추가된 background 속성 : background-size, background-origin, background-clip

 

> background-size 속성

- CSS2에서 배경 이미지의 크기는 사용되는 이미지의 실제 크기와 같다

- CSS3에서는 배경 이미지 크기 설정 가능

background-size: 너비 높이 contain|cover ;

- 크기 단위 : 픽셀 단위(px), 배수 단위(em), 백분율 단위(%) 등

- contain : 이미지 비율을 유지하며 요소의 내용(content)를 넘지 않는 범위에서 가능한 한 크게 조절된다. 배경 이미지가 요소의 일부분은 가리지 못할 수도 있다.

- cover : 이미지 비율을 유지하며 요소의 모든 영역을 가리도록 크기가 조절된다. 배경 이미지의 일부가 잘릴 수도 있다.

- background-size 속성을 사용하지 않음으로써, 배경 이미지의 비율을 유지하지 않고 해당 요소를 전부 가릴 수 있다

 

> background-origin 속성

- 배경 이미지의 위치를 결정할 기준을 설정

- 속성값

1. border-box : 배경 이미지를 테두리 영역의 왼쪽 위에 맞춘다

2. padding-box : 기본 설정, padding 영역의 왼쪽 위에 맞춘다

3. content-box : 배경 이미지를 content 영역의 왼쪽 위에 맞춘다

 

> background-clip 속성

- 해당 요소의 배경을 어느 영역까지 설정할지 결정

- 속성값

1. border-box : 기본 설정, 배경을 테두리 영역 끝부분까지 설정

2. padding-box : 패딩 영역 끝부분까지 설정

3. content-box : 내용 영역까지만 설정

 

> 여러 개의 배경 이미지 설정

- background-image 속성을 이용하여 하나의 요소에 여러 개의 배경 이미지 설정 가능

- 각 이미지는 쉼표(,)로 구분되며, 스택(stack)처럼 쌓인다 (가장 처음 명시된 이미지가 가장 위에 나타남)

<style>
    #origin {
        background-image: url(/examples/images/img_man.png), url(/examples/images/img_background_good.png);
        background-position: right top, left;
        background-repeat: no-repeat, repeat;
        background-size: 100px 233px, auto;
    }
</style>

 

 

 

 

 

CSS3 테두리

: 테두리의 모서리를 둥글게 만들거나, 테두리에 이미지를 사용할 수 있다

- CSS3에서 새롭게 추가된 border 속성

속성 설명
border-radius 모서리를 둥글게 설정. 다음 네 가지를 한 줄에 설정
border-top-left-radius -
border-top-right-radius -
border-bottom-right-radius -
border-bottom-left-radius -
border-image 테두리로 사용할 이미지를 설정. 다음 다섯 가지를 한 줄에 설정
border-image-source 사용할 이미지 설정
border-image-slice 이미지를 자르는 방법 설정
border-image-width 이미지 너비 설정
border-image-outset 테두리 영역 너머로 테두리로 사용할 이미지가 얼만큼 넘어갈지 설정
border-image-repeat 테두리로 사용할 이미지의 중간 부분의 처리를 반복으로 할지 늘릴지 설정

 

 

 

 

 

CSS3 텍스트

- 추가된 속성

속성 설명
text-overflow content 영역을 벗어난 텍스트를 어떻게 표현할지
속성값 clip(자름), 속성값 ellipsis( 생략 부호(...) 사용)
속성값 visilble(생략된 텍스트까지 보여줄 수 있음)
word-wrap 콘텐츠 영역을 벗어날 정도로 긴 단어를 다음 줄에 나누어 표현
word-break 길이가 긴 단어를 나누어 표현할 때 단어 나뉘는 기준 설정
break-all(한글 기본 속성) / keep-all
text-emphasis 사용자가 강조 표현 설정할 수 있도록 함
text-align-last 텍스트의 마지막 줄 정렬 방법 설정
text-justify 텍스트 정렬이 양끝 맞춤일 때 그 정렬 방법을 설정

 

 

 

 

 

CSS3 웹 글꼴

: 사용자의 컴퓨터에 설치되어 있지 않은 글꼴까지 사용 가능

- CSS3에서는 웹 글꼴을 위해 @font-face 규칙이 추가됨

 

> 웹 글꼴의 형식

1. 트루 타입 글꼴 (True Type Fonts, TTF)

2. 오픈 타입 글꼴 (OpenType Fonts, OTF)

3. 웹 오픈 글꼴 1.0 (The Web Open Font Format 1.0, WOFF 1.0)

4. 웹 오픈 글꼴 2.0 (The Web Open Font Format 2.0, WOFF 2.0)

5. SVG 글꼴 (SVG Fonts / Shapes)

6. 임베디드 오픈 타입 글꼴 (Embedded OpenTypep Fonts, EOT)

 

> @font-face 규칙

- 웹 폰트를 정의할 때 사용하는 규칙

- 웹 폰트를 서버에 올리고 CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의한다

    → 웹 브라우저는 서버에서 웹 폰트를 내려받아 글꼴을 표시

- 우선 font-family 속성을 이용하여 웹 글꼴을 위한 이름을 정의하고 웹 글꼴이 사용할 글꼴 파일의 주소를 지정

<style>
    @font-face { font-family: myGothicFont; src: url(/examples/media/NanumGothic.woff); }
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
    #nGothic { font-family: myGothicFont; }
    #nMyeongjo { font-family: myMyeongjoFont; }
</style>

- (예) 두꺼운 글씨체(bold text)를 위한 규칙 적용

<style>
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjo.woff); }
    @font-face { font-family: myMyeongjoFont; src: url(/examples/media/NanumMyeongjoBold.woff); font-weight: bold; }
    #nMyeongjo { font-family: myMyeongjoFont; }
</style>

 

 

 

 

 

 

 

[참고] http://tcpschool.com/css/intro

 

728x90
저작자표시 비영리

'Web > HTML & CSS' 카테고리의 다른 글

[CSS] CSS3 (4) : 버튼, UI, 다중 칼럼 레이아웃, 플렉서블 박스 레이아웃, 미디어 쿼리  (0) 2021.07.10
[CSS] CSS3 (3) : 2D / 3D Transform, Transition, Animation  (0) 2021.07.07
[CSS] CSS3 (1) : CSS3 모듈, 벤더 프리픽스, 색, 그래디언트  (0) 2021.07.07
[CSS] CSS 고급 (2) : Form 요소, @규칙  (0) 2021.07.05
[CSS] CSS 고급 (1) : 내비게이션 바, 드롭다운, 툴팁  (0) 2021.07.05
s_ih_yun