목록web/css (27)
Rainbow
color - 글자 색을 지정. font-family - 글자의 서체를 지정. 서체의 종류 세리프(serif) - 꺽쇠가 있는 서체, 가독성을 보다 높여 줌. 산세리프(sans-serif) - 꺽쇠가 없는 서체, 심플하고 깔끔한 서체. 모노스페이스(monospace) - 글자들의 너비가 동일한 서체, 코딩 작업 등에 주로 사용. 커시브(cursive) - 필기체. 판타지(fantasy) - 장식이 많은 서체, 제목 같은 일부 영역에 유용. 웹 안전 서체는 대부분의 PC에 내장되어 있는 서체. font-size - 글자의 크기를 지정. font-style - 이텔릭과 같은 스타일을 지정. font-weight - 글자의 굵기를 조절. font-variant - 영문자 소문자를 작은 대문자로 변경. line..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bqAoG0/btqZQHAF6qM/rKChqGWQOY8ETXXgW9ACI0/img.png)
animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style PORTFOLIO_ANIMATION 텍스트 박스 회전하는 정육면체 div 태그 6개로 면6개를 만들어 줍니다 이어서con 태그로 감싸 하나의 객체처럼 만듭니다. position absolute를 적용하고 각각의 태그를 적당한 각도로 회전시킵니다. con에..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/boF3i4/btqSZxKSibI/B8Ms4PGCG9BlGdjnBGMWy0/img.png)
webclub.tistory.com/407 선택자 우선순위 & 기타 팁 CSS competing rule(경쟁 규칙) 한 요소에 같은 CSS 규칙을 여러 번 지정할 수 있습니다. 이 글에서는 이를 "경쟁 규칙"이라고 부르겠습니다. 브라우저는 우선순위에 의해 경쟁 규칙 중에서 어느 규칙을 webclub.tistory.com CSS 선택자 우선순위 특정 태그에 스타일 속성이 중복될 경우, 어떤 속성이 적용될까? CSS 선택자 우선순위에 대해 알아보자. - 1순위. 속성 값 뒤에 !important를 붙인 속성 - 2순위. HTML에서 style을 지정한 속성 - 3순위. id로 지정된 속성 - 4순위. class로 지정된 속성 - 5순위. 태그 이름으로 지정된 속성 - 6순위. 상위 객체에 상속된 속성 예시..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cYgb6c/btqP4lsHZDa/ZECQ2vaE86zDho9cACRBcK/img.png)
percent 부모 요소의 width에 상대적인 크기를 지정합니다. width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, 그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padding, border) 예를 들어, .box { width: 100px; padding: 20px; border: 10px solid black; } 100px content + ( 20px * 2) padding + ( 10px * 2 ) border = 160px 가 된 것입니다. 또한, width는 %를 이용해서도 크기를 지정할 수 있습니다. .parent { width: 300px; borde..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bteTQK/btqOVJ2C8tu/kZlF6kSCkRNRK410pa8km1/img.png)
percent 부모 요소의 width에 상대적인 크기를 지정합니다. width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, 그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padding, border) 예를 들어, .box { width: 100px; padding: 20px; border: 10px solid black; } 100px content + ( 20px * 2) padding + ( 10px * 2 ) border = 160px 가 된 것입니다. 또한, width는 %를 이용해서도 크기를 지정할 수 있습니다. .parent { width: 300px; borde..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tXOWG/btq9e7iWj2O/6mMB841g1dUqDE2cl98CT1/img.png)
절대 길이 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다. px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다 pt ( 1pt - 1/72 of 1 inch ) 컴퓨터가 없던 시절부터 있던 단위입니다. 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다. RGBA( ) rgb(R, G,..