Simple Is Best

이번 포스팅에서는 z-index 에 대해서 알아보도록 하겠습니다. https://developer.mozilla.org/ko/docs/Web/CSS/z-index z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org MDN 사이트를 참고하여 작성하였습니다. z-index란? : CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. 네, 하..

배경색을 섞어서 넣고 싶다.... 바로 이럴때 사용 하는 것이 linear-gradient입니다. 이번 포스팅에서는 linear-gradient에 대해서 알아 보겠습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() 을 참고하였습니다. linear-gradient() - CSS: Cascading Style Sheets | MDN The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an obj..

이번 포스팅은 이해가 잘 되지 않으실수 있습니다ㅠ 글로 서술하려니 참 힘드네요... 오늘은 이전 포스팅에서 배웠던 내용들을 응용하여 더 자세한 애니메이션 기법에 대해서 알아보겠습니다. 애니메이션에 대해서 아직 자세히 알지 못한다면, 이전 포스팅을 참고하셔도 좋을 것 같습니다! https://daterminal.tistory.com/32 17. [CSS] CSS Animation - 1 이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이 daterminal.tistory.com 애니메이션의 기본 제작 방식 1. 시작 화면 제작 2. 결과 화면 제작 ..

이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이션을 주는 방법이 많더라구요! 또한, 이런 애니메이션 효과는 JavaScript를 활용하여도 충분히 쉽게 부여할 수 있는 기능들 입니다. 하지만 CSS만을 활용한 동적 효과를 부여하는 공부는 CSS에 대한 깊은 이해가 바탕이 되어야 가능 한 것이기 때문에 이를 공부하면서 다시 CSS 개념을 되짚는 마음으로 본 포스팅을 작성합니다. 애니메이션의 본질적인 학습을 위해서 레이아웃 배치에 관한 내용은 생략하겠습니다. 애니메이션 제작 기본 방칙 ★★★ 1. 시작 화면 제작 2. 결과 화면 제작 3. 시작화면..

안녕하세요~ 데이터미널입니다. 이번 포스팅에서는 아이콘 삽입 에 대해서 공부해 보겠습니다. 웹사이트에서 이런 아이콘을 추가하려면 어떻게 해야 할까요? 아이콘에 대한 학습을 하지 않았던 저는 처음 떠올린 방법은 태그 삽입이었습니다. 물론 포토샵으로 이미지를 직접 제작하거나 잘 만들어진 이미지를 다운받아서 img 태그를 사용해도 무방합니다. 이 과정은 매우 귀찮은데 꽤 쓸법한 라이브러리를 소개할까 합니다. font-awesome https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawe..

안녕하세요 데이터미널입니다. 본 포스팅에서는 [반응형 레이아웃]에 대해서 알아보겠습니다. 이전까지는 width 및 height 를 px 단위가 아닌 %(상위 요소에서 몇 %?) 로 설정하는 것으로 대충 얼버무렸었는데요. 오늘! 드디어 반응형 레이아웃에 필요한 지식들을 정리해보도록 하겠습니다. 우선, 반응형 레이아웃을 만들려면 HTML 파일 [CSS] .div { box-sizing: border-box; } body { margin: 0px; } .mybox-container { max-width: 1200px; } .mybox { width: 22%; max-width: 200px; height: 100px; background-color: red; margin: 10px; float: left; } ..

▶ width=device-width : 모바일 기기의 실제 폭으로 렌더링 ▶ initial-scale=1.0 : 접속시의 화면 줌레벨 설정

이전 포스팅에서는 레이아웃 배치 2가지 방법에 대해 학습했었습니다. 1. float : left; 2. display : inline - block; 본 포스팅에서는 레이아웃 배치를 굉장히 쉽게 쓸 수 있게 해주는 flexbox에 대해서 학습하겠습니다. 우선 flex를 사용하기 위한 기본 구조부터 알아보겠습니다. flex를 사용하기 위한 구조 1. flex-box들을 모두 감싸는 flex-container의 클래스명을 가진 div 태그 2. flex-box : flex-box는 어떤 태그로 선언하던 간에 display : block 속성을 가지고 있기 때문에 기본적으로 한 행을 전부 차지(회색 박스) 따라서, 겉으로 보기에는 박스들이 세로로 배치되는 것처럼 보입니다. 이를 코드로 표현하면 다음과 같습니다..