Front-end/CSS3
-
18. Flexbox LayoutFront-end/CSS3 2020. 6. 6. 16:03
.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 DesignFront-end/CSS3 2020. 6. 6. 16:02
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. LayoutFront-end/CSS3 2020. 6. 6. 16:02
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 FontFront-end/CSS3 2020. 6. 6. 16:02
/*웹페이지를 구성하는 html, css, javascript 파일이 사용자의 요청에 의해 서버에서 클라이언트로 다운로드되어 실행되는 것과 같이 폰트 또한 서버에서 클라이언트로 다운로드되어 실행될 수 있다면 이 문제는 해결될 수 있다.*/ /*이러한 문제를 해결할 수 있는 방법이 바로 웹폰트이다. 웹폰트는 사용자가 웹페이지를 요청한 순간 CSS 에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다. 좀 더 구체적으로 말하면 매번 다운로드되는 것은 아니고 클라이언트에 해당 폰트가 존재하지 않을 경우 전송된다.*/ /*CDN(Content Delivery Network) 링크 방식*/ @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);..
-
14. TransformFront-end/CSS3 2020. 6. 6. 16:01
/*트랜스폼(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. AnimationFront-end/CSS3 2020. 6. 6. 16:01
/*일반적으로 CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다. 그러나 경우에 따라서는 JavaScript 를 사용하는 것이 나을 수도 있다. jQuery 등의 애니메이션 기능은 CSS 보다 간편하게 애니메이션 효과를 가능케 한다.*/ /*비교적 작은 효과나 CSS 만으로도 충분한 효과를 볼 수 있는 것은 CSS 를 사용한다. 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.*/ /*세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용하다.*/ /*프로퍼티 설명 기..
-
12. TransitionFront-end/CSS3 2020. 6. 6. 16:01
/*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. GradientFront-end/CSS3 2020. 6. 6. 16:00
/*그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다.*/ /*CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작하여 */ /*사용하였다. 그러나 이러한 방법은 이미지 다운로드에 시간이 소요되는 문제와 이미지를 확대하였을 때 해상도가 */ /*나빠지는 문제 등을 내포하고 있었다.*/ /*그레이디언트는 2가지 종류가 있다. 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally) 방사형 그레이디언트 (Radial Gradient: defined by their center)*/ /*그레이디언트는 CSS3가 비교적 최근부터 제공하는 기술로서 ..