본문 바로가기

Front-end

 (25)
18. Flexbox Layout .flex-container { margin: 10px; padding: 15px; border-radius: 5px; background: #60B99A; } .flex-item { margin: 10px; padding: 20px; color: #fff; text-align: center; border-radius: 5px; background: #4584b1; } /**/ /*1*/ /*2*/ /*3*/ /*4*/ /*5*/ /**/ /*div 요소는 block 요소이기에 수직정렬. 수평 정렬하려면 flex-item(자식요소)를 inline-block 이나 float 으로*/ .flex-item { display: inline-block; float: left; } /*위 항목들을 부모 요소 내에서..
17. Responsive Web Design Home News Contact About Aside London Paris Tokyo Newyork London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium. London, also referred to ..
16. Layout Home Programming Photos About Aside London Paris Tokyo Newyork London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium. London, also referr..
15. Web Font /*웹페이지를 구성하는 html, css, javascript 파일이 사용자의 요청에 의해 서버에서 클라이언트로 다운로드되어 실행되는 것과 같이 폰트 또한 서버에서 클라이언트로 다운로드되어 실행될 수 있다면 이 문제는 해결될 수 있다.*/ /*이러한 문제를 해결할 수 있는 방법이 바로 웹폰트이다. 웹폰트는 사용자가 웹페이지를 요청한 순간 CSS 에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다. 좀 더 구체적으로 말하면 매번 다운로드되는 것은 아니고 클라이언트에 해당 폰트가 존재하지 않을 경우 전송된다.*/ /*CDN(Content Delivery Network) 링크 방식*/ @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);..
14. Transform /*트랜스폼(Transform) 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다.*/ /*transform function 설명단위*/ /*translate(x,y) 요소의 위치를 X 축으로 x만큼, Y 축으로 y만큼 이동시킨다. px, %, em 등*/ /*translateX(n) 요소의 위치를 X 축으로 x만큼 이동시킨다. px, %, em 등*/ /*translateY(n) 요소의 위치를 Y 축으로 y만큼 이동시킨다. px, %, em 등*/ /*scale(x,y) 요소의 크기를 X 축으로 x배, Y 축으로 y배 확대 또는..
13. Animation /*일반적으로 CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다. 그러나 경우에 따라서는 JavaScript 를 사용하는 것이 나을 수도 있다. jQuery 등의 애니메이션 기능은 CSS 보다 간편하게 애니메이션 효과를 가능케 한다.*/ /*비교적 작은 효과나 CSS 만으로도 충분한 효과를 볼 수 있는 것은 CSS 를 사용한다. 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.*/ /*세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용하다.*/ /*프로퍼티 설명 기..
12. Transition /*CSS 는 프로퍼티가 변경되면 그에 따른 변화가 즉시 나타나는데 표시의 변화를 부드럽게 하기 위해 트랜지션을 사용*/ div { width: 100px; height: 100px; background: red; /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */ /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */ transition: all 2s; } div:hover { /*마우스가 div 의 위에 올라왔을때 바뀜*/ border-radius: 50%; background: blue; } /*div:hover 에 transition 을 설정하면 마우스가 올라갈 때(hover on)는 transition 이 발동하지만 마우스가 내려올 때(hover off)는..
11. Gradient /*그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다.*/ /*CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작하여 */ /*사용하였다. 그러나 이러한 방법은 이미지 다운로드에 시간이 소요되는 문제와 이미지를 확대하였을 때 해상도가 */ /*나빠지는 문제 등을 내포하고 있었다.*/ /*그레이디언트는 2가지 종류가 있다. 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally) 방사형 그레이디언트 (Radial Gradient: defined by their center)*/ /*그레이디언트는 CSS3가 비교적 최근부터 제공하는 기술로서 ..
10. Shadow /*text-shadow 선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; } 프로퍼티 값 단위설명 생략 Horizontal-offset px 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다 Vertical-offset px 그림자를 텍스트의 아래로 지정값만큼 이동시킨다 Blur-Radius px 그림자의 흐림정도를 지정한다. 지정값만큼 그림자가 커지고 흐려진다. (양수)가능 Shadow-Color color그림자의 색상을 지정한다 가능 */ /*box-shadow 선택자 { box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow..
9. Inheritance & Cascading /*property Inherit*/ /*width/height no*/ /*margin no*/ /*padding no*/ /*border no*/ /*box-sizing no*/ /*display no*/ /*visibility yes*/ /*opacity yes*/ /*background no*/ /*font yes*/ /*color yes*/ /*line-height yes*/ /*text-align yes*/ /*vertical-align no*/ /*text-decoration no*/ /*white-space yes*/ /*position no*/ /*top/right/bottom/leftno*/ /*z-index no*/ /*overflow no*/ /*float no*/ /*Cascadi..

티스토리툴바