CSS

CSS Advanced

Breezebee 2020. 7. 24. 17:38

CSS Rounded Corners

border-radius : 둥근 모서리 효과를 줄 수 있다. 각각의 모서리를 따로 조절할 수도 있다.

  • border-top-left-radius  /  border-top-right-radius  /  border-bottom-right-radius  /  border-bottom-left-radius 의 짧은 버전이라고 할 수 있기 때문에 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 한번에 지정할 수 있다.
  • 앞에서부터 순서대로 값의 개수에 맞게 적용되며 값이 한개일때는 모든 모서리에 적용된다
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

 

CSS Border Images

border-image : 이미지를 경계선으로 쓸 수 있게 한다. 사용을 위해선 다음 세가지를 명시해야한다

  1. 경계선으로 사용할 이미지
  2. 이미지의 어느 부분을 자를 것인지
  3. 가운데 부분이 반복될것인지, 늘어날 것인지

이미지를 9개의 섹션으로 구분해 나눈 뒤, 모서리는 모서리에 배치하고, 가운데 부분은 반복되거나 늘어나게 할 수 있다

 

※ border-image가 작동하려면 사용하려는 이미지가 border property 설정이 되어있어야 한다.

 

#borderimg1 { 
  border: 10px solid transparent;
  padding: 10px;
  border-image: url(border.png) 30 round;
  text-align : center;
}
#borderimg2 { 
  border: 10px solid transparent;
  padding: 10px;
  border-image: url(border.png) 30 stretch;
  text-align : center;
}

 

 

이미지를 자르는 범위에 따라서도 다른 경계선 효과를 낼 수 있다.

 

#borderimg1 {
  border: 10px solid transparent;
  padding: 10px;
  border-image: url(border.png) 50 round;
  text-align : center;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 10px;
  border-image: url(border.png) 20% round;
  text-align : center;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 10px;
  border-image: url(border.png) 30% round;
  text-align : center;
}

 

 

CSS Multiple Backgrounds

background-image : 배경에 이미지를 추가 할 수 있다. 한번에 여러개의 이미지 삽입도 가능하다.

이미지 삽입시 comma로 여러개의 이미지를 구분하며, 이미지는 서로 겹치는데 이때 먼저 작성된 이미지가 앞으로 나온다. 

 

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

 

 

Shorthand로 작성할 수도 있다. (위와 같은 결과)

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
}

CSS Background Size

background-size : 배경 이미지의 크기를 조절할 수 있다

  • lengths, percentages 로 크기 조절을 하거나  contain, cover 키워드를 사용 할 수도 있다
    • lengths, percentages : 두개의 값을 주어 height와 width를 설정
    • contain : 배경 이미지를 컨텐츠 영역내에서 최대한 크게 맞춘다. (높이와 너비가 영역 내에서만 존재) 이미지가 위치한 곳에 따라 이미지가 적용되지 않는 부분이 발생할 수 있다. 
    • cover : 배경 이미지가 컨텐츠 영역을 모두 덮는다. 이미지가 영역을 넘어갈 수도 있다.
#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: contain, 130px, auto;
}

여러개의 이미지의 크기를 한번에 설정해줄 수도 있다.

 

Full Size Background Image

웹 페이지 전체 화면을 배경 이미지로 채울 수 있다. 

  • 여백 없이 전체 웹페이지를 배경 이미지로 채운다
  • 필요에 따라 이미지 확장
  • 이미지를 가운데에 위치한다
  • 스크롤 막대를 생성하지 않아야한다
html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

이미지가 웹페이지의 크기에 따라 자동으로 조절된다.

CSS background-origin Property

background-origin :  배경 이미지가 어디서 부터 위치할 것인지 정한다

  • border-box - 배경 이미지가 왼쪽 위 모서리의 border에서부터 시작한다
  • padding-box - (default) 배경이미지가 왼쪽 위 padding 모서리에서 부터 시작한다
  • content-box - 배경이미지가 왼쪽 위 컨텐츠모서리에서 부터 시작한다

CSS background-clip Property

background-clip  :  배경의 색 영역이 어디까지인지 정한다

  • border-box - (dafult) 배경 이미지가 바깥 border 가장자리부분까지 칠해진다
  • padding-box - 배경이미지가 padding의 바깥 가장자리까지 칠해진다
  • content-box - 배경이미지가 컨텐츠 상자 내에서 칠해진다

CSS Gradients

색의 그라데이션을 표현할 수 있게 한다

CSS Linear Gradients

    문법 

 

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

 

  • Linear Gradients
    • to bottom (default)  /  to top
    • to left  /  to right
    • diagonally (ex. to right bottom)

Using Angles

    문법

 

background-image: linear-gradient(angle, color-stop1, color-stop2);

ex) -90deg

Using Transparency

투명도를 사용해서 fading effect를 넣을 수 있다

 

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

 

Repeating a linear-gradient

#grad {
  background-image: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
}

CSS Radial Gradients

Radial Gradients : 가운데서부터 그라데이션을 줄 수 있다

 

  문법

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

 

각 색들이 몇퍼센트씩 들어갈지도 설정할 수 있다.

shape : circle, ellipse(default)

 

CSS Text Shadow

text-shadow : 글자의 그림자를 정할 수 있다. horizontal shadow 와 the vertical shadow, blur과 색을 지정할 수 있다.

 

  문법

 

text-shadow: horizontal vertical blur color

 

여러개의 그림자 삽입도 가능하다. comma로 구분해주면 된다.

 

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

CSS Box Shadow

box-shadow : 요소에 그림자를 넣을 수 있다. 마찬가지로 horizontal shadow 와 the vertical shadow, blur과 색을 지정할 수 있다.

 

div {
  box-shadow: 10px 10px 5px grey;
}

 

CSS Text Effects

text-overflow : 보이지 않는 부분으로 넘어간 글자의 처리

 - clipped : 안보이는 부분으로 넘어간 글자는 보이는 부분까지 잘려서 보인다

 - ellipsis : 안보이는 부분으로 넘어가는 글자는 ... 으로 표시된다

 

div.test:hover {
  overflow: visible;
}

 

이 코드는 해당 영역에 커서를 올리면 보이지 않는 부분으로 넘어간 글자가 보일 수 있게 한다

 

 

word-wrap  :  긴 단어가 잘려서 다음줄로 넘어가게 한다

 - 보통 긴단어는 영역을 그냥 삐져나가지만 break-word로 글자를 자를 수 있다

 

p {
  word-wrap: break-word;
}

 

word-break  :  줄을 넘어갈때 어떤 식으로 글자를 나눌것인지 정한다

 - keep-all : 단어가 잘려서 다음줄로 넘어가지 않게 한다 

 - break-all : 영역의 끝에 도달하면 단어를 잘라서 다음줄로 넘긴다

 

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

 

writing-mode : 텍스트를 수평으로 쓸것인지 수직으로 쓸것인지 설정

 

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

 

CSS Web Fonts

저작자표시