Simple Is Best

이번 포스팅에서는 box-shadow에 대해서 알아보겠습니다. .white-box { background: white; padding: 20px; border-radius: 5px; box-shadow: 0.5px 0.5px 2px 1px black; } box-shadow 1. x축 이동량 2. y축 이동량 3. blur 4. spread 5. 색상 https://daterminal.tistory.com/23 table에 border-radius 안 먹힐 때 table { border-collapse : collapse; border-radius : 10px; border-style : hidden; box-shadow : 0 0 0 1px black; } box-shadow라는 속성을 이용해 테두리를..

이번 포스팅에서는 CSS 덮어쓰기에 대해서 알아보겠습니다. 스스로 짠 코드가 아닌 기존에 존재하는 코드들을 덮어쓰기 하려면 CSS에 적용되는 우선순위에 대해서 알아야 합니다. 우리가 이전에 [CSS selector]를 학습했던 내용들을 리마인드 하겠습니다. CSS Selector 1. tag에 대해서 적용 (tag명{}) p{ } 2. class에 대해서 적용 (.class명{}) .class{ } 3. id에 대해서 적용(#id명{}) #id명{ } CSS Selector 우선순위 (동일한 태그에 적용되었을때, 상충되는 값들을 어떻게 처리하는지?) 1. style(10000점) >>>>>>>> 2. id(100점) >>>>> 3. class(10점) >> 4. tag(1점) 중요! 스타일링을 위해서는 ..

안녕하세요. 오늘은 부트스트랩을 활용한 grid 레이아웃에 대해서 알아보겠습니다. 오늘 기온이 35도네요... 너무 더워서 반쯤 정신이 나간채로 포스팅을 올리는 점 양해바랍니다. 이전까지 우리가 레이아웃을 썼던 방법은 3가지가 있습니다. 1. float 2. display : inline-block 3. flexbox 모두 좋은 방법들입니다. 하지만 float를 쓰면 width 를 섬세하게 조정해야 한다는 점이 참 불편했었는데요. 오늘은 부트스트랩에서 제공하는 grid 에 대해서 알아보겠습니다. Bootstrap Grid 레이아웃 grid : 사이트를 균일하게 쪼개서 레이아웃을 잡고 싶을 때 사용합니다. - 내부적으로 flex-box를 활용하여 만든 것이기 때문에 IE8 이하에서는 작동하지 않습니다. g..

이번 포스팅에서는 프론트엔드 '컴포넌트' 라이브러리인 Bootstrap 에 대해서 알아보겠습니다. ▷ 컴포넌트 라이브러리 : 필요한 웹 UI / 기능을 복붙식으로 사용 가능 Bootstrap의 장점 1. 반응형 웹 개발이 쉬워진다. ▶ grid 를 사용하면 쉬운 레이아웃을 제작 가능 2. 빠른 퍼블리싱이 가능하다. ▶ 미리 제작된 클래스명을 가지고 스타일링이 가능 설치 방법 (CDN 방법 - Content Delivery Network, 안정성이 떨어진다) 1. 아래 주어진 URL에 접속하여 get start 에 접속한다. https://getbootstrap.com/docs/5.0/getting-started/introduction/ Introduction Get started with Bootstra..

이번 포스팅에서는 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. 시작화면..