CSS Advanced 정리 내용

본 포스트는 www.w3schools.com/css/css3_borders.asp 에서 필요한 내용만 발췌해서 정리하였습니다.

CSS Rounded Corners

CSS border-radius

border-radius 도 사각형을 기준으로 최 좌측상단부터 시계방향으로 하나씩 정의할 수 있다.

(top-left corner, top-right corner, bottom-right corner, bottom-left corner순)

CSS background: Hero Image

배경화면을 이미지로 만들고 그 위에 텍스트를 입히는 것

CSS Gradients

그라데이션은 top, right, bottom, left 뿐만 아니라 대각선으로도 적용할 수 있다.

사용법은 간단하다. 원하는 방향과 함께 두가지 색상을 명시하면 색이 그 방향으로 바뀐다.

CSS Text Shadow

가로, 세로 방향으로 텍스트 shadow 픽셀을 정의할 수 있다.

Blur Effect (텍스트 블러 효과)

텍스트 블러 효과는 z-index 값을 추가로 설정하여 효과를 나타낼 수 있다.

CSS Text Effects

• CSS Text Overflow
  • 텍스트 overflow가 발생시 처리 방법은 다양합니다
    • text-overflow: clip = overflow하는 텍스트는 잘려서 보여지지 않습니다.
    • text-overflow: ellipsis = 텍스트 끝을 .... 으로 표시하여 잘려짐을 알려줍니다.

CSS Word Wrapping

HTML css는 글자가 길면 다음줄로 넘기지 못하고 컨테이너 밖을 overflow하게 됩니다. 이때 단어가 overflow하지 않고 다음줄까지 이어서 보여지도록 하는것이 바로   word-wrap: break-word; 입니다.

전)

후)

 

컨테이너를 넘치는 텍스트를 컨테이너 안에 넣도록 만드는 명령어 입니다.

 

CSS Transitions

transition 은 특정 CSS효과 변화를 설정하고 적용시간을 설정할 수 있습니다.

transition 속성

transition 속성은 다음과 같은 순서로 정의할 수 있습니다.

 

1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정합니다.

2. 추가할 전환 효과가 지속될 시간을 설정합니다.
www.tcpschool.com/css/css3_transform_transition

아래 예시는 마우스를 빨간 박스에 올릴 시에 가로 길이가 300px, 세로 길이가 300px 로 각각 2초, 4초 동안 커지게 됩니다. 

효과는 부드럽게 빨간 박스가 커지는 것을 볼 수 있습니다. (커서를 밖으로 치울 시에는 서서히 작아집니다) 

Transition 은 크게 아래와 같은 속성을 지닙니다.

CSS Create Multiple Columns