HTML5/CSS3 수업자료

CSS 스타일 활용 예제

관리자 2019.04.02 17:43 조회 수 : 494

- 선택자 또는 글꼴

- 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;
}

외부폰트 적용하기

@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

구글 폰트 : https://fonts.google.com/

그라디언트 코드 생성 사이트

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

http://gradients.glrzad.com

그라디언트 테두리 넣기

border-radius: 10px;

border: 2px solid transparent; 

background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa);

background-origin: border-box;  

background-clip: content-box, border-box;

이 게시물을

번호	제목	글쓴이	날짜	조회 수
6	멀티미디어 활용 자료	관리자	2019.04.02	445
5	Form 관련 이미지	관리자	2019.04.02	425
4	transform, transition 응용 예제 이미지	관리자	2019.04.02	416
»	CSS 스타일 활용 예제	관리자	2019.04.02	494
2	html 기본태그 활용 사이트	관리자	2019.04.02	181
1	기본태그 익히기에 필요한 이미지	관리자	2019.04.02	381

쓰기 태그

첫 페이지 1 2 끝 페이지

HTML5/CSS3 수업자료

CSS 스타일 활용 예제

댓글 0