CSS 스타일 활용 예제

- 선택자 또는 글꼴

-  css3에서 추가된 스타일

---

스타일 참고 사이트

http://www.w3schools.com/cssref/

 

CSS3에 새롭게 추가된 속성들

 

CSS 속성 값	내 용
border	테두리의 색을 다양하게 적용할 수 있습니다. 또한 테두리에 이미지를 넣을 수 있고 모서리를 둥그렇게 적용할 수 있습니다.
background	하나의 태그에 다중 이미지를 추가할 수 있고 백그라운드의 위치를 정확하게 잡을 수 있습니다. 또한 백그라운드의 사이즈도 조절할 수 있습니다. 중요한것은 background-size: cover; 을 하면 비율이 깨지지 않고, 요소중심으로 커진다. background-size: contain; 을 하면 이미지 중심으로 크기에 맞게 늘여준다
color	색의 농도(투명도)를 조절할 수 있습니다. 또한 RGB 색과 인쇄용인 HSL 컬러로 색을 지정할 수 있습니다.
text	텍스트에 그림자 효과를 줄 수 있습니다. 또한 단어가 잘리는 효과(word-wrap)를 줄 수 있으며, 텍스트에 overflow 효과를 줄 수 있습니다.
transformation	변형 효과(크기조절, 기울기효과, 회전효과 등)를 줄 수 있습니다.
box	박스에 그림자를 적용할 수 있고 사이즈 조절이 가능하며 세로축과 가로축을 기본으로 overflow를 각각 조절할 수 있습니다.
content	요소(Element)에 직접 콘텐츠를 지정해서 스타일을 줄 수 있습니다.
opacity	요소(Element)에 투명도를 지정할 수 있습니다.
media	CSS2에서 사용하던 media를 다양하게 해상도나 색상 등 여러 가지 요소를 지정해 줄 수 있게 되었습니다.
web font	웹 폰트가 정식으로 지원됩니다. 지금까지는 IE에서만 지원되었던 것이 모든 브라우저에서 지원됩니다.

3에 새롭게 추가된 속성들

 

 

CSS3에서는 투명한 효과(Opacity)를 줄 수 있습니다.

 

텍스트 세로 정렬

/* 세로로 왼쪽 -> 오른쪽 */
.vertical-lr {
  writing-mode: vertical-lr;
}


/* 세로로 오른쪽 -> 왼쪽 */
.vertical-rl {
  writing-mode: vertical-rl;
}


/* 영어는 90º 돌아감 */
.vertical-rlEN {
  writing-mode: vertical-rl;
}


/* 영어를 원위치로 */
.upright {
  writing-mode: vertical-rl;
  text-orientation: upright;

}

 

스타일 2줄 생략표시

html -----------------------

<div class="text">

    <span class="to">‘미식의 도시’ 대만 타이중에서 대한항공 탑승객만 누릴 수 있는 할인 혜택</span>

</div>

 

css ----------------------------

.text {

    display: block;

}

span.to{

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

 

}

위빨간색 부분 line-clamp: 2 숫자는 2줄을 의미, 3줄일경우 3으로 수정

 

 

외부폰트 적용하기

@font-face {font-family:"nanum"; 

                src:url(font/NanumGothic.eot); 

src:local("nanum"), url(font/NanumGothic.woff)  format("woff"), url(font/NanumGothic.ttf) format("truetype"); 

   }

 

font-family:nanum;

---

* eot : ie

  woff : ie,chrome,firefox

  ttf : chrome,firefox, safari, opera