CSS 속성 4편 마지막 ( float + 그림자 + 그레이디언트 속성 )

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 )   

2편 - [Web Programming] - CSS 속성 2편 ( display + 배경 속성 )

3편 - [Web Programming] - CSS 속성 3편 ( 글자 + 위치 속성 )   

   

이번 마지막 CSS 속성 편에서는 float, 그림자, 그레이디언트 속성에 관해 알아보겠다. 🤗

첫번째 float 속성은 웹 페이지를 만들 때 가장 많이 사용하는 속성이라고 한다.

아래의 표에 나타난 키워드 외에도 다양한 키워드가 있지만 주로 아래의 두가지를 사용한다.

float 속성을 사용하지 않은 예제는 다음과 같다.

 

여기서 img { float: left } 의 속성을 주게 되면 

아래와 같이 바뀌는 모습을 볼 수 있다.

키워드 right을 사용했다면 오른쪽으로 붙을 것이다 👍

두번째로 그림자 속성이다. 말그대로 태그에 그림자를 부여하는 속성이다.

글자에 그림자를 부여하는 text-shadow속성과 박스에 그림자를 부여하는 box-shadow속성이 있다.

두가지의 속성의 형태는 아래와 같은 형태로 사용한다.

( bod가 아니라 box다. 오타가 났다 😳..)

그림자를 태그 안쪽에 생성하고 싶다면 흐림도와 색상 사이에 inset 키워드를 넣어주면 된다.

http://css3generator.com/

위의 사이트에서 좀더 쉽게 사용할 수 있으니 한번 들어가봐도 좋다 😁

진짜 마지막으로 만나볼 친구는 그레이디언트 속성이다.

아마 그레이디언트가 무엇인지는 대부분 알고 있을 것이라 생각한다.

두 가지 이상의 색을 혼합하는 채색 기능의 그레이디언트 기능은 초기에는 지원되지 않았다.

그 당시에는 포토샵을 이용해서 배경으로 넣어 주었다고 한다.

그레이디언트 css 코드를 보면 상당히 복잡하다.

따라서 직접 입력 하기 보다는 툴을 이용해 코드를 생성해 사용한다. 😅

http://www.colorzilla.com/gradient-editor/

위의 사이트에서 만들어진 코드를 복사해서 사용하면된다.

우선 기본적으로 선형 그레이디언트를 보면 이와 같다.

CSS 속성 편이 모두 끝났다. 

다음에는 공부한 속성을 가지고 만든 웹페이지의 예제를 들고와서 추가된 부분을 분석 해보려 한다.😲